CODEWITHSUNDEEP
javascriptcoordinatesmapboxmapbox-gl-js
Dominik
Dominik

Reputation: 1

Add Image Overlay in Mapbox without knowing coordinates

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
    }
  });
});

Upvotes: 0

Views: 1066

Answers (1)

Mikail Yetkin
Mikail Yetkin

Reputation: 41

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],
    ]
});

Upvotes: 1

Related Questions