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?
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
CRS
WMS version 1.1.1 usesSRS