Add features to the map in OpenLayers 5

Question

I have a following code in HTML

<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/css/ol.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet"> 
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
    view: new ol.View({center: ol.proj.transform([16.9278, 52.4044], 'EPSG:4326', 'EPSG:3857'), zoom:12}),
    layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
    })],
    target:'map'
});

var marker = new ol.Feature({
    geometry: new ol.geometry.point(ol.proj.transform([16.9071388, 52.4901917], 'EPSG:4326', 'EPSG:3857')),
});

var markers = new ol.source.Vector({
    features: [marker]
});

var markerVectorLayer = new ol.layer.Vector({
    source: markers,
});
map.addLayer(markerVectorLayer);

</script>
</body>
</html>

It's not displaying any points, only the map. In the console, I get the error "ol.geom.point is not a constructor". This code is mostly based on this tutorial https://medium.com/attentive-ai/working-with-openlayers-4-part-2-using-markers-or-points-on-the-map-f8e9b5cae098

Thomas Gratier · Answer 1 · 2018-08-24T15:14:14.470

4

Change

var marker = new ol.Feature({
    geometry: new ol.geometry.point(ol.proj.transform([16.9071388, 52.4901917], 'EPSG:4326', 'EPSG:3857')),
});

to

var marker = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([16.9071388, 52.4901917], 'EPSG:4326', 'EPSG:3857')),
});

and change the zoom from 12 to 11 in the view (otherwise, the point is here but outside of the initial view and you need to zoom out)

PS: Not sure where you got ol.geometry.point as it's never mentioned in the tutorial you referenced

edited Aug 24 '18 at 15:14

answered Aug 24 '18 at 12:11

Thomas Gratier

2,311
1
14
15

I get "ol.geom.point is not a constructor" error in the console, then. – Piotr Koller Aug 25 '18 at 08:51
It's my answer... See this sample https://bl.ocks.org/ThomasG77/5e47a21c651be974cb688e8a8f967cca that show there are no issue in my answer. You may use a different version of OpenLayers (e.g 4.x) or a bundler? – Thomas Gratier Aug 27 '18 at 01:12

score 1 · Answer 2 · edited Nov 24 '18 at 00:04

1

Change this

 ol.geometry.point

to this

ol.geometry.Point

and it will work.

edited Nov 24 '18 at 00:04

Wayne Phipps

2,019
6
26
31

answered Nov 23 '18 at 13:51

ByteCode Thread

29
2

score 0 · Answer 3 · answered Aug 25 '18 at 12:37

0

OK, I know why it wasn't working. You have to type "ol.geom.Point" instead of "ol.geom.point" (uppercase).

answered Aug 25 '18 at 12:37

Piotr Koller

599
3
8
17

Add features to the map in OpenLayers 5

3 Answers3