The following link in the Mapbox Javascript API describes how to add an image overlay on a map, and it is very simple :
/
This works! However, I am trying to add an image overlay on a custom map. I am wanting to do this without creating tiles or anything of the like.
I can't find a way to overlay an image on a satellite map (that's my goal, just a weather radar GIF on a satellite map), but I can't seem to get this to work on any other map besides the one in the link above! How do I do this? I don't want the map they are using in their example. I just would like to overlay this on any custom map without needless plexity as they have in their example. Thank you for any help.
EDIT : This is the code - I tried to change it after a ment here but I still am doing something wrong.
<link href='.44.2/mapbox-gl.css'
rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 100%; height: 100%;'></div>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X-
n4Yk2XyxYqoPbP_IMnQ';
var map = new mapboxgl.Map({
container: 'map',
zoom: 4,
style: 'mapbox://styles/mapbox/satellite-v9',
center: [-80.425, 37.437]
});
map.addSource("myImageSource", {"type": "image",
"url": "radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]})
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
</script>
</body>
</html>
The following link in the Mapbox Javascript API describes how to add an image overlay on a map, and it is very simple :
https://www.mapbox./mapbox-gl-js/example/image-on-a-map/
This works! However, I am trying to add an image overlay on a custom map. I am wanting to do this without creating tiles or anything of the like.
I can't find a way to overlay an image on a satellite map (that's my goal, just a weather radar GIF on a satellite map), but I can't seem to get this to work on any other map besides the one in the link above! How do I do this? I don't want the map they are using in their example. I just would like to overlay this on any custom map without needless plexity as they have in their example. Thank you for any help.
EDIT : This is the code - I tried to change it after a ment here but I still am doing something wrong.
<link href='https://api.mapbox./mapbox-gl-js/v0.44.2/mapbox-gl.css'
rel='stylesheet' />
</head>
<body>
<div id='map' style='width: 100%; height: 100%;'></div>
<script>
mapboxgl.accessToken =
'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X-
n4Yk2XyxYqoPbP_IMnQ';
var map = new mapboxgl.Map({
container: 'map',
zoom: 4,
style: 'mapbox://styles/mapbox/satellite-v9',
center: [-80.425, 37.437]
});
map.addSource("myImageSource", {"type": "image",
"url": "radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]})
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
</script>
</body>
</html>
- Can you post the code you have tried? – leelum1 Commented Jun 15, 2018 at 14:00
- I have edited it. I don't know what to do at this point. – David Commented Jun 15, 2018 at 21:03
2 Answers
Reset to default 11My edits to the helpfull existing answer were not accepted, so posting this in an own answer.
You have to wait until the style is done loading before adding the image source and layer. The following code is working:
Please note:
If you are storing the HTML and the GIF file locally, maybe the GIF is not displayed because of some browser restrictions. You may try the Firefox browser which is less strict than Chrome in this regard.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add an image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox./mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox./mapbox-gl-js/v0.45.0/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 = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2lzNWl5N3RpMDNhYTNvcDFvNGVrZmZheCJ9.2X-n4Yk2XyxYqoPbP_IMnQ';
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 5.99,
minZoom: 4,
zoom: 5,
center: [-75.789, 41.874],
style: 'mapbox://styles/mapbox/satellite-v9'
});
map.on('load', function() {
map.addSource("myImageSource", {
"type": "image",
"url": "radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});
});
</script>
</body>
</html>
They are adding both a custom layer and the basemap in the same JSON. However you can add your image separatly.
First add a source with your image:
mapBoxMap.addSource("myImageSource", {"type": "image",
"url": "/mapbox-gl-js/assets/radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]})
Then add a layer displaying this source:
mapBoxMap.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
In Mapbox GL, basemaps and custom layers are technically the same thing.