MapLibre GL JS
API Reference
On This Page
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.
-
Initialize map and load the style (see get started tutorial)
-
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() { ... });
-
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] ] });
-
Add the image layer
map.addLayer({ "id": "overlay", "source": "aerial-source", "type": "raster", "paint": { "raster-opacity": 0.85 } });