[GIS] How to change color of a feature in openlayers

openlayers-2

I'm loading a geojson file into openlayers to show some polygons. From this file I also create a list of all names of these polygons.

Now I want to change the color of a polygon when selected from the list (clicked on the name).

What I've tried is to create a style (http://docs.openlayers.org/library/feature_styling.html) but I couldn't find out how to add this style to the polygon. How can I do that?

Best Answer

You may just to create a style symbolizer hash set and assign it to your selected polygon before adding it to the layer:

var selected_polygon_style = {
    strokeWidth: 5,
    strokeColor: '#ff0000'
    // add more styling key/value pairs as your need
};

selectedFeature.style = selected_polygon_style;
layer.addFeatures([selectedFeature]);

At this page (http://docs.openlayers.org/library/feature_styling.html) you can find much information about the style properties you can modify:

fillColor
fillOpacity
strokeColor
strokeOpacity
strokeWidth
strokeLinecap
strokeDashstyle
...

Related Solutions

OpenLayers 2 – How to Overlay Lat/Lon Points on Google Layer

You need to add a few changes to get the required results:

Add the sphericalMercator: true property to your Google layer so vector layers are shown correctly on top of your Google base layer (this is the reason for the shifting geometry).
Add in the maxExtent property of your Google layer, otherwise the centre of the map will not be set correctly. The extent shown below is the extent of the world in Mercator coordinates.
As user1795 stated your point geometry has to be reprojected from 4326 to Web Mercator to appear correctly on the map.
This also applies to the setCenter LonLat so you need to transform this too.

Working code below:

            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var proj = new OpenLayers.Projection("EPSG:4326");

            var gmap = new OpenLayers.Layer.Google("Google Streets", {
                sphericalMercator: true,
                'maxExtent': new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            });
            var pointLayer = new OpenLayers.Layer.Vector("Point Layer");

            map.addLayers([gmap, pointLayer]);
            var lonlat = new OpenLayers.LonLat(16.373056, 48.208333);
            lonlat.transform(proj, map.getProjectionObject());
            map.setCenter(lonlat, 5);

            var point = new OpenLayers.Geometry.Point(16.373056, 48.208333);
            point = point.transform(proj, map.getProjectionObject());
            //console.log(point);
            var pointFeature = new OpenLayers.Feature.Vector(point, null, null);
            pointLayer.addFeatures([pointFeature]);

[GIS] Changing the line color of a marker box using OpenLayers

You should use fillColor and strokeColor to style your items. Have a look on the documentation page.

You will find below an example based on your code :

<script type="text/javascript">
        var box_extents = [
            [-10, 50, 5, 60],
            [-75, 41, -71, 44],
            [-122.6, 37.6, -122.3, 37.9],
            [10, 10, 20, 20]
        ];
        var map;
        function init(){           


            map = new OpenLayers.Map('map');

            var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'} );

    var style = new OpenLayers.Style({
        fillColor: "#008000",
        strokeColor: "#000000",
        strokeWidth: 2
    });

            var boxes  = new OpenLayers.Layer.Vector( "Boxes" ,{
        styleMap: new OpenLayers.StyleMap(style)
    })         

            for (var i = 0; i < box_extents.length; i++) {
                ext = box_extents[i];
                bounds = OpenLayers.Bounds.fromArray(ext);

                box = new OpenLayers.Feature.Vector(bounds.toGeometry());
                boxes.addFeatures(box);
            }

            map.addLayers([ol_wms, boxes]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            var sf = new OpenLayers.Control.SelectFeature(boxes);
            map.addControl(sf);
            sf.activate();
            map.zoomToMaxExtent();
        }
    </script>

>> See the online example.

Best Answer

Related Solutions

OpenLayers 2 – How to Overlay Lat/Lon Points on Google Layer

[GIS] Changing the line color of a marker box using OpenLayers

Related Question