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: [53.952794100919,11.971726486389],
        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":[[[11.955873083748921,53.9441941936053],[11.957144058950766,53.962146223326386],[11.987586364558721,53.96139247908034],[11.98630235250207,53.94344094254043],[11.955873083748921,53.9441941936053]]]}, {
            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([53.952794100919,11.971726486389], {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": "Boldenstorf Abzw.", "street": "L131 ", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/klein-belitz\/boldenstorf-abzw\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[11.970720291138,53.945933148145]}},{type: "Feature", "properties": {"name": "Gro\u00df Belitz", "street": "L131 ", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/klein-belitz\/gross-belitz\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[11.968660354614,53.952247109651]}},]}, {
        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);