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>

Can you post the code you have tried? – leelum1 Jun 15 '18 at 14:00 — leelum1, Jun 15 '18 at 14:00
I have edited it. I don't know what to do at this point. – David Jun 15 '18 at 21:03 — David, Jun 15 '18 at 21:03

pathmapper · Accepted Answer · 2018-06-16T07:33:28.377

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>

Wow, thank you! This was my first question on stack overflow and I wasnt sure if anyone could even help me but it was worth a try. I will now be able to look at the code and learn from it. Thank you so much for your help! — David, Jun 16 '18 at 05:19
I'm having trouble - Got this to work, but I want to add my own style that I created myself in mapbox, such as: style: 'mapbox://styles/nittyjee.duzurkuo — nittyjee, Sep 23 '19 at 07:22

score 1 · Answer 2 · answered Jun 15 '18 at 14:58

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.

It is still not working. I am not sure what is going on. Here is the code, which is not very much but it just doesn't display the image: — David, Jun 15 '18 at 20:57

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

2 Answers2

Linked