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.740056336448,11.272830963135],
        zoom: 15,
        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
        let circle = L.circle([53.740056336448,11.272830963135], {
        radius: 1000,
        color: '#18BC9C',
        fillOpacity: 0.05
    });
    circle.addTo(map);

        //city boarders = Polygon
        //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.740056336448,11.272830963135], {icon: myPositionMarker})
    centerMarker.bindPopup('Mein Standort<br>53.740056336448,11.272830963135').addTo(map);
    
    
    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": "Wendelstorf", "street": "Dorfstra\u00dfe 14", "URL": "<a href = \"https:\/\/haltestellen-suche.de\/poi\/haltestelle\/dalberg-wendelstorf\/wendelstorf\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[11.272830963135,53.740056336448]}},{type: "Feature", "properties": {"name": "Gro\u00df Eichsen", "street": "Dorfstra\u00dfe 10", "URL": "<a href = \"https:\/\/haltestellen-suche.de\/poi\/haltestelle\/muehlen-eichsen\/gross-eichsen\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[11.260299682617,53.742721389566]}},]}, {
        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 = {
                "My Position": centerMarker,
                                "Stops": hsCluster,
                        "Station": stationCluster,
                        
    }
    //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);