mapbox - add image over specific location point

Question

Im working now in mapbox plugin to draw map, the map is appear correct , now i want to add image on this map with specific location point.

example : in certain area I want to add image over this area

this is the real image:

but when i put the imge i think the image is rotated.

Thank you very much for your help.

Note : I'm working in angular 11

I had the same issue, raster layers are quite limited. Just in advance if you have multiple floors and altitude you won’t be able to make it as the raster can only be at ground level. — jscastro, Jan 11 '21 at 08:20
sorry it's not work correctly , i change the locations but the image "overturned" — Osama khodroj, Jan 11 '21 at 08:29
The best way I found to make it run is to rotate the image in a separate app, and then create the raster layer based on north coordinates — jscastro, Jan 11 '21 at 09:45

score 0 · Answer 1 · answered Jan 11 '21 at 12:35

Can you share how you add the image to your map? If you add it as icon, it is possible to rotate it like in the below example, using the icon-rotate property. In below example I rotate the cat image by 90 degrees, by settin 'icon-rotate': 90 :

( From https://docs.mapbox.com/mapbox-gl-js/example/add-image/ )

(Please replace "YOUR ACCESS TOKEN" in below code)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add an icon to the map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
 
<script>
    mapboxgl.accessToken = 'YOUR ACCESS TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11'
});
 
map.on('load', function () {
map.loadImage(
'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
function (error, image) {
if (error) throw error;
map.addImage('cat', image);
map.addSource('point', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}
]
}
});
map.addLayer({
'id': 'points',
'type': 'symbol',
'source': 'point',
'layout': {
'icon-image': 'cat',
'icon-size': 0.25,
 'icon-rotate': 90
}
});
}
);
});
</script>
 
</body>
</html>

mapbox - add image over specific location point

1 Answers1