Dynamic text overlay in openlayers

Question

I need to programmatically display up to 600 individual 6 digit text labels depending on the zoom level and central coordinates of the map. My current function to display the label is:

function addLabel(lon, lat) {
    var pos = ol.proj.fromLonLat([lon, lat]);
    var maptxt = new ol.Overlay({
        position: pos,
        element: document.getElementById('txt')
      });
      map.addOverlay(maptxt);
}

Is the only approach to dynamically create 600 HTML elements or is there an alternative, better approach to displaying a 6 digit value on the map?

Answer 1

An example of making text features (what Mike suggested in his comment on your question)

Modified code from the Vector Labels example in the documentation

// Points
function labelStyleFunction(feature, resolution) {
  return new ol.style.Style({
    text: new ol.style.Text({
      text: feature.get('name'),
      fill: new ol.style.Fill({
        color: "#aa3300"
      }),
      stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 3
      }),
    }) 
  });
}
var vectorSource = new ol.source.Vector({});
var vectorLabels = new ol.layer.Vector({ // VectorLayer({
  source: vectorSource,
  style: labelStyleFunction
});
vectorLabels.getSource().addFeatures(features);
map.addLayer(vectorLabels);

Example of making features:

for (var i = 0; i < locations.length; ++i) {
  var coordinates = ol.proj.fromLonLat([locations[i].LONGITUDE, locations[i].LATITUDE]);
  var feature = new ol.Feature(new ol.geom.Point(coordinates));
  feature.set("name", locations[i].ATM_ID);
  features.push(feature);
}

proof of concept fiddle

code snippet:

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([155, -35.563910]),
    zoom: 4
  })
});

var locations = [{
    LATITUDE: -31.563910,
    LONGITUDE: 147.154312,
    ATM_ID: "ID1"
  },
  {
    LATITUDE: -33.718234,
    LONGITUDE: 150.363181,
    ATM_ID: "ID2"
  },
  {
    LATITUDE: -33.727111,
    LONGITUDE: 150.371124,
    ATM_ID: "ID3"
  },
  {
    LATITUDE: -33.848588,
    LONGITUDE: 151.209834,
    ATM_ID: "ID4"
  },
  {
    LATITUDE: -33.851702,
    LONGITUDE: 151.216968,
    ATM_ID: "ID5"
  },
  {
    LATITUDE: -34.671264,
    LONGITUDE: 150.863657,
    ATM_ID: "ID6"
  },
  {
    LATITUDE: -35.304724,
    LONGITUDE: 148.662905,
    ATM_ID: "ID7"
  },
  {
    LATITUDE: -36.817685,
    LONGITUDE: 175.699196,
    ATM_ID: "ID8"
  },
  {
    LATITUDE: -36.828611,
    LONGITUDE: 175.790222,
    ATM_ID: "ID9"
  },
  {
    LATITUDE: -37.750000,
    LONGITUDE: 145.116667,
    ATM_ID: "ID10"
  },
  {
    LATITUDE: -37.759859,
    LONGITUDE: 145.128708,
    ATM_ID: "ID11"
  },
  {
    LATITUDE: -37.765015,
    LONGITUDE: 145.133858,
    ATM_ID: "ID12"
  },
  {
    LATITUDE: -37.770104,
    LONGITUDE: 145.143299,
    ATM_ID: "ID13"
  },
  {
    LATITUDE: -37.773700,
    LONGITUDE: 145.145187,
    ATM_ID: "ID14"
  },
  {
    LATITUDE: -37.774785,
    LONGITUDE: 145.137978,
    ATM_ID: "ID15"
  },
  {
    LATITUDE: -37.819616,
    LONGITUDE: 144.968119,
    ATM_ID: "ID16"
  },
  {
    LATITUDE: -38.330766,
    LONGITUDE: 144.695692,
    ATM_ID: "ID17"
  },
  {
    LATITUDE: -39.927193,
    LONGITUDE: 175.053218,
    ATM_ID: "ID18"
  },
  {
    LATITUDE: -41.330162,
    LONGITUDE: 174.865694,
    ATM_ID: "ID19"
  },
  {
    LATITUDE: -42.734358,
    LONGITUDE: 147.439506,
    ATM_ID: "ID20"
  },
  {
    LATITUDE: -42.734358,
    LONGITUDE: 147.501315,
    ATM_ID: "ID21"
  },
  {
    LATITUDE: -42.735258,
    LONGITUDE: 147.438000,
    ATM_ID: "ID22"
  },
  {
    LATITUDE: -43.999792,
    LONGITUDE: 170.463352,
    ATM_ID: "ID23"
  }
];

var features = [];
var i;

for (var i = 0; i < locations.length; ++i) {
  var coordinates = ol.proj.fromLonLat([locations[i].LONGITUDE, locations[i].LATITUDE]);
  var feature = new ol.Feature(new ol.geom.Point(coordinates));
  /* feature.setProperties({
    name: locations.ATM_ID
  }) */
  feature.set("name", locations[i].ATM_ID);
  features.push(feature);
}
// Points
function labelStyleFunction(feature, resolution) {
  return new ol.style.Style({
    text: new ol.style.Text({
      text: feature.get('name'),
      fill: new ol.style.Fill({
        color: "#aa3300"
      }),
      stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 3
      }),
    })
  });
}
var vectorSource = new ol.source.Vector({});
var vectorLabels = new ol.layer.Vector({ // VectorLayer({
  source: vectorSource,
  style: labelStyleFunction
});
vectorLabels.getSource().addFeatures(features);
map.addLayer(vectorLabels);

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map,
.map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>OpenLayers example</title>
<div id="map"></div>