I would like to overlay simple PNG over the center of my map. I don't know how to get the coordinates for the bounding box. I tried to get them somehow correct with https://boundingbox.klokantech.com/ but the image is always flipped (?). Is there a way to place the image with its correct aspect ratio in the center of my map? Or is there any way to get the correct coordinates somehow? I only know the location and the height / width in pixels of the image.
const coords = "10.993519925619722,48.13225506915424,10.987678074385087,48.12892887698615"
const splitCoords = coords.split(',');
const one = splitCoords[0] * 1;
const two = splitCoords[1] * 1;
const three = splitCoords[2] * 1;
const four = splitCoords[3] * 1;
map.on('load', () => {
map.addSource('area-overlay', {
'type': 'image',
'url': 'assets/images/map-2.png',
'coordinates': [
[one, two],
[three, two],
[three, four],
[one, four],
]
});
map.addLayer({
id: 'area-layer',
'type': 'raster',
'source': 'area-overlay',
'paint': {
'raster-fade-duration': 0
}
});
});
i think your image looks flipped beacuse of the order of positions you have defined in coordinates array. according to the example here https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/ the coordinate array should be defined in clockwise order.
Your boundingbox format is like "maxX,maxY,minX,minY". If we map those values on a rectangle with clockwise order, it will look like as below.
three,two one,two
xmin,ymax------->>>---------xmax,ymax
| |
| |
| |
| |
| | 2
| |
| |
xmin,ymin-------<<<<--------xmax,ymin
three,four 3 one,four
So the right order of the coordinates should be as below.
map.addSource('area-overlay', {
'type': 'image',
'url': 'assets/images/map-2.png',
'coordinates': [
[three, two],
[one, two],
[one, four],
[three, four],
]
});