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>

geocodezip · Accepted Answer · 2022-08-25T02:55:10.063

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://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.14.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v6.14.1/build/ol.js"></script>

<div id="map" class="map">
  <div id="popup"></div>
</div>

JGH · Answer 2 · 2020-01-14T13:14:06.530

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.

edited Jan 14 '20 at 13:14

answered Jan 13 '20 at 18:37

JGH

15,928
4
31
48

You offer some interesting insights. It baffled me that longitude was first as this is not IMO standard however your suggestion doesn't solve my issue because it does not matter what coordinate I enter. The marker never moves. Also using `ol.proj.fromLonLat` causes script error. Please can you provide an example as I cannot find one. – DreamTeK Jan 14 '20 at 08:35
@DreamTeK it is the standard. Longitude = position East/West = X, Latitude = position North/South = Y. Most coordinates on a plan are expressed as XY, so Longitude,Latitude. The name of the function is even explicit about it. // There is an example in the page I have linked – JGH Jan 14 '20 at 13:15
I agree X/Y is normal but your statement is wrong. East/West is Latitude (As in Laterally) and North/South is Longitude? And also the International Maritime Organisation have use latitude first since 1948. Google also uses latitude first conforming to EPSG:4326. Hence my confusion. I finally found the explanation why open layers use the non conforming order here: https://openlayers.org/en/latest/doc/faq.html#why-is-the-order-of-a-coordinate-lon-lat-and-not-lat-lon- They even state their own developers get confused. All that said you did help me spot the inversion so thanks and +1 – DreamTeK Jan 14 '20 at 13:44
@DreamTeK it would be wise to google your claims first. For instance, from [wikipedia](https://en.wikipedia.org/wiki/Longitude): _Longitude is a geographic coordinate that specifies the east–west position of a point on the Earth's surface_ – JGH Jan 14 '20 at 13:50
I did Google and offer citation. A longitude line is vertical but will measure obviously position East/West I will be surprised if you can find a standard that uses lon/lat in that order. Apologies if I misunderstood your statement. – DreamTeK Jan 14 '20 at 13:56

Adding map markers to Open Layers 6

2 Answers2

Linked