I have UTM
coordinates, EPSG: 25833
.
Looking at the Mapbox documentation it says
Mapbox supports the popular Web Mercator projection, and does not support any other projections. Web Mercator is a nearly conformal projection that is adopted by the vast majority of web maps and its use allows you to combine Mapbox’s maps with other layers in the same projection.
Commonly this projection is referred to as EPSG:900913 or EPSG:3857. See epsg.io for more information and alternative encodings.
So, I probably have to transform the UTM
Coordinates into Web Mercator
.
I use the proj4js library to do that.
import proj4 from 'proj4'; const epsg25833 = require('epsg-index/s/25833.json'); const epsg3857 = require('epsg-index/s/3857.json'); const mapboxCoords = proj4(epsg25833.proj4, epsg3857.proj4, [point.utm_point.coordinates[0], point.utm_point.coordinates[1]]);
If I try to display mapboxCoords
on the Mapbox Map
, nothing is displayed.
However, if I transform the coordinates into EPSG: 4326
, everything is displayed. However, its possible that the coordinates are slightly off.
import proj4 from 'proj4'; const epsg25833 = require('epsg-index/s/25833.json'); const epsg4326 = require('epsg-index/s/4326.json'); const mapboxCoords = proj4(epsg25833.proj4, epsg4326.proj4, [point.utm_point.coordinates[0], point.utm_point.coordinates[1]]);
What is the correct projection for using Mapbox
. The documentation says its EPSG:3857
, however, when I transform my coordinates into that EPSG
nothing is displayed. Using EPSG: 4326
displays at least something…
Advertisement
Answer
With Mapbox’s mapping libraries like Mapbox GL JS and Mapbox GL Native, the maps are visually rendered in the Web Mercator Projection (EPSG:3857), however anytime you want to pass data to show on these maps, either as a Marker or GeoJSON layer then that data must be passed as WGS84 LL, ie. EPSG:4326.