how to add point features to openlayer 6 map

Question

I'm new to openlayers and am looking for a good tutorial for adding point features to a map.

There are 900 points {name, lat,long,url} which represent retail stores and I need to be able to add each of them along with a colour that indicates the health of the store. The health of the store may change every 15 minutes.

I'm trying to start simple, but am struggling to add a single point to a map. Any guidance would be appreciated. heres what I have so far. The map displays , but no points are visible. I'm struggling with the examples as they seem to assume node.js.

stores=[
   {storeID:3,name:"store name",lat:51.576175,lon:-0.224523,addr:"store address"}
];

let oMap;
    let oVectorSource;

function loadmap(){
    oVectorSource = new ol.source.Vector({wrapX: false});
    oMapOpts = {
        target: 'map',
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()}),
            new ol.layer.Vector({ source: oVectorSource})
        ],
        view: new ol.View({
              center: ol.proj.fromLonLat([-1.548567, 53.801277]), //leeds
              zoom: 6.5
        })
    };
    map = new ol.Map(oMapOpts);
    load_sites();
}

function load_sites(){
    if (! stores) { $.error("stores missing");};
    var i;
    oStyle = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 10,
          stroke: new ol.style.Stroke({color: '#fff'}),
          fill: new ol.style.Fill({ color: '#3399CC'}),
        })
      });
      
    for (i=0; i< stores.length; i++){
        var oStore = stores[i];
        
        var oFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.fromLonLat([ oStore.lon,oStore.lat])),
            style:oStyle
        });
        oFeature.setGeometryName(oStore.name);
        
        oVectorSource.addFeature(oFeature);
    }
}

$(loadmap);

open768 · Answer 1 · 2022-03-15T11:03:52.083

found a solution in Which method of adding features is more efficient by openlayers.

have simplified further and it worked :-)

function load_sites(){
   if (! stores) { $.error("stores missing");};
   var i;
   var aFeatures = [];
   for (i=0; i< stores.length; i++){
      var oStore = stores[i];
    
      var oFeature = new ol.Feature({
          geometry: new ol.geom.Point(
             ol.proj.fromLonLat([oStore.lon, oStore.lat])
          )
      });
      aFeatures.push(oFeature);
   }
   oVectorSource.addFeatures(aFeatures);
}

how to add point features to openlayer 6 map

1 Answers1