2020-09-29 20:21:27 +02:00
|
|
|
{% 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>
|
2020-08-21 20:38:52 +02:00
|
|
|
|
2020-08-22 09:22:20 +02:00
|
|
|
<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({
|
2020-09-12 11:42:18 +02:00
|
|
|
center: ol.proj.fromLonLat([{{config.map_center.longitude}}, {{config.map_center.latitude}}]),
|
2020-08-22 09:22:20 +02:00
|
|
|
zoom: 9
|
|
|
|
})
|
|
|
|
});
|
2020-08-20 21:37:27 +02:00
|
|
|
|
2020-08-22 09:22:20 +02:00
|
|
|
var vectorSource = new ol.source.Vector({
|
|
|
|
features: [
|
2020-09-13 20:15:49 +02:00
|
|
|
{% for point in config.all_points %}
|
2020-08-22 09:22:20 +02:00
|
|
|
new ol.Feature({
|
|
|
|
geometry: new ol.geom.Point(
|
2020-09-12 11:42:18 +02:00
|
|
|
ol.proj.fromLonLat([{{point.longitude}},{{point.latitude}}])
|
2020-08-22 09:22:20 +02:00
|
|
|
),
|
2020-09-12 11:42:18 +02:00
|
|
|
url: '{{point.get_absolute_url}}',
|
2020-09-12 11:58:45 +02:00
|
|
|
name: ' {{point.name}}'
|
2020-08-22 09:22:20 +02:00
|
|
|
}),
|
|
|
|
{% endfor %}
|
|
|
|
]
|
|
|
|
});
|
2020-08-20 21:37:27 +02:00
|
|
|
|
2020-08-22 09:22:20 +02:00
|
|
|
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',
|
2020-09-29 20:40:41 +02:00
|
|
|
scale: 0.02,
|
2020-09-29 20:21:27 +02:00
|
|
|
src: '{% static "icons/map-marker-icon.png" %}'
|
2020-08-22 09:22:20 +02:00
|
|
|
})
|
2020-08-20 21:37:27 +02:00
|
|
|
})
|
2020-08-22 09:22:20 +02:00
|
|
|
});
|
|
|
|
map.addLayer(markerVectorLayer);
|
2020-08-20 21:37:27 +02:00
|
|
|
|
2020-08-22 09:22:20 +02:00
|
|
|
var overlay = new ol.Overlay({
|
|
|
|
element: document.getElementById('info'),
|
|
|
|
positioning: 'bottom-left'
|
|
|
|
});
|
|
|
|
overlay.setMap(map);
|
2020-08-20 21:37:27 +02:00
|
|
|
|
2020-08-22 09:22:20 +02:00
|
|
|
map.on(['singleclick'], function(evt) {
|
|
|
|
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
|
|
|
|
window.open(feature.get('url'), '_blank');
|
|
|
|
});
|
2020-08-20 21:37:27 +02:00
|
|
|
});
|
|
|
|
|
2020-08-22 09:22:20 +02:00
|
|
|
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' : '';
|
2020-08-20 21:37:27 +02:00
|
|
|
});
|
2020-08-22 09:22:20 +02:00
|
|
|
|
|
|
|
</script>
|