MapBox markers Move on zooming

Question

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:

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):

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

Thanks

score 22 · Answer 1 · edited Jun 26 '21 at 00:27

22

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

Adding import css works for me.

edited Jun 26 '21 at 00:27

Mikołaj Głodziak

4,775
7
28

answered Jun 24 '21 at 03:40

Fernando Casaliba Perlangeli

221
2
3

score 9 · Accepted Answer · edited Nov 10 '17 at 06:36

9

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.

edited Nov 10 '17 at 06:36

sudo

548
1
4
16

answered Nov 06 '17 at 14:59

Mahdi

664
3
15
35

I got tripped up in my environment because my imported mapbox css didn't match mapbox-gl version in package.json. So check your head. something like this – heratyian Mar 31 '21 at 04:18
Thanks for this! The code base I'm working on was using 0.46.0 which was released in 2018. – Paul J Jul 19 '21 at 21:01
My mistake was confusing the react-mapbox-gl version with the mapbox-gl version. You need to use the mapbox-gl version number – Throsby Apr 20 '22 at 20:09

score 3 · Answer 3 · answered Aug 23 '19 at 12:39

3

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);

answered Aug 23 '19 at 12:39

smkhan

133
7

To Use Your Solutio, I Had To Update My Mapbox Just Like How It's Explained In The Accepted Answer. Then I Used Your Code. Your Solution Saved Me, Thanks <3 – Farhad Nov 27 '20 at 05:21

score 0 · Answer 4 · answered Sep 06 '21 at 00:34

(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>

Jonathan · Answer 5 · 2022-02-10T09:04:57.527

In my case the svg I used had some space around the real content. That way it seemed for me that the marker was moving. A simple fix was to remove the space around the content (e.g. with the "Resize page to drawing or selection" option of inkscape: https://graphicdesign.stackexchange.com/a/21638)

Also it is important to set display: block on the svg-marker. See: https://stackoverflow.com/a/39716426/11603006

score 0 · Answer 6 · answered Mar 23 '23 at 11:36

0

This is because the styling is not imported in your code. Just add this line in your head tag in index.html

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />

answered Mar 23 '23 at 11:36

Nirav Ghodadra

86
3

MapBox markers Move on zooming

6 Answers6