<div id="map" class="map" style="height: 300px"></div> <div id="info" class="map-popup"></div> <script type="text/javascript"> 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([{{place_map_center|last}}, {{place_map_center|first}}]), zoom: 9 }) }); var vectorSource = new ol.source.Vector({ features: [ {% for place in place_list %} new ol.Feature({ geometry: new ol.geom.Point( ol.proj.fromLonLat([{{place.longitude}},{{place.latitude}}]) ), url: '{% url 'place_detail' pk=place.pk %}', name: '{{place.name}}' }), {% endfor %} ] }); var markerVectorLayer = new ol.layer.Vector({ source: vectorSource, style: new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', scale: 0.3, src: 'http://icons.iconarchive.com/icons/paomedia/small-n-flat/128/map-marker-icon.png' }) }) }); map.addLayer(markerVectorLayer); var overlay = new ol.Overlay({ element: document.getElementById('info'), positioning: 'bottom-left' }); overlay.setMap(map); map.on(['singleclick'], function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) { window.open(feature.get('url'), '_blank'); }); }); map.on(['pointermove'], function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) { overlay.setPosition(evt.coordinate.map(element => element + 1)); overlay.getElement().innerHTML = feature.get('name'); return feature; }); overlay.getElement().style.display = feature ? '' : 'none'; document.body.style.cursor = feature ? 'pointer' : ''; }); </script>