Search code examples
mapboxmapbox-gl-jscoordinate-systemsmercator

Mapbox GL JS ImageSource wrong coordinates


I'm struggling to position an image correctly onto my map. I'm using one of the following URLs for my (live) image:

These are the associated WMS capabilities: https://maps.dwd.de/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities

I tried adding an image source according to this example. Using these coordinates:

[2.0714827302884133, 55.07980923136505],
[15.72075796095801, 55.07980923136505],
[15.72075796095801, 47.14423415016973],
[2.0714827302884133, 47.14423415016973]

The problem is that the image is not aligned 100 % correctly, but slightly shifted/stretched. I read something about Mapbox using the Mercator projection and not being able to handle others? That's why there are three different URLs above, but all of them fail. Next I tried to convert my coordinates like this:

var westLongitude = 2.0714827302884133;
var eastLongitude = 15.72075796095801;  
var southLatitude = 47.14423415016973;
var northLatitude = 55.07980923136505;  

var topLeft = { lng: westLongitude, lat: northLatitude};
var mTopLeft = mapboxgl.MercatorCoordinate.fromLngLat(topLeft, 0).toLngLat();

var topRight = { lng: eastLongitude, lat: northLatitude};
var mTopRight = mapboxgl.MercatorCoordinate.fromLngLat(topRight, 0).toLngLat();

var bottomRight = { lng: eastLongitude, lat: southLatitude};
var mBottomRight = mapboxgl.MercatorCoordinate.fromLngLat(bottomRight, 0).toLngLat();

var bottomLeft = { lng: westLongitude, lat: southLatitude};
var mBottomLeft = mapboxgl.MercatorCoordinate.fromLngLat(bottomLeft, 0).toLngLat();

var mercatorCoordinates = [[mTopLeft.lng, mTopLeft.lat], [mTopRight.lng, mTopRight.lat], [mBottomRight.lng, mBottomRight.lat], [mBottomLeft.lng, mBottomLeft.lat]];

However this also didn't align the image correctly. I think, I'm using wrong coordinates. Any idea how to do it right?

Thank you so much.

Here's code to play around with (please compare the location of the radar blind spot (grey) with the image below to see the offset): js fiddle

Here's where the radar blind spot (pink) has to be: enter image description here


Solution

  • Using the following coordinates/projection seems to work:

    CRS=EPSG:3857&BBOX=614360.8293587392,5933210.01991552,1713821.866597408,7423590.537061271
    

    Here's another js fiddle.