1

i am trying to add icons on my map using features but instead of showing the icosn i get a dot on the map in that position.

let map = new Map({
target: "map",
layers:[ 
new TileLayer({
source: OSM(),
})
],
view: new View({
center: [0,0],
zoom:0
})
});



let a = new Feature({
    geometry: new Point([100,100]),
    name: 'a',
    imgSrc: "assets/arrow.png"
  })
let vectorSource = new sourceLayer({
  features: [a],
  wrapX: false,
  });  
let markerVectorLayer = new vectorLayer({
    source: vectorSource,
 });
map.addLayer(markerVectorLayer);
1

2 Answers 2

0

try to make sure the src of image is right: just try ol.style.Icon({ src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png' }));

0

Where did the imgSrc property of the Feature come from?

What works for me is (as @Mike suggested in his comment) is adding a style to the Feature as shown in the icon example:

let a = new ol.Feature({
    geometry: new ol.geom.Point([100,100]),
    name: 'a',
  })

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
            src:  "data/arrow.png",
            scale: 0.5
        }))
      });
      a.setStyle(iconStyle);

let vectorSource = new ol.source.Vector({ // sourceLayer({
  features: [a],
  wrapX: false,
  });  
let markerVectorLayer = new ol.layer.Vector({ // vectorLayer({
    source: vectorSource,
 });
map.addLayer(markerVectorLayer);

live example

[![screenshot of arrow on map][1]][1]

full code:

    <div id="map" class="map"><div id="popup"></div></div>
    <script>
let map = new ol.Map({
  target: "map",
  layers:[ 
    new ol.layer.Tile({ // TileLayer({
      source: new ol.source.OSM(),
    })
  ],
  view: new ol.View({
    center: [0,0],
    zoom:0
  })
});

let a = new ol.Feature({
    geometry: new ol.geom.Point([100,100]),
    name: 'a',
  })

      var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
            src:  "data/arrow.png",
            scale: 0.5
        }))
      });
      a.setStyle(iconStyle);

let vectorSource = new ol.source.Vector({ // sourceLayer({
  features: [a],
  wrapX: false,
  });  
let markerVectorLayer = new ol.layer.Vector({ // vectorLayer({
    source: vectorSource,
 });
map.addLayer(markerVectorLayer);
</script>




**code snippet:**


  [1]: https://i.stack.imgur.com/F8l4x.png
  [2]: https://i.stack.imgur.com/zehSm.png

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.