[GIS] Openlayers 3 multiple symbols in the same point

openlayers

I have a point Vector layer. There are some cases when for one geographic location there are multiple points which should be designed with different symbols. E.g. in a certain building there are pharmacy, grocery store, book shop etc. and each of them has its own symbol.

What is the best practice in this case?

So far I have played with ol.style.Icon objects anchor property, as I have created a field in my db table where I manually set the anchor value of each of them, and use that in my style function. But it is not too efficient…

Does anyone have a good solution for this?

Best Answer

You could use a style function like this:

var typeCache = {};
function style(feature, resolution) {
  var coord = feature.getGeometry().getCoordinates().toString();
  var type = feature.get('type');
  if (!typeCache[coord]) {
    typeCache[coord] = {};
  }
  typeCache[coord][type] = true;
  var offset = Object.keys(typeCache[coord]).indexOf(type);
  return new ol.style.Style({
    image: new ol.style.Icon({
      src: 'path/to/your/icons/' + type + '.png',
      anchor: [0.5, 1 + offset]
    })
  });
};

This works out of the box if the anchor point of your icons (png images named by the type they are used for) is the bottom center and you want to stack symbols vertically. Otherwise you have to use different anchors.

Related Question