Display a raster image

--- title: "Show Raster Image on the Map using Leaflet | Leaflet" description: "Add raster image overlays to Leaflet JS maps." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Show Raster Image on the Map using Leaflet This Leaflet JS tutorial demonstrates how to add a raster image overlay to a map. You will learn how to load and display a single image on specific map areas. 1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file. ```html Display a raster image

``` 1. Install the npm package. ```bash npm install --save leaflet ``` 2. Include the CSS file. If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN ```js import "leaflet/dist/leaflet.css"; ``` ```html ``` 3. Include the following code in your JavaScript file (Example: main.js). ```js import L from 'leaflet'; const key = 'YOUR_MAPTILER_API_KEY_HERE'; const map = L.map('map').setView([50.9001362, 4.64086758], 18); //starting position L.tileLayer(`https://api.maptiler.com/maps/streets-v4/{z}/{x}/{y}.png?key=${key}`,{ //style URL tileSize: 512, zoomOffset: -1, minZoom: 1, attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", crossOrigin: true }).addTo(map); ``` 1. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it. 2. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application. 1. Create an image layer using the L.imageOverlay function. Set the image Lat/Lng bounds. Here you can get the example image [aerial\_wgs84.png](img/aerial_wgs84.webp) ```js L.imageOverlay("./aerial_wgs84.png", [ [50.900867668253724, 4.639663696289062], [50.89935199434383, 4.642066955566406], ], { opacity: 0.85 }).addTo(map); ``` ### Complete source code ```html Display a map

```