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.

 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>

Answer 1

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>