Set different icons to openLayers vector

Question

i need some help to set icons to vectors in my map. I mean when map loads it shows different icons depending of property "station" in GeoJson. Using "for" I've got the name station and set a variable to store the path to get the icon. In console it shows the correct path but when i try to use it openlayerIcon as src it takes the last variable.

let startDatajson = (new ol.format.GeoJSON({
        dataProjection : 'EPSG:4326',
        featureProjection:  'EPSG:3857',
    })).readFeatures(startJson);
     let stationStartSource = new ol.source.Vector({
        features: startDatajson       
    });
        var onLoadSrc;
        var getLoadStation = startDatajson.length;
          for(i=0;i<getLoadStation;i++){
            var getStation = startDatajson[i].get("Station");
                 if(getStation == "NNAA"){
                    onLoadSrc="assets/img/alert-smaller.png";
                }else{
                    onLoadSrc="assets/img/blue-triangle.png";
                } 
                /* switch(getStation){
                    case "NNAA": onLoadSrc="assets/img/alert-smaller.png";
                    break;
                    case "LIM027": onLoadSrc="assets/img/blue-triangle.png";
                    break;
                } */
                console.log(getStation);
                console.log(onLoadSrc);
         }

         
        /* creating image as style */ 
        var startIconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5,0.5],
                size: [28,19],
                offset: [1,1],
                scale: 1,
                src: onLoadSrc,       
            })
            
        });  
        /* creating vector and adding image on style created before */
        startStationsLayer = new ol.layer.Vector({
        source: stationStartSource,
        visible:true,
        title:"ultimasEstaciones",
        style: startIconStyle,
                       
    });  
    map.addLayer(startStationsLayer);

in browser

Sounds like a problem that can be solved with `let` or function closure. Please provide a [mcve] that demonstrates your issue, preferably a [StackSnippet](https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers) in the question itself. — geocodezip, Sep 06 '21 at 14:24
Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — Community, Sep 11 '21 at 01:30

score 0 · Answer 1 · answered Sep 06 '21 at 19:16

If you have more features than possible icons you should set up a cache of icon styles and use a style function to return the style appropriate for your feature name.

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/css/ol.css" type="text/css">
    <style>
      html, body, .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.6.1/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">

const styles = {};
for (let i = "A".charCodeAt(); i <= "Z".charCodeAt(); i++) {
  const char = String.fromCharCode(i);
  styles[char] = new ol.style.Style({
    image: new ol.style.Icon({
      src: "https://maps.google.com/mapfiles/kml/paddle/" + char + ".png",
      anchor: [0.5, 1]
    })
  });
}

const vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: "https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson",
    format: new ol.format.GeoJSON()
  }),
  style: function (feature) {
    return styles[feature.get("accentcity").charAt(0)];
  }
});

const map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vectorLayer
  ],
  target: document.getElementById("map"),
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 52.25]),
    zoom: 9
  })
});

    </script>
  </body>
</html>

I only have 2 conditions to set 2 images as icons. Do i have to set up a cache anyway? — Ander Canales Medina, Sep 06 '21 at 20:24
No, there is nothing to be gained by having a cache if each feature has its own unique icon. — Mike, Sep 06 '21 at 20:33
well, my problem is exactly like my post, how should i change there to get the solution? because it only takes the last values not and set it to all points — Ander Canales Medina, Sep 06 '21 at 20:47

Set different icons to openLayers vector

1 Answers1