Adding map markers to Open Layers 6

Question

My question is simple: How do you add a marker at a specific longitude and latitude?

Working through the open layers example page I have created a new map with a marker.

I added the marker using the new ol.Feature but it seems no matter what I set the coordinates to the marker position will not change .

Please can anyone offer advice on why the map marker is not showing in the correct position?

 const iconFeature = new ol.Feature({ geometry: new ol.geom.Point([53, -2]), //This marker will not move. name: 'Somewhere', }); const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), new ol.layer.Vector({ source: new ol.source.Vector({ features: [iconFeature] }), style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/latest/examples/data/icon.png' }) }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([53,-2]), zoom: 6 }) });

 .map { width: 100%; height: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script> <div id="map" class="map"> <div id="popup"></div> </div>

Answer 1

You can use ol.proj.fromLonLat to transform EPSG:4326 to EPSG:3857 , for both features and centering the map. In general you have to do that as the default projection is EPSG:3857 .

for icons:

const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])),
  name: 'Somewhere near Nottingham',
});

to center the view/map at the same place:

view: new ol.View({
  center: ol.proj.fromLonLat([-2, 53]),
  zoom: 6
})

working code snippet:

 const iconFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.fromLonLat([-2, 53])), name: 'Somewhere near Nottingham', }); const map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), new ol.layer.Vector({ source: new ol.source.Vector({ features: [iconFeature] }), style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', src: 'https://openlayers.org/en/latest/examples/data/icon.png' }) }) }) ], view: new ol.View({ center: ol.proj.fromLonLat([-2, 53]), zoom: 6 }) });

 html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } .map { width: 100%; height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://openlayers.org/en/v6.5.0/css/ol.css" type="text/css"> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script> <div id="map" class="map"> <div id="popup"></div> </div>

Answer 2

By default, a view as the 3857 projection, whose unit is meters.

The coordinates you have entered are therefore 53 meters away from [0;0], in the sea not too far from Nigeria.

You can either enter a coordinate in 3857,like

geometry: new ol.geom.Point([-8185391,5695875]),

or you would have to project the coordinates to 3857, as indicated in the comments, using ol.proj.fromLonLat([53,-2])

Remember that coordinates are expressed as longitude first, then latitude, as explained in the doc .