Geek Answers Handbook

MapBox Markers

I am working on a MapBoxgl and I want to add some markers.

Here is my index.html:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <link href=" /assets/css/bootstrap.min.css " rel="stylesheet" /> <link href=" /assets/css/mapbox-gl.css " rel="stylesheet" /> <link href=" /assets/css/main.css " rel="stylesheet" /> </head> <body> <div id="map"></div> <script src="/assets/js/mapbox-gl.js"></script> <script src="/assets/js/map-style.js"></script> </body> </html>

This is map-style.js:

 var map = new mapboxgl.Map({ container: 'map', center: [57.3221, 33.5928], zoom: 5, style: style }); var geojson = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [30.61, 46.28] }, properties: { title: 'point 1', description: 'point 1 Description', message: 'point1', iconSize: [25, 25] } }, { type: 'Feature', geometry: { type: 'Point', coordinates: [30.62, 46.2845] }, properties: { title: 'point 2', description: 'point 2 Description', message: 'point 2', iconSize: [25, 25] } }] }; map.on('load', function () { // add markers to map geojson.features.forEach(function(marker) { // create a DOM element for the marker var el = document.createElement('div'); el.className = 'markers'; el.style.backgroundImage = 'url(assets/marker-azure.png)'; //el.style.width = marker.properties.iconSize[0] + 'px'; el.style.height = marker.properties.iconSize[1] + 'px'; el.addEventListener('click', function() { window.alert(marker.properties.message); }); // add marker to map new mapboxgl.Marker(el) .setLngLat(marker.geometry.coordinates) .addTo(map); }); });

And the next part of main.css is related to the map and marker:

 #map { position:absolute; top:0; bottom:0; width:100% } .markers { display: absolute; border: none; border-radius: 50%; cursor: pointer; padding: 0; }

So, my problem is that when I add the width property to the markers, their icon displays correctly (with a slight stretch), but they are in the wrong coordinate and move in scaling, as shown in the figure below:

enter image description here

On the other hand, if the width property is excluded, they are in the right place and do not move in scaling, but they are very stretched and actually as wide as the screen (the following image):

enter image description here

It should be noted that I used bootstrap. Could this be the reason for this? If not, then what is the problem?

thanks

+7
marker mapbox mapbox-gl-js
source share
2 answers

I found a solution and shared it with others who will run into this problem. The problem is caused by using not the latest version of the library. After updating to the latest version, I could get rid of this problem.

Please note that sometimes such problems occur when you use npm. Make sure the library is fully loaded and this is the latest version.

The latest releases of MapBox can be found on here .

+4
source share

there was a similar problem, the marker seemed to change position when zooming in / out, correcting it by setting the offset, thinking to share if this could help others, here is the fiddle

// add marker to map var m = new mapboxgl.Marker(el, {offset: [0, -50/2]}); m.setLngLat(coordinates); m.addTo(map);

+1
source share

More articles:


All Articles