Mapbox GL JS ImageSource wrong coordinates

0
votes

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

1
mapboxmapbox-gl-jscoordinate-systemsmercator
Can you create a jsfiddle or codebin showing the issue with images stretching/shifting? – Steve Bennett
Like this @SteveBennett? I added a js fiddle and an image. Thanks – Dr. Cashberg
By the way, using Mapbox's macOS API I have the same misalignment. – Dr. Cashberg
Hmm, I don't know. I don't see anything obviously wrong, when using the CRS:84 version. An issue with projections, but I don't know what. Surprised the server wouldn't accept EPSG:4326. Asking on gis.stackexchange.com might give better results, as your code seems to be ok. – Steve Bennett
Thanks! I will ask there, too. – Dr. Cashberg

1 Answers

1
votes

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.