Menu
I want to show map to my website use OpenStreetMap using library open layer. When I want to add marker, 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 example to add marker but its dominate for google map, I want to use opensource 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 dont see the marker
460
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);
answered Oct 18 '22 09:10
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
