Connection to database failed: Possibly the server was restarted. It takes about 10 minutes to read the database. Please try again later!<br>Verbindung zur Datenbank fehlgeschlagen: Eventuell wurde der Server neu gestartet.
                     Das Einlesen der Datenbank dauert etwa 10 Minuten. Bitte versuchen Sie es später noch einmal!
let url = location.protocol + "//" + location.host + "/img/";
    let map = L.map('map', {
        center: [52.35445689451,7.9687276062727],
        zoom: 12,
        zoomControl: false,
        tap: false
    });
    //Layers - OSM is pre selected
    //variable for OSM
    let OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    
    //Variables for Bing
    let BING_KEY = 'AlqnXp9wAwXT2E5_GRJanH9Xrx-olcRR7s8LBnkbiOkD6w-2Z4Cw4l3zuLZFN35M'
    //Bing aerial
    let bingLayerAerial = L.tileLayer.bing(BING_KEY)
    //Bing road
    let bingLayerRoad = L.tileLayer.bing({
        bingMapsKey: BING_KEY,
        imagerySet: 'RoadOnDemand',
        culture: 'de_DE'
    })
    //openRailway
    let OpenRailwayMap = L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: 'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'
    })

    //draw circle
        //city boarders = Polygon
        let cityBorders = new L.geoJSON({"type":"Polygon","coordinates":[[[7.957471140269444,52.34696131351462],[7.956651933210063,52.3614596865194],[7.979987869491966,52.361951777140185],[7.980799571919611,52.34745324946729],[7.957471140269444,52.34696131351462]]]}, {
            radius: 10,
            color: 'blue',
            fillColor: '#FFF'
        }
    ).addTo(map);
        //Marker Icons
    let LeafIcon =  L.Icon.extend({
            options: {
                iconSize: [32, 37],
            }
        }
    )
    let cityMarker = new LeafIcon (
        {
            iconUrl: url + "stadt-icon.png"
        }
    )
    let stopMarker = new LeafIcon (
        {
            iconUrl: url + "2726.png"
        }
    )
    let stationMarker = new LeafIcon (
        {
            iconUrl: url + "2725.png"
        }
    )
    let restaurantMarker = new LeafIcon (
        {
            iconUrl: url + ".png"
        }
    )
    let myPositionMarker = new LeafIcon (
        {
            iconUrl: url + "myPosition.png"
        }
    )
    //Center Icon
    
        let centerMarker = L.marker([52.35445689451,7.9687276062727], {icon: cityMarker})
    centerMarker.bindPopup('Errechneter Stadtmittelpunkt');
    
    function popUp(f,l){
        let out = [];
        if (f.properties){
            for(key in f.properties){
                if (key === 'name') {
                    f.properties[key] = '<h6>'+ f.properties[key] + '</h6>';
                }
                out.push(f.properties[key]);
            }
            l.bindPopup(out.join("<br />"));
        }
    }
        let hs = new L.geoJSON({"type": "FeatureCollection", "features": [{type: "Feature", "properties": {"name": "Frankensteiner Stra\u00dfe", "street": "F\u00fcrstenauer Weg ", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/wallenhorst\/frankensteiner-strasse\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[7.9605388641357,52.352118572721]}},{type: "Feature", "properties": {"name": "Hollage Gewerbegebiet", "street": "Penter Strasse 23", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/wallenhorst\/hollage-gewerbegebiet\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[7.9669761657715,52.354897062873]}},{type: "Feature", "properties": {"name": "M\u00fchlenkamp", "street": "Hansastrasse ", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/wallenhorst\/muehlenkamp\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[7.9611396789551,52.357885055457]}},{type: "Feature", "properties": {"name": "Penter Stra\u00dfe", "street": "D\u00f6rnter Weg 1", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/wallenhorst\/penter-strasse\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[7.9637145996094,52.350021483361]}},{type: "Feature", "properties": {"name": "Siemensstra\u00dfe", "street": "Siemensstrasse 3", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/wallenhorst\/siemensstrasse\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[7.9735851287842,52.357308441041]}},{type: "Feature", "properties": {"name": "Stephansring", "street": "F\u00fcrstenauer Weg 75", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/wallenhorst\/stephansring\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[7.9582214355469,52.353953444296]}},]}, {
        pointToLayer: function(point, latlng) {
            return L.marker(latlng, {icon: stopMarker});
        },
        onEachFeature: popUp
    });
    let hsCluster = L.markerClusterGroup();
    hs.addTo(hsCluster);
    hsCluster.addTo(map);
            let station =L.geoJSON({"type": "FeatureCollection", "features": []}, {
        pointToLayer: function(point, latlng) {
            return L.marker(latlng, {icon: stationMarker});
        },
        onEachFeature: popUp
    });
    let stationCluster = L.markerClusterGroup();
    station.addTo(stationCluster);
    stationCluster.addTo(map);
        


    //variable for control.layer
    let basemaps = {
        "OpenStreetMap": OpenStreetMap_DE,
        "Bing Strasse": bingLayerRoad,
        "Bing Luftbild": bingLayerAerial,
        "Bahnstrecken": OpenRailwayMap
    };

    let overlays = {
                        "Center calculated": centerMarker,
                        "Stops": hsCluster,
                        "Station": stationCluster,
                                "City borders": cityBorders,
        
    }
    //control for zoom
    L.control.zoom({
        zoomInTitle: 'hineinzoomen',
        zoomOutTitle: 'herauszoomen',
        zoomInText: '<span class="bi bi-chevron-double-up" style="color: #1ABC9C;"></span>',
        zoomOutText: '<span class="bi bi-chevron-double-down" style="color: #f07d00;"></span>',
    }).addTo(map);
    //Layer control
    L.control.layers(basemaps,overlays).addTo(map);