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

{% load static %}
<div tabindex="1" id="map" class="LP-Map map" style="height: 300px"></div>
    <div id="info" class="map-popup LP-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([{{config.map_center.longitude|safe}}, {{config.map_center.latitude|safe}}]),
                zoom: 9
            })
            });

            var vectorSource = new ol.source.Vector({
                features: [
                    {% for point in config.all_points %}
                        new ol.Feature({
                            geometry: new ol.geom.Point(
                                ol.proj.fromLonLat([{{point.longitude|safe}},{{point.latitude|safe}}])
                            ),
                            url: '{{point.get_absolute_url}}',
                            name: '  {{point.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.02,
                            src: '{% static "icons/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>