haldis/app/templates/maps.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: '&copy; <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 %}