How do I add a simple image overlay in Mapbox Javascript?

Question

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.com/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 complexity as they have in their example. Thank you for any help.

EDIT : This is the code - I tried to change it after a comment here but I still am doing something wrong.

<link href='https://api.mapbox.com/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>

Answer 1

My 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.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/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>

Answer 2

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.

How do I add a simple image overlay in Mapbox Javascript?

Question

2 answers

solution1
4 ACCPTED 2018-06-16 04:46:42

solution2
1 2018-06-15 14:58:59

How do I add a simple image overlay in Mapbox Javascript?

Question

2 answers

solution1 4 ACCPTED 2018-06-16 04:46:42

solution2 1 2018-06-15 14:58:59

solution1
4 ACCPTED 2018-06-16 04:46:42

solution2
1 2018-06-15 14:58:59