Menu
I added few markers on the map using folowing this example:
https://www.mapbox.com/mapbox-gl-js/example/geojson-markers/
Now I want to show popup when user clicks on marker image, but i can not find elegant solution. Any help?
778
Style markers First, add the CSS you'll need to style your markers. In this case, add the image file you downloaded as the background-image for a class called marker . In your same index. html file, copy and paste the code inside your style tag below the #map declaration.
var marker = new mapboxgl. Marker({ "color": "#b40219" }) . setLngLat([0, 0]) . addTo(map);
To style a marker, you can add simplestyle to your GeoJSON, load a custom image, or create your own markers with HTML and CSS.
If you need to find a location's latitude and longitude, you can use the Mapbox Search playground, which allows you to search for a location and retrieve its coordinates in longitude,latitude format.
I also had the same problem but I found a workaround without having to create an html element.
I Used getElement() function that return Marker like a HTML Element and after i attach the click event.
this.service.getAllData().forEach(e => { // create MapBox Marker const marker = new mapboxgl.Marker().setLngLat([e.lon, e.lat]).addTo(this.map); // use GetElement to get HTML Element from marker and add event marker.getElement().addEventListener('click', () => { alert("Clicked"); }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With