2

I want to convert my openlayers 2 features to openlayers 3. I have following part in openlayers 2. I need an equivalent of StyleMap in openlayers 3 so that I can distinguish the default action and select action.

var subMap = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
        fillColor:"orange",
        strokeColor:"orange"
    }),
    "select": new OpenLayers.Style({
        fillColor:"#00FFFF",
        strokeColor:"#00FFFF"
    })
});

I can write the following for "default" case. But where to mention for the "select" case?

var subMap= new ol.style.Style({
    fill: new ol.style.Fill({
        color: "orange"
    }),
    stroke: new ol.style.Stroke({
        color:"orange"
    })
});

Can anyone please help in this regard?

  • Waiting for answers. – LSG Sep 1 '17 at 9:00
  • Could you provide some code snippet of your current style? – juminet Sep 1 '17 at 11:34
  • @juminet I have given the code snippet in the question. That is the style. One for "default" and another for "select". How to write it in openlayers 3? – LSG Sep 1 '17 at 11:39
  • @juminet Ok, edited the question – LSG Sep 1 '17 at 11:46
3

In OpenLayers 3 (or 4), features selection is handled by an interaction. The relevant doc about selection is here: http://openlayers.org/en/latest/apidoc/ol.interaction.Select.html

Here's a piece of code that allows to select any features in your map, and to apply a special style to it (styleSelect):

  // render selected features with a red stroke
  var styleSelect =  new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 2
      })
  });

  // a normal select interaction to handle click
  var select = new ol.interaction.Select({style: styleSelect});
  map.addInteraction(select);

The default (not selected) style can be defined elsewhere, using another ol.style.Style object.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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