Show Raster Image on the Map
This tutorial shows how to add a raster image overlay to the map.
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file. -
Install the npm package.
-
Include the CSS file.
If you have a bundler that can handle CSS, you can
import
the CSS or include it with a<link>
in the head of the document via the CDN -
Include the following code in your JavaScript file (Example: app.js).
-
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
The next is up to you. You can start the map in a different place by modifying the
starting position
andstarting zoom
, and you can change the look of the map to any of our styles, or yours, by updating thestyle
. See what’s available here. -
Add event handler for map load event. You will add code to create an image source and image layer in this handler.
map.on('load', function() { });
-
Create image source. Here you can get the example image aerial_wgs84.png
map.on('load', function() { 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 } });