MapBox markers Move on zooming

R

7

21

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

Rules answered 1/11, 2017 at 3:48 Comment(0)

R

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.

Rules answered 6/11, 2017 at 14:59 Comment(3)

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 <script src='api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></…> <link href='api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' /> – Taddeo 31/3, 2021 at 4:18

Thanks for this! The code base I'm working on was using 0.46.0 which was released in 2018. – Snowdrop 19/7, 2021 at 21:1

My mistake was confusing the react-mapbox-gl version with the mapbox-gl version. You need to use the mapbox-gl version number – Marysa 20/4, 2022 at 20:9

S

32

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

Adding import css works for me.

Scullery answered 24/6, 2021 at 3:40 Comment(0)

R

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.

Rules answered 6/11, 2017 at 14:59 Comment(3)

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 <script src='api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></…> <link href='api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' /> – Taddeo 31/3, 2021 at 4:18

Thanks for this! The code base I'm working on was using 0.46.0 which was released in 2018. – Snowdrop 19/7, 2021 at 21:1

My mistake was confusing the react-mapbox-gl version with the mapbox-gl version. You need to use the mapbox-gl version number – Marysa 20/4, 2022 at 20:9

C

5

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

Caputo answered 23/8, 2019 at 12:39 Comment(2)

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 – Irresoluble 27/11, 2020 at 5:21

This solution worked for me. Could you (or anyone) explain how it works? – Outfoot 20/7 at 21:56

G

0

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

Gall answered 6/9, 2021 at 0:34 Comment(0)

G

0

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://mcmap.net/q/659329/-why-is-the-containing-div-for-svg-taking-more-space-duplicate

Glasswort answered 10/2, 2022 at 7:53 Comment(0)

W

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' />

Weigel answered 23/3, 2023 at 11:36 Comment(0)

F

0

enter code hereIf Anyone runs in this error guys please try adding the cdn at the top thats how i fixed mine and it works like a charm

    <link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>

Foucquet answered 5/5 at 6:46 Comment(0)

Recommended topics

Hot tags