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: [49.676109594498,8.0982941565231],
        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":[[[8.07317292318239,49.68004880664003],[8.0735610732749,49.68223544180911],[8.08009212706915,49.682294134248906],[8.079639892188181,49.68300457689908],[8.083828282293874,49.68385009486596],[8.099774056351864,49.689526795854995],[8.098497703071768,49.69145301958106],[8.103072857715551,49.69263004657472],[8.103810948422801,49.69285268630444],[8.108529008386256,49.6856523889057],[8.110336230520762,49.681703000095965],[8.109170950015718,49.68142637944292],[8.109868330288933,49.680243939335234],[8.111034422223227,49.67828828067441],[8.118491875654156,49.68117266006813],[8.119349192311626,49.67928243926279],[8.119087819194865,49.67868287091855],[8.117190848931738,49.678336943789944],[8.120873576899342,49.67069139507348],[8.122197243596966,49.668342903057805],[8.111644607405507,49.66582555798285],[8.107709486051407,49.66465335776513],[8.10691633942743,49.665536714090486],[8.097442231329877,49.6647600317919],[8.096568115019094,49.66614566861423],[8.093423965079518,49.666618967528024],[8.092035470472496,49.66665246055485],[8.092195925926827,49.66429755568917],[8.091553936367271,49.664103879159285],[8.08738351054625,49.662934956195116],[8.08577672523456,49.66481797254392],[8.080705950596515,49.6707405972665],[8.077282022864903,49.67698631000344],[8.076583111262261,49.68009481124832],[8.07317292318239,49.68004880664003]]]}, {
            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([49.676109594498,8.0982941565231], {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": "Stetten (Pfalz) Ortsmitte", "street": "Backesberg 11", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/stetten-(pfalz)\/stetten-(pfalz)-ortsmitte\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[8.0928897857666,49.670405312745]}},{type: "Feature", "properties": {"name": "Stetten (Pfalz) Grundschule", "street": "Hohlstrasse 5", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/stetten-(pfalz)\/stetten-(pfalz)-grundschule\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[8.0884265899658,49.66923878621]}},{type: "Feature", "properties": {"name": "Stetten (Pfalz) Kindergarten", "street": "Hohlstrasse 2", "URL": "<a href = \"https:\/\/www.haltestellen-suche.de\/poi\/haltestelle\/stetten-(pfalz)\/stetten-(pfalz)-kindergarten\">Show details<\/a>"}, "geometry": {"type":"Point","coordinates":[8.0890274047852,49.66951653316]}},]}, {
        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);