8

I want to show OpenStreetMap in my web site using OpenLayers library. I want to add a marker but the marker does not show up on the map.

I had searched on Google, I had found one code as below my code. There are much examples to add marker but it dominates for Google maps. I want to use open source map.

 <!doctype html>
 <html lang="en">
   <head>
     <link rel="stylesheet" 
 href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css">
     <style>
       .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
    <title>OpenLayers example</title>
  </head>
  <body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">

///SHOW MAP
      var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        view: new ol.View({
          center: ol.proj.fromLonLat([106.8478695, -6.1568562]),
          zoom: 17
        })
      });
///ADD MARKER
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);

    var size = new OpenLayers.Size(21,25);
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
    var icon = new OpenLayers.Icon('marker.png', size, offset);
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon));
    markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695,-6.1568562),icon.clone()));

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

code snippet:

///SHOW MAP
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([106.8478695, -6.1568562]),
    zoom: 17
  })
});
///ADD MARKER
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);

var size = new OpenLayers.Size(21, 25);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('marker.png', size, offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon));
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(106.8478695, -6.1568562), icon.clone()));
.map {
  height: 400px;
  width: 100%;
}
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<title>OpenLayers example</title>
<h2>My Map</h2>
<div id="map" class="map"></div>

I expect the marker show up on the map, but I don't see the marker.

2 Answers 2

12

You are using OpenLayers 2 code to add a marker to an OpenLayers 5 map.

The equivalent code for OpenLayers 3/4/5 is

    var markers = new ol.layer.Vector({
      source: new ol.source.Vector(),
      style: new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 1],
          src: 'marker.png'
        })
      })
    });
    map.addLayer(markers);
    
    var marker = new ol.Feature(new ol.geom.Point(ol.proj.fromLonLat([106.8478695, -6.1568562])));
    markers.getSource().addFeature(marker);
0
2

You haven't mentioned the version of OpenLayers you are using. So giving an example that works on OpenLayers v3

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([39.8262, 21.4225]),
    zoom: 15
  })
});

var markerGeometry = new ol.geom.Point(ol.proj.transform([39.8262, 21.4225], 'EPSG:4326','EPSG:4326'));
var markerFeature = new ol.Feature({
    geometry: markerGeometry
});

var markerStyle = new ol.style.Icon(({
    src: 'https://github.com/openlayers/openlayers/blob/v3.20.1/examples/resources/logo-70x70.png'
}));

markerFeature.setStyle(new ol.style.Style({
    image: markerStyle,
}));

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

var markerLayer = new ol.layer.Vector({
    title: "RoutePoint",
    visible: true,
    source: vectorSource
});

map.addLayer(markerLayer);
.map {
  height: 400px;
  width: 100%;
}
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/ css/ol.css" rel="stylesheet" />

<title>OpenLayers example</title>
<h2>Sample Map</h2>
<div id="map" class="map"></div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.