MapBox markers Move on zooming

10
votes

I'm working on MapBoxgl and I want to add several 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 following is main.css portion related to 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 width property to markers, their icon be displayed correctly (with a bit stretch) but they are in wrong coordinate and move on zoom, like picture below:

enter image description here

On the other hand, if width property is eliminated, they are in right place and does not move on zooming, but they are very stretched and in fact as wide as screen (following image):

enter image description here

It's noteworthy that I've used bootstrap. Can it be the reason of this? If not, what's the problem?

Thanks

4
mapboxmarkermapbox-gl-js

4 Answers

6
votes

I found the solution and share it here with others who will encounter this problem. The problem caused because of using a not-most-recent version of the library. After upgrading to the latest release, I could get rid of that problem.

Note that these kinds of problems sometimes occur, when you use npm. Make sure that the library is downloaded completely and It's the latest release.

Latest releases of MapBox can be found at here.

4
votes
import 'mapbox-gl/dist/mapbox-gl.css';

Adding import css works for me.

3
votes

had similar issue, the marker seemed to change position on zoom in/out, fixed it by setting offset, thought to share if it can 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);

0
votes

(Using mapbox 1.13.0)

I had a similar issue where the popups weren't displaying and would change position based on zoom.

Mapbox officially states that you need to include the css file to have markers and popups work as expected. https://docs.mapbox.com/mapbox-gl-js/guides/install/

HOWEVER, you can also copy that css directly into a component and use that as an element. For example:

export default function MarkerMapTest(props) {
const mapContainer = React.useRef(null)
const map = React.useRef(null)
const elemRef = React.useRef(null)

React.useEffect(() => {
    map.current = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/dark-v10",
        center: [151.242, -33.9132],
        zoom: 14,
    })

    const marker = new mapboxgl.Marker({
        element: elemRef.current,
    })
        .setLngLat([151.242, -33.9132])
        .addTo(map.current)
}, [])

return (
    <div
        style={{ width: 600, height: 600, backgroundColor: "gray" }}
        ref={mapContainer}
    >
        <div
            style={{
                width: 30,
                height: 30,
                borderRadius: 15,
                backgroundColor: "red",
                position: "absolute", // !
                top: 0, // !
                left: 0, // !
            }}
            ref={elemRef}
        />
    </div>