Displaying custom local image marker in OSM using OpenLayers

Question

I have followed the tutorial on how to display a custom image as a marker from this article: https://medium.com/attentive-ai/working-with-openlayers-4-part-3-setting-customised-markers-and-images-on-map-da3369a81941

However, when using my own local project structure to reference my png image, it does not get rendered on the map.

Here is my current code:

var aPoint = new ol.geom.Point(ol.proj.fromLonLat([0, 0]))
var aFeature = new ol.Feature({
  geometry: aPoint
})
var aFeatureStyle = new ol.style.Style({
  image: new ol.style.Icon({
    //src: 'https://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png'
    src: '../../../dott.png'
  })
})
aFeature.setStyle(aFeatureStyle)
var aSource = new ol.source.Vector({
  features: [aFeature]
})
var aLayer = new ol.layer.Vector({
  source: aSource
})



var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        aLayer
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 14
    })
})

When using the src: 'https://upload.wikimedia.org/wikipedia/commons/2/2a/Dot.png' variant, the required dot gets displayed, but when using src: '../../../dott.png' no markers are displayed.

I have definitely specified the right path to my local png file, so I am out of ideas why this code doesn't work.

I am using the Angular framework and running this on a local development server using Node.

When looking at the network tab in the dev tools, is the png loaded? — bennos, May 27 '19 at 14:12
It says 404, but I am pretty sure the path to my png file is correct. I even used the full path and it still gives 404 — abarc, May 27 '19 at 14:24
I've found the cause of the problem. The local png file is trying to get accessed using the following URL in a HTTP GET request: http://localhost:4200//Dot.png, and this is clearly not referencing the internal project structure and so the png file cannot be found at that address. However, I still don't know how to ensure a referral to the local png file correctly. — abarc, May 27 '19 at 17:05

score 1 · Accepted Answer · answered May 28 '19 at 09:42

1

So I finally figured it out, and I feel like I should've known this earlier, but since I'm new to Angular I didn't spot it straight away.

Any images that are needed to be referenced in source code in Angular need to be in src/assets/images folder in the Angular project structure. Then by specifying the path as src: '../assets/images/Dot.png' the image is successfully loaded with a 200 OK response, seen in the Network tab of a browser's Developer Tools.

answered May 28 '19 at 09:42

abarc

89
1
11

However, it's not clear for me how to reference image by RELATIVE TO COMPONENT path if I want to make my OpenLayers component as a reusable library. – Alexander Apr 14 '22 at 11:26

SMattia · Answer 2 · 2019-05-28T09:41:29.553

0

That happened to me, I solved it by using

import imagePath from '../../../dott.png'

and than using the imagePath variable instead using the path ../../../dott.png

edited May 28 '19 at 09:41

answered May 27 '19 at 17:30

SMattia

51
1
1
6

It gives me an error "module not found" if I do that – abarc May 28 '19 at 09:38

Displaying custom local image marker in OSM using OpenLayers

2 Answers2