haldis/app/templates/maps.html

91 lines
2.7 KiB
HTML
Raw Normal View History

2019-02-14 16:43:07 +01:00
{% extends "layout.html" %}
{% set active_page = "map" -%}
2019-02-14 16:43:07 +01:00
{% import "utils.html" as util %}
{% block container %}
<div id="mapid"></div>
{% endblock %}
2019-02-14 16:43:07 +01:00
{% 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')}}">
2019-02-14 16:43:07 +01:00
{% endblock %}
{% block scripts %}
{{super()}}
<script src="{{ url_for('static', filename='js/leaflet.js')}}"></script>
2019-02-14 16:43:07 +01:00
<script>
2019-02-14 19:17:02 +01:00
var map = L.map('mapid').setView([
51.0231119,3.7102741], 14);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
2019-02-14 19:17:02 +01:00
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);
2019-02-14 19:17:02 +01:00
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();
}
2019-02-14 19:17:02 +01:00
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;
2019-02-14 19:47:25 +01:00
if (data.features.length >= 1 ) {
var place = data.features[0].properties;
lat = data.features[0].geometry.coordinates[1];
lon = data.features[0].geometry.coordinates[0];
2019-02-14 19:17:02 +01:00
2019-02-14 19:34:55 +01:00
let marker = L.marker([lat, lon], {icon: marker_icon}).addTo(map)
.bindPopup(location.name + ', ' + location.address);
marker.on('mouseover', function(env) {
marker.openPopup();
});
marker.on('mouseout', function(env){
marker.closePopup();
});
}
};
let locations = [];
let loc = {};
{% for loc in locations -%}
loc = { "address" : "{{loc.address}}",
"name" : "{{loc.name}}"
};
locations.push(loc);
{%- endfor %}
for (let loc of locations) {
2019-02-14 19:17:02 +01:00
performRequest("https://photon.komoot.de/api/?limit=1&q=" + loc.address, loc, callback)
};
2019-02-14 19:17:02 +01:00
</script>
2019-02-14 16:43:07 +01:00
{% endblock %}