Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Working with OpenLayers 2.11, I'm desperately trying to change my feature style as the user selects it (fairly simple I agree!).

Indeed, It seems easy but I can't see where It fails, perhaps someone experienced with OpenLayers could enlighten me.

Below is my code :

   function onFeatureSelect(event) 
   {

    var feature = event.feature;

    var styleWaypointSelect = new OpenLayers.StyleMap(
    {
        externalGraphic: 'img/map_marker.png',
        graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
        title: 'selectedFeature'
    })


    var clonedFeature = waypointLayer.getFeatureById(feature.id);
    clonedFeature.style = styleWaypointSelect;

    waypointLayer.drawFeature(clonedFeature,styleWaypointSelect);
    waypointLayer.redraw(); /* refresh() I tried several things to refresh the layer but it doesn't seem to change anything at all*/

Thanks,

Gallien LABEYRIE

EDIT : I finally figured out that OpenLayers StyleMap class allows different properties, "default", "delete", "temporary", "select". (you can see this when you debug the style object in firebug)

I added the "select" style of my vector layer like this :

        var styleWaypoint = new OpenLayers.StyleMap({
              "default": new OpenLayers.Style({
                externalGraphic: 'img/mobile_loc.png',
                graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
                title: 'marker'
            }),
               "select": new OpenLayers.Style({
                externalGraphic: 'img/mobile_loc_select.png',
                graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
                title: 'marker_select'
            })
        });
share|improve this question
    
if you want to persist the changes then see this gis.stackexchange.com/questions/53850/… –  neogeomat Apr 11 '13 at 8:34
add comment

3 Answers

up vote 1 down vote accepted

i didnt look into your code about error. but u can solve it with this way:

vectorLayer.features[x].style.externalGraphic = "'img/map_marker.png'";
vectorLayer.features[x].style.graphicWidth = 16;
vectorLayer.features[x].style.graphicHeight = 26;
vectorLayer.features[x].style.graphicYOffset = -24;
vectorLayer.features[x].style.title = 'selectedFeature';

vectorLayer.redraw();

if u put your codes into http://jsfiddle.net, i can check out what is wrong with your code too

i hope it helps you...

share|improve this answer
1  
you're welcome. –  Aragon Aug 6 '12 at 9:18
2  
Thanks very much Aragan, thanks to you I finally figured out that OpenLayers StyleMap class allows different properties, "default", "delete", "temporary", "select". (you can see this when you debug the style object in firebug) –  gallab Aug 6 '12 at 9:24
add comment

I know the topic is ab bit outdated, but just in case someone runs into this problem again you can use the following code to set the default and select style for an entire layer.

You can use other "well known redering intends" as described here.

style = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
        strokeColor: "#339933",
        strokeOpacity: 1,
        strokeWidth: 3,
        pointRadius: 6,
    }),
    "select": new OpenLayers.Style({
        strokeColor: "#ffffff",
        strokeOpacity: 1,
        strokeWidth: 3,
        pointRadius: 6,
    })
});
pointLayer = new OpenLayers.Layer.Vector("Point Layer", {styleMap: style});
share|improve this answer
add comment
var vectormap = new OpenLayers.Layer.Vector('Overlay', 
        {
            styleMap: new OpenLayers.StyleMap(
            {
                 "default": new OpenLayers.Style({
                externalGraphic: 'girl.png',
                graphicWidth: 50, graphicHeight: 50, graphicYOffset: -24,
                title: 'marker'
            }),
               "select": new OpenLayers.Style({
                externalGraphic: 'boy.png',
                graphicWidth: 16, graphicHeight: 26, graphicYOffset: -24,
                title: 'marker_select'
            })
            })
        });
    featurearray = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(113.950,33.019));
    vectormap.addFeatures([ featurearray ]); 

This is my vector layer, but a bit wrong, my png image title attribute can not be displayed when the mouse to move up, I checked the official website the "OSM with Marker and Popup.html" code, exactly the same, you know why, thank you!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.