59 lines
2.2 KiB
Django/Jinja
59 lines
2.2 KiB
Django/Jinja
{% extends 'base.jinja' %}
|
|
{% block head_extra_first %}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
|
|
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
|
|
crossorigin=""/>
|
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
|
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
|
|
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
|
|
crossorigin=""></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', loadData);
|
|
document.addEventListener('DOMContentLoaded', resizeMap);
|
|
window.onresize = resizeMap;
|
|
|
|
function loadData() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
generateMap(JSON.parse(this.response))
|
|
}
|
|
};
|
|
xhttp.open("GET", "https://nominatim.openstreetmap.org/search/?format=json&city=Bamberg&street={{ room.address }}", true);
|
|
xhttp.send();
|
|
}
|
|
|
|
|
|
function generateMap(streets) {
|
|
if (streets.length > 0) {
|
|
var lon = streets[0]['lon'];
|
|
var lat = streets[0]['lat'];
|
|
var map = L.map('map').setView([lat, lon], 13);
|
|
|
|
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
L.marker([lat, lon]).addTo(map)
|
|
.bindPopup('{{ room.short }} </br> {{ room.address }}')
|
|
.openPopup();
|
|
}
|
|
|
|
}
|
|
|
|
function resizeMap() {
|
|
var height = window.innerHeight
|
|
document.getElementById('map').style.height = height + 'px'
|
|
console.log(height)
|
|
}
|
|
</script>
|
|
{% endblock %}
|
|
{% block headline %}
|
|
<h1 class="text-center"> Donar </h1>
|
|
{% endblock %}
|
|
{% block content %}
|
|
{# TODO: implement Leaflet #}
|
|
<div id="kart"></div>
|
|
<div id="map"></div>
|
|
{% endblock %}
|