Custom Overlays in OpenLayers 3

Question

Currently I am working on Openlayers 3.

I used custom overlays in Google maps Javascript api v3 to add customized markers as html div on the map. And these markers are grouped and plotted in different custom overlays.

Now I am trying to implement the same in OpenLayers 3, but I couldn't find any solution as the overlays in OpenLayers 3 takes one marker in one overlay.

Can I group overlays in OpenLayers 3 in order to group the markers? Or Is there any other options available?

I too facing the same problem. You can try leaflet.js as well — Shoaib Konnur, Jan 02 '17 at 06:36

score 0 · Answer 1 · answered Jan 02 '17 at 14:06

You have multiple possible options.

A) If you have only one dataset, then you could use a StyleFunction. See this ol3 vector example, more specifically this section of code:

  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      url: 'https://openlayers.org/en/v3.20.1/examples/data/geojson/countries.geojson',
      format: new ol.format.GeoJSON()
    }),
    style: function(feature, resolution) {
      style.getText().setText(resolution < 5000 ? feature.get('name') : '');
      return style;
    }
  });

See the style property? It can be a ol.style.Style or a style function, like demonstrated above. The function receives the feature and current resolution of the map view as argument and is called every time the feature gets rendered (or re-rendered). Returning a ol.style.Style or array of style objects will render the feature using the/these styles.

The feature can have unique properties, i.e. feature.getProperties(). Using as many properties within the feature(s), you can return a unique array of unique style objects.

Here's a more complex ol3 example featuring style functions that you can look and have an example of dynamic styling depending on the resolution. That could give you a better idea of what you could do with the feature properties.

B) If you have multiple datasets, then you can create one vector layer per dataset and define a unique style object on the layer, which would render the features all the same.

Thank you for your reply, but I need to use a html div for each marker to store information about the marker. I don't know how the styling of overlays can help with this. — SHK, Jan 04 '17 at 03:30
If you look at the vector example of ol3 (the same in the answer), you'll see that when you mouse hover the countries you see information being displayed. Those are rendered using ol.Feature, not ol.Overlay. I think this could be a good approach for you. — Alexandre Dubé, Jan 04 '17 at 13:08

Custom Overlays in OpenLayers 3

1 Answers1