CODEWITHSUNDEEP
javascriptcanvashtml5-canvasmapsmapbox
Marty Sam
Marty Sam

Reputation: 11

How can I convert lat long coordinates to point coordinates on the map layer in Mapbox?

For a project I need to convert latitude and longitude coordinates to the map layer (map html canvas) point coordinates (in x and y). I have gone through almost the whole of Mapbox's documentation, but I can't seem to find it. Does anybody know how to do it? (Javascript)

This:

let point;
coordinates = [20,50]
point = convert(coordinates); // => point = (x, y);

Upvotes: 0

Views: 1885

Answers (2)

Vladimir Arkhangelskii
Vladimir Arkhangelskii

Reputation: 120

You can use mapboxgl.Map method called "project". It returns mapboxgl.Point by LngLatLike coordinates.
TypeScript:

const coordinates: LngLatLike = [37, 55];
const point = map.project(coordinates); // return Point object

// output: {
//   x: 713.802690844605
//   y: 390.2335262644118
// }

Upvotes: 1

ramilabbaszade
ramilabbaszade

Reputation: 72

Here is an example code from the official website. You have to register from the official website. And then you should get an access token for using Mapbox in your project. So it is quite simple.

You can watch this video to understand visually how to do it.

<script>
  mapboxgl.accessToken = '<your access token here>';
  var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [12.550343, 55.665957],
  zoom: 8
});
 
var marker = new mapboxgl.Marker()
.setLngLat([12.550343, 55.665957])
.addTo(map);
</script>

Here you see above, in the "center" attribute you can define your own lat(firstly) and lng(secondly)

Upvotes: 0

Related Questions