CODEWITHSUNDEEP
openlayers
user142951
user142951

Reputation:

How to keep OpenLayers.StyleMap and OpenLayers.SelectFeature from conflicting?

I have an OpenLayers.Layer.Vector layer, something like this:

layer = new OpenLayers.Layer.Vector("zzzzz", {
  strategies: [
    new OpenLayers.Strategy.Fixed(),
  ],
  // styleMap: new OpenLayers.StyleMap({
  //   'default': { .. layer styles here ..}
  //   'select': { .. selected styles here ..}
  // }),
  protocol: new OpenLayers.Protocol.HTTP({
    url: "/kml/zzzzzz.kml",
    renderers: ['Canvas','SVG'],
    format: new OpenLayers.Format.KML({
      extractStyles: false, 
      extractAttributes: true,
      maxDepth: 0
    })
  })
});

Then I have an OpenLayers.Controls.SelectFeature control, something like this:

selectFeature = new OpenLayers.Control.SelectFeature(
    [layer],
    {
      renderIntent: "select",
      clickout: true,
      toggle: true
    }
);

Then, I add it to the map, like so:

map = new OpenLayers.Map('map');
map.addLayer(layer);
map.addControl(selectFeature);
selectFeature.activate();

Now, the instant that I uncomment those styleMap lines, all of my features become unclickable and unresponsive. Not only do the styles not reflect the state, but the states don't seem to be changing at all.

What do I need to do to maintain custom styles AND have the layers be hoverable and/or clickable?

Upvotes: 2

Views: 977

Answers (1)

acanimal
acanimal

Reputation: 5020

How are you styling the intents? What is the value of your symbolizer hash 'default': { .. layer styles here ..} ???

I think you are creating an "empty" object and setting only some properties for your default and select style, for example:

default: {
    strokeColor: "red"
}

which produces a style with only one attribute and without lineWidth, strokeOpacity, etc.

Next code works fine for me. Also note the renderers must be specified in the layers instead in the protocol.

    var map = new OpenLayers.Map("map");

    // Create an OpenStreeMap raster layer and add to the map
    var osm = new OpenLayers.Layer.OSM();
    map.addLayer(osm);

    // Set view to zoom maximum map extent
    map.zoomToMaxExtent();

    // Create symbolizers inherited from the predefined styles and change only some properties.
    var defaultStyleSymbolizer = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
    defaultStyleSymbolizer.strokeColor = "green";
    var selectStyleSymbolizer = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['select']);
    selectStyleSymbolizer.strokeColor = "red";

    // Create a vector layer
    var layer = new OpenLayers.Layer.Vector("zzzzz", {
      strategies: [
        new OpenLayers.Strategy.Fixed(),
      ],
      // Set the renderers
      renderers: ['Canvas','SVG'],
      // Apply the style map
      styleMap: new OpenLayers.StyleMap({
        'default': defaultStyleSymbolizer,
        'select': selectStyleSymbolizer
      }),
      protocol: new OpenLayers.Protocol.HTTP({
        url: "./global_undersea.kml",
        format: new OpenLayers.Format.KML({
          extractStyles: false, 
          extractAttributes: true,
          maxDepth: 0
        })
      })
    });

    // The select control
    var selectFeature = new OpenLayers.Control.SelectFeature([layer], {
      renderIntent: "select",
      clickout: true,
      toggle: true
    });

    // Add layer and control
    map.addLayer(layer);
    map.addControl(selectFeature);
    selectFeature.activate();

Upvotes: 1

Related Questions