Show Raster Image on the Map

This tutorial shows how to add a raster image overlay to the map.

View complete source code on GitHub

You will learn the following:

• Obtain the MapTiler api key.
• Create image source, image layer and draw the image on the map.

1. Initialize map and load the style (see get started tutorial)

2. Add event handler for map load event. You will add code to create image source and image layer in this handler.

        map.on('load', function() {
            ...
        });
   

3. Create image source

    map.addSource("aerial-source", {
        "type": "image",
        "url": "img/aerial_wgs84.png",
        "coordinates": [
            [4.639663696289062, 50.900867668253724],
            [4.642066955566406, 50.900867668253724],
            [4.642066955566406, 50.89935199434383],
            [4.639663696289062, 50.89935199434383]
        ]
    });
   

4. Add the image layer

    map.addLayer({
        "id": "overlay",
        "source": "aerial-source",
        "type": "raster",
        "paint": {
            "raster-opacity": 0.85
        }
    });