CODEWITHSUNDEEP
mapboxmapbox-gl-js
David
David

Reputation: 815

Mapbox GL-JS : How do I add a custom image for an icon instance?

I added a basic icon instance to my map, but cannot figure out how to give it a custom image. (I closely followed this example . After some digging, I have found examples on Mapbox's own page with code showing how to add custom images but it looks like they are adding markers as layers (with GeoJSON sources). It seems like so much code just to have a custom image. My code just looks like this :

var marker = new mapboxgl.Marker()
.setLngLat([-99, 30])
.addTo(map);

Is there a way to add my own image (PNG) for example? I have searched though the options for marker instances at the Mapbox documentation at this link but I can't find any information there.

Upvotes: 0

Views: 553

Answers (1)

jscastro
jscastro

Reputation: 3780

Just try this...

var el = document.createElement('div');
el.className = 'marker';
el.style.backgroundImage = 'url(https://path_to_your_icon/icon.png)';
el.style.width = '50px';
el.style.height = '50px';

new mapboxgl.Marker(el)
.setLngLat([-99, 30])
.addTo(map);

Upvotes: 1

Related Questions