Show Raster Image on the Map with OpenLayers
This OpenLayers 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
-
Copy the following code, paste it into your favorite text editor, and save it as a
.html
file.
Check out the step-by-step tutorial How to use OpenLayers
-
Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.
-
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 thestarting zoom
) to match your users’ needs. Additionally, you can change the map’s look (by updating thesource URL
); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.
-
Create a static image layer using the ImageStatic source. Set the image imageExtent Lng/Lat bounds. Here you can get the example image aerial_wgs84.png
const layer = new ol.layer.Image({ source: new ol.source.ImageStatic({ url: './aerial_wgs84.png', projection: 'EPSG:4326', imageExtent: [4.639663696289062, 50.89935199434383, 4.642066955566406, 50.900867668253724], }), }) map.addLayer(layer);
-
Import the new modules needed to add the new functionality.
import Map from 'ol/Map.js'; import View from 'ol/View.js'; import TileLayer from 'ol/layer/Tile.js'; import ImageLayer from 'ol/layer/Image.js'; import TileJSON from 'ol/source/TileJSON.js'; import Static from 'ol/source/ImageStatic.js'; import Attribution from 'ol/control/Attribution.js'; import { defaults as defaultControls } from 'ol/control/defaults.js'; import { fromLonLat } from 'ol/proj.js';
-
Create a static image layer using the ImageStatic source. Set the image imageExtent Lng/Lat bounds. Here you can get the example image aerial_wgs84.png
const layer = new Image({ source: new Static({ url: './aerial_wgs84.png', projection: 'EPSG:4326', imageExtent: [4.639663696289062, 50.89935199434383, 4.642066955566406, 50.900867668253724], }), }) map.addLayer(layer);