CODEWITHSUNDEEP
mapbox-gl
seeSharpGeek
seeSharpGeek

Reputation: 65

Mapbox places markers on wrong coordinates

[![][1]]2

I've pasted lat/long coords on the mapbox playground website to place a marker on the map, the marker dropped on the correct position. However, when i take the same coordinates and try to place a marker on my web app, the marker appears a bit off. Here's my code below, I've also attached images for reference, thanks!

var marker = new mapboxgl.Marker({color:"#fff"}).setLngLat([-3.8762,51.6692]).addTo(map);

Upvotes: 3

Views: 1967

Answers (1)

Ken Nguyen
Ken Nguyen

Reputation: 158

I recently met this error where my markers locations are correct using demo-mapbox-gl code, but incorrect using my own code.

The difference I have is:

  • On my local, I did "npm install mapbox-gl-js", and did not follow mapbox's direction of importing the lib using script-tag and style-tag.

I added

<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />

At the "head" part of the HTML of my project, and the markers were rendered at the correct location.

This is due to the marker location are calculated and rendered with CSS, doing npm-install doesn't seem to import the full css styling sheet needed to correctly render Mapbox markers.

Upvotes: 2

Related Questions