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. -
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
, and you can change the look of the map to any of our styles, or yours, by updating thestyle URL
. See what’s available here. -
Create image layer using the L.imageOverlay function. Set the image Lat/Lng bounds. Here you can get the example image aerial_wgs84.png
}).addTo(map); L.imageOverlay("img/aerial_wgs84.png", [ [50.900867668253724, 4.639663696289062], [50.89935199434383, 4.642066955566406], ], { opacity: 0.85 }).addTo(map);
Leaflet
Examples
- Get started
- Learn the basics
- Vector Tiles in Leaflet
- Display Marker
- GeoJSON Layer
- Raster Layer
- Custom Map
- Choropleth GeoJSON
- Raster tiles
- Geocoding control
- Leaflet with NPM
- Leaflet with TypeScript
- Geolocate control
- Map events
- Multi-lingual map
- Built-in basemap styles
- Points as cluster
- Marker with custom icon
Video tutorials
Other maps libraries
On this page