CODEWITHSUNDEEP
mapboxmarkermapbox-gl-js
Mahdi
Mahdi

Reputation: 724

MapBox markers Move on zooming

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

Upvotes: 23

Views: 11151

Answers (7)

Casey Ntsako
Casey Ntsako

Reputation: 1

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>

Upvotes: 0

Nirav Ghodadra
Nirav Ghodadra

Reputation: 352

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

Upvotes: 0

Jonathan
Jonathan

Reputation: 904

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

Upvotes: 0

Joel
Joel

Reputation: 68

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

Upvotes: 0

Fernando Casaliba Perlangeli
Fernando Casaliba Perlangeli

Reputation: 341

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

Adding import css works for me.

Upvotes: 34

smkhan
smkhan

Reputation: 153

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

Upvotes: 5

Mahdi
Mahdi

Reputation: 724

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.

Upvotes: 9

Related Questions