Fixed indentation again. Because I'm stupid ;-)
This commit is contained in:
parent
04940a0901
commit
a0627761a7
@ -2,68 +2,68 @@
|
||||
<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'
|
||||
})
|
||||
<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
|
||||
})
|
||||
});
|
||||
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;
|
||||
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 %}
|
||||
]
|
||||
});
|
||||
overlay.getElement().style.display = feature ? '' : 'none';
|
||||
document.body.style.cursor = feature ? 'pointer' : '';
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
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>
|
Loading…
Reference in New Issue
Block a user