lostplaces-backend/lostplaces/lostplaces_app/templates/partials/osm_map.html

{% load static %}

<div id="map" class="map"></div>
    <div id="info" class="map-popup"></div>
    <script src="{% static 'ol.js' %}"></script>
    
    <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([{{average_latlon|last}}, {{average_latlon|first}}]),
            zoom: 6
        })
        });

          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: '/{{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>