Fehlerbehebung

import.py

@@ -15,7 +15,7 @@ try:
 
     cur = db.cursor()
 
-    with open('stations.json') as data_file:
+    with open('stationLayer.json') as data_file:
         data = json.load(data_file)
     for station in data["elements"]:
         if station["type"] == "node":

stationExport.py

@@ -38,5 +38,5 @@ geojsonComplete = {
     "features": features
 }
 # print(json.dumps(geojsonComplete, indent=4))
-with open('stations.json', 'w') as outfile:
+with open('stationLayer.json', 'w') as outfile:
     json.dump(geojsonComplete, outfile, indent=4)

www/map.html

@@ -27,21 +27,60 @@
     var layer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 19,
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-    }).addTo(map);
+    });
+    var emptyLayer = L.tileLayer("").addTo(map);
 
-    var LeafIcon = L.Icon.extend({
+    var citybikeIcon = L.Icon.extend({
         options: {
             iconUrl: "citybike.png",
-//            shadowUrl: 'leaf-shadow.png',
-//         //   iconSize:     [38, 95],
-//            shadowSize:   [50, 64],
             iconAnchor: [16, 16],
             popupAnchor: [0, -16]
         }
     });
+    var altCitybikeIcon = citybikeIcon.extend({
+        options: {
+            iconUrl: "citybikeAlt.png"
+        }
+    });
 
 
-    function highlightFeature(e) {
+    $.ajax({
+        dataType: "json",
+        url: "test.json",
+        success: function (data) {
+            lines.addData(data);
+            lines.addTo(map);
+        }
+    });
+    var stations = {};
+
+    var stationLayer = L.geoJson(null, {
+        pointToLayer: function (feature, latlng) {
+            return L.marker(latlng, {icon: new citybikeIcon()});
+        },
+        onEachFeature: function (feature, layer) {
+//            layer._leaflet_id = feature.properties.ref;
+//            console.log(feature.properties.ref);
+//            console.log(feature.properties);
+            stations[feature.properties.ref] = feature.properties.name;
+            layer.bindPopup(feature.properties.name);
+            layer._leaflet_id = 10000 + feature.properties.ref;
+        }
+    });
+
+    $.ajax({
+        dataType: "json",
+        url: "stations.json",
+        success: function (data) {
+            stationLayer.addData(data);
+            stationLayer.addTo(map);
+            map.fitBounds(stationLayer.getBounds());
+        }
+    });
+
+    function onEachFeature(feature, layer) {
+        layer.on({
+            mouseover: function (e) {
                 var layer = e.target;
 
                 layer.setStyle({
@@ -52,66 +91,41 @@
                 if (!L.Browser.ie && !L.Browser.opera) {
                     layer.bringToFront();
                 }
-    }
-    function resetHighlight(e) {
+                stationLayer.getLayer(10000 + layer.nodes[0]).setIcon(new altCitybikeIcon());
+                stationLayer.getLayer(10000 + layer.nodes[1]).setIcon(new altCitybikeIcon());
+            },
+            mouseout: function (e) {
                 lines.resetStyle(e.target);
+                stationLayer.getLayer(10000 + layer.nodes[0]).setIcon(new citybikeIcon());
+                stationLayer.getLayer(10000 + layer.nodes[1]).setIcon(new citybikeIcon());
+
             }
-    function onEachFeature(feature, layer) {
-        layer.on({
-            mouseover: highlightFeature,
-            mouseout: resetHighlight
         });
-        layer._leaflet_id = feature.properties.id;
+
     }
-    var style = {
-        weight: 5
-    };
+
 
     var lines = L.geoJson(null, {
         onEachFeature: function (feature, layer) {
-            layer.bindPopup(feature.properties.nodes[0] + " - " + feature.properties.nodes[1]);
+            layer.bindPopup(stations[feature.properties.nodes[0]] + " - " + stations[feature.properties.nodes[1]]);
             onEachFeature(feature, layer);
+            layer.nodes = feature.properties.nodes;
+//            layer._leaflet_id = feature.properties.id;
+
         },
-        style: style
+        style: {
+            weight: 5
+        }
     });
+
+
     var mapLayers = {
-        'Standard': layer
+        'Standard': layer,
+        "Leer": emptyLayer
     };
-
-    $.ajax({
-        dataType: "json",
-        url: "test.json",
-        success: function (data) {
-            lines.addData(data);
-            lines.addTo(map);
-        }
-    });
-
-
-    var stations = L.geoJson(null, {
-        pointToLayer: function (feature, latlng) {
-            return L.marker(latlng, {icon: new LeafIcon()});
-        },
-        onEachFeature: function (feature, layer) {
-//            layer._leaflet_id = feature.properties.ref;
-//            console.log(feature.properties.ref);
-
-            layer.bindPopup(feature.properties.name);
-        }
-    });
-
-    $.ajax({
-        dataType: "json",
-        url: "stations.json",
-        success: function (data) {
-            stations.addData(data);
-            stations.addTo(map);
-            map.fitBounds(stations.getBounds());
-        }
-    });
     var overlays = {
         "Wege": lines,
-        "Stationen": stations
+        "Stationen": stationLayer
     };
     var control = L.control.layers(mapLayers, overlays, {collapsed: false}).addTo(map);