Importing & showing a .png file to show on markers

Glitch Help
1

I want to draw markers with a custom icon. A png file. I must import that png first, of course. When it imports, it is placed, automagically, in the ‘assets’ folder.
I tried this:
const blueIcon = L.icon({
iconUrl: “/assets/parking_bicycle-2.png”,
iconSize: [32, 37], // size of the icon
iconAnchor: [16, 37], // point of the icon which will correspond to marker’s location
popupAnchor: [0, -30] // point from which the popup should open relative to the iconAnchor
});

and this:
const drawControl = new L.Control.Draw({
draw: {
polygon: false,
polyline: false,
rectangle: false,
circle: false,
circlemarker: false,
marker: {
repeatMode: true,
icon: blueIcon,
}
},
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);

The icon does not show. What could be wrong?

2

assets don’t go in an assets folder in your project’s filesystem. instead they each get a CDN url, and you have to load them from that URL.

2 Likes
3

Very useful answer. Thank you!

2 Likes
4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.