[OpenLayers-Users] How to change color of points dynamically from a geoJson in openlayers

Niccolò Dal Santo ncl.dalsanto at gmail.com
Mon Sep 22 08:43:01 PDT 2014


Hello everybody,

I am trying dynamical give a color to some points read by a GeoJSON file. I
am taking inspiration by this post

How can I add an infowindow to an OpenLayers GeoJSON layer?
<http://gis.stackexchange.com/questions/42401/how-can-i-add-an-infowindow-to-an-openlayers-geojson-layer>

but I can't get what is wrong in my code:

    <script type="text/javascript">


        var map;
        function initMap() {
            map = new OpenLayers.Map("info");
            var mapnik = new OpenLayers.Layer.OSM();
            map.addLayer(mapnik);

            map.addControl(new OpenLayers.Control.ScaleLine());
            map.addControl(new OpenLayers.Control.OverviewMap());
            map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.LayerSwitcher());


             var myStyles = new OpenLayers.StyleMap({
                    "default": new OpenLayers.Style({
                        fillColor: "${getColor}",
                        strokeWidth: 1,
                        strokeColor: "#000",
                        fillOpacity: 0.8,
                        graphicZIndex: 5

                    },
                    {
                    context: {
                       getColor : function (feature) {
                          return feature.attributes.colore > 2 ? '#ffc000' :
                                 feature.attributes.colore > 1 ? '#00317c' :
                                                                 '#FFEDA0' ;
                         }
                       }
                  })
              });

            var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
                    styleMap: myStyles,
                    projection: new OpenLayers.Projection("EPSG:4326"),
                    strategies: [
                        new OpenLayers.Strategy.Fixed()],
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "colori.json",
                    format: new OpenLayers.Format.GeoJSON()
                })
            });

            map.addLayer(geojson_layer);

            map.setCenter(
                new OpenLayers.LonLat(8.692, 49.412).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 10
            );

        }

    </script>

and here is the GeoJSON file colori.json I am trying to use:

{"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
            "properties":{
                "colore": 7
            },
            "geometry":{
                "type":"Point",
                "coordinates":[8.692, 49.412]
            }
        }
    ]
}

Thanks for your help!

Niccolò


-- 
Niccolò Dal Santo
+39 342 15 70 842
ncl.dalsanto at gmail.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20140922/e23625fb/attachment.html>


More information about the Users mailing list