94 lines
2.9 KiB
HTML
94 lines
2.9 KiB
HTML
{% extends "layout.html" %}
|
|
{% set active_page = "map" -%}
|
|
|
|
{% import "utils.html" as util %}
|
|
|
|
{% block container %}
|
|
<div id="mapid"></div>
|
|
{% endblock %}
|
|
|
|
{% block styles %}
|
|
{{ super() }}
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/leaflet.css') }}">
|
|
<link rel="stylesheet" href="{{url_for('static', filename='css/map.css')}}">
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{super()}}
|
|
<script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
|
|
|
|
<script>
|
|
var map = L.map('mapid').setView([
|
|
51.0231119,3.7102741], 14);
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
}).addTo(map);
|
|
|
|
|
|
function performRequest(url, location, success_callback) {
|
|
var request = new XMLHttpRequest();
|
|
request.open('GET', url, true);
|
|
request.onload = function () {
|
|
if (this.status >= 200 && this.status < 400) {
|
|
// Success!
|
|
var data = JSON.parse(this.response);
|
|
success_callback(location, data);
|
|
} else {
|
|
// We reached our target server, but it returned an error
|
|
}
|
|
};
|
|
request.onerror = function () {
|
|
// There was a connection error of some sort
|
|
};
|
|
request.send();
|
|
}
|
|
|
|
let marker_icon = L.icon({
|
|
iconUrl: "{{url_for('static', filename='images/marker-icon.png')}}",
|
|
shadowUrl: "{{url_for('static', filename='images/marker-shadow.png')}}"
|
|
});
|
|
|
|
let callback = function OSMCallBack(location, data){
|
|
var lat, lon;
|
|
if (data.features.length < 1) {
|
|
lat = 51.0538286;
|
|
lon = 3.7250121;
|
|
var className = 'is-invisible';
|
|
var el = document.getElementById('map-error');
|
|
if (el.classList)
|
|
el.classList.remove(className);
|
|
else
|
|
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
|
} else {
|
|
var place = data.features[0].properties;
|
|
lat = data.features[0].geometry.coordinates[1];
|
|
lon = data.features[0].geometry.coordinates[0];
|
|
|
|
L.marker([lat, lon], {icon: marker_icon}).addTo(map)
|
|
.bindPopup(location.name + ', ' + location.address)
|
|
.openPopup();
|
|
}
|
|
};
|
|
|
|
|
|
let locations = [];
|
|
let loc = {};
|
|
{% for loc in locations -%}
|
|
|
|
loc = { "address" : "{{loc.address}}",
|
|
"name" : "{{loc.name}}"
|
|
};
|
|
|
|
locations.push(loc);
|
|
|
|
{%- endfor %}
|
|
|
|
for (let loc of locations) {
|
|
performRequest("https://photon.komoot.de/api/?limit=1&q=" + loc.address, loc, callback)
|
|
};
|
|
|
|
|
|
</script>
|
|
{% endblock %} |