lostplaces-backend/django_lostplaces/lostplaces/templates/partials/osm_map.html
reverend 547179b0ca Squashed commit of the following:
commit 97b044cafb7f17f23b3b1beedcf70af209a60ddc
Author: reverend <reverend@reverend2048.de>
Date:   Mon Sep 14 17:25:40 2020 +0200

    Updating gitignore

commit 4891d80486e1f95db8ae66385c7c97426a3ca1a4
Author: reverend <reverend@reverend2048.de>
Date:   Mon Sep 14 17:25:20 2020 +0200

    Updating Readme

commit f05c43abbdc7eb30896ad6d10fe80fd6483338d9
Author: reverend <reverend@reverend2048.de>
Date:   Mon Sep 14 17:23:30 2020 +0200

    Renaming Module

commit fd5ad2ee9f8cbacd565da45b257928192ffc651c
Author: reverend <reverend@reverend2048.de>
Date:   Mon Sep 14 17:23:16 2020 +0200

    Renaming module references

commit 828a0dd5dd73723b84b77908497903ed26b6966b
Author: reverend <reverend@reverend2048.de>
Date:   Mon Sep 14 17:21:20 2020 +0200

    Renaming Project
2020-09-14 17:26:17 +02:00

69 lines
2.6 KiB
HTML

<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([{{config.map_center.longitude}}, {{config.map_center.latitude}}]),
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}},{{point.latitude}}])
),
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.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>