How to add many markers with custom text to openlayers 5

Question

I'm using openlayers v5.3.0, and actually loading a map with many markers (in the snippet are a small subset, in my code there are thousands).

What i want to do is to customized those markers, styling them with differents colors and text.

How can i customize the text and the color of each marker added to the map?

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map-canvas',
  layers: [baseMapLayer],
  view: new ol.View()
});
var markers = [];

markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.483713800000032, 41.901777])
  ),
  name: '492,00'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.5048055, 41.8968191])
  ),
  name: '289,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.48060190000001, 41.9077133])
  ),
  name: '1606,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.498839999999973, 41.9000227])
  ),
  name: '324,00'
}));

var vectorSource = new ol.source.Vector({
  features: markers
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});

map.addLayer(markerVectorLayer);
map.getView().fit(vectorSource.getExtent(), map.getSize());

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map-canvas" style="width: 400px; height: 400px"></div>

score 2 · Accepted Answer · answered Feb 28 '19 at 20:31

You would need to create marker styles for each color you wish to use, and a text style, then use a style function to select the what is appropriate for each feature

var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map-canvas',
  layers: [baseMapLayer],
  view: new ol.View()
});
var markers = [];

markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.483713800000032, 41.901777])
  ),
  name: '492,00'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.5048055, 41.8968191])
  ),
  name: '289,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.48060190000001, 41.9077133])
  ),
  name: '1606,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.498839999999973, 41.9000227])
  ),
  name: '324,00'
}));

var colors = ['red', 'green', 'blue', 'black'];
var iconStyles = [];

colors.forEach(function(color) {
  iconStyles.push(new ol.style.Style({
    image:  new ol.style.Circle({
        radius: 6,
        stroke: new ol.style.Stroke({
            color: '#fff'
        }),
        fill: new ol.style.Fill({
            color: color
        })
    })
  }))
});

var labelStyle = new ol.style.Style({
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        overflow: true,
        fill: new ol.style.Fill({
            color: '#000'
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
        }),
        textBaseline: 'bottom',
        offsetY: -8
    })
});

var vectorSource = new ol.source.Vector({
  features: markers
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: function(feature) {
      var name = feature.get('name');
      var iconStyle = iconStyles[parseInt(name)%colors.length];
      labelStyle.getText().setText(name);
      return [iconStyle, labelStyle];
  }
});

map.addLayer(markerVectorLayer);
map.getView().fit(vectorSource.getExtent(), map.getSize());

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map-canvas" style="width: 400px; height: 400px"></div>

Thank's! that works perfectly, i made just a few modifications, since my code is in a .cshtml file. In [this fiddle](https://jsfiddle.net/mcw8f72s/) you can see my current code (without add another anwser since your is valid). The main difference is that i'm creating a array of styles, and in my case the cicle on myItems is on a c# array (while in the fiddle is on an array of json items). — GiuServ, Mar 01 '19 at 08:31
Is there a way to add extra info to the ol.Feature object, so that I could try to optimize my js code and try to avoid to creating a lot (thousands) of Styles, but use a single one and set text and colors dinamycally? — GiuServ, Mar 01 '19 at 08:38
Ok, found [this](https://gis.stackexchange.com/questions/239089/add-properties-name-label-or-id-to-a-feature) :P — GiuServ, Mar 01 '19 at 08:43

How to add many markers with custom text to openlayers 5

1 Answers1

Linked