Display a Marker on the map using OpenLayers
This tutorial shows how to add the default marker to the map using OpenLayers.
-
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.
-
To create a new marker using a Vector layer. The layer’s data source will be a feature set. Create a feature of the type point at the Lng/Lat coordinates of the marker. Create a Style to load the marker image and finally add it to the current map using .addLayer() function. Download the sample marker image
const layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [ new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([12.550343, 55.665957])), }) ] }), style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 1], crossOrigin: 'anonymous', src: 'marker-icon.png', }) }) }); map.addLayer(layer);
-
Import the new modules needed to add the new functionality.
import VectorLayer from 'ol/layer/Vector.js'; import VectorSource from 'ol/source/Vector.js'; import Point from 'ol/geom/Point.js'; import Style from 'ol/style/Style.js'; import Icon from 'ol/style/Icon.js'; import Feature from 'ol/Feature.js';
-
To create a new marker using a Vector layer. The layer’s data source will be a feature set. Create a feature of the type point at the Lng/Lat coordinates of the marker. Create a Style to load the marker image and finally add it to the current map using .addLayer() function. Download the sample marker image
const layer = new VectorLayer({ source: new VectorSource({ features: [ new Feature({ geometry: new Point(fromLonLat([12.550343, 55.665957])), }) ] }), style: new Style({ image: new Icon({ anchor: [0.5, 1], crossOrigin: 'anonymous', src: 'marker-icon.png', }) }) }); map.addLayer(layer);