changes

web/script.js

@@ -2,36 +2,44 @@ widths = [12, 13, 13, 13, 13, 13, 13, 13];
 opas = [0.8, 0.6, 0.5, 0.5, 0.4];
 mwidths = [1, 1, 1, 1.5, 2, 3, 5, 6, 6, 4, 3, 2];
 
-function $(id) { return document.getElementById(id); }
+function $(id) {
+    return document.getElementById(id);
+}
 
 function marker(stat, z) {
     if (z > 15) {
         return L.circle(
-            [stat.lat, stat.lon],
-            {
+            [stat.lat, stat.lon], {
                 color: 'black',
-                fillColor: stat.attrerrs ? 'red' : stat.su ? '#0000c3' : '#78f378', 
+                fillColor: stat.attrerrs ? 'red' : stat.su ? '#0000c3' : '#78f378',
                 radius: mwidths[23 - z],
-                fillOpacity : 1,
-                weight : 1,
-                id : stat.id
+                fillOpacity: 1,
+                weight: 1,
+                id: stat.id
             }
         );
     } else {
         return L.polyline(
-            [[stat.lat, stat.lon], [stat.lat, stat.lon]],
-            {
+            [
+                [stat.lat, stat.lon],
+                [stat.lat, stat.lon]
+            ], {
                 color: stat.attrerrs ? 'red' : stat.su ? '#0000c3' : '#78f378',
                 weight: widths[15 - z],
                 opacity: opas[15 - z],
-                id : stat.id
+                id: stat.id
             }
         );
     }
 }
 
 function poly(group, z) {
-    var style = {color: "#85f385", smoothFactor : 0.4, fillOpacity: 0.2, id : group.id};
+    var style = {
+        color: "#85f385",
+        smoothFactor: 0.4,
+        fillOpacity: 0.2,
+        id: group.id
+    };
     if (group.new) {
         style.color = "#0000c3";
     }
@@ -44,27 +52,36 @@ function poly(group, z) {
 }
 
 function sugArr(sug, z) {
-    return L.polyline(sug.arrow, {id : sug.id, color: '#0000c3', smoothFactor : 0.1, weight: 4, opacity:0.5});
+    return L.polyline(sug.arrow, {
+        id: sug.id,
+        color: '#0000c3',
+        smoothFactor: 0.1,
+        weight: 4,
+        opacity: 0.5
+    });
 }
 
 function renderStat(stat) {
     var attrrows = {};
-    var ll = {lat: stat.lat, lon: stat.lon};
+    var ll = {
+        lat: stat.lat,
+        lon: stat.lon
+    };
 
     var content = document.createElement('div');
     content.setAttribute("id", "nav")
     var attrTbl = document.createElement('table');
-     attrTbl.setAttribute("id", "attr-tbl")
+    attrTbl.setAttribute("id", "attr-tbl")
     var suggD = document.createElement('div');
     suggD.setAttribute("id", "sugg")
 
-    if (stat.attrs.name) {        
+    if (stat.attrs.name) {
         content.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a> (<b>\"" + stat.attrs.name + "\"</b>)";
     } else {
         content.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a>";
     }
 
-    content.appendChild(attrTbl);    
+    content.appendChild(attrTbl);
     content.appendChild(suggD);
 
     var tbody = document.createElement('tbody');
@@ -78,7 +95,7 @@ function renderStat(stat) {
         row.appendChild(col1);
         row.appendChild(col2);
         col1.innerHTML = "<a href=\"https://wiki.openstreetmap.org/wiki/Key:" + key + "\" target=\"_blank\"><tt>" + key + "</tt></a>";
-        for (var i = 0; i <  stat.attrs[key].length; i++) col2.innerHTML += "<span class='attrval'>" + stat.attrs[key][i] + "</span>"+ "<br>";
+        for (var i = 0; i < stat.attrs[key].length; i++) col2.innerHTML += "<span class='attrval'>" + stat.attrs[key][i] + "</span>" + "<br>";
         attrrows[key] = row;
     }
 
@@ -100,8 +117,8 @@ function renderStat(stat) {
 
     var suggList = document.createElement('ul');
 
-    if (stat.su.length) {       
-        var a = document.createElement('span'); 
+    if (stat.su.length) {
+        var a = document.createElement('span');
         a.className = "sugtit";
         a.innerHTML = "Suggestions";
         suggD.appendChild(a);
@@ -113,7 +130,7 @@ function renderStat(stat) {
         var sugg = stat.su[i];
 
         var suggDiv = document.createElement('li');
-        
+
         if (sugg.type == 1) {
             suggDiv.innerHTML = "Move node into a <span class='grouplink' onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")'>new relation</span> <tt>public_transport=stop_area</tt>";
         } else if (sugg.type == 2) {
@@ -132,10 +149,14 @@ function renderStat(stat) {
     }
 
     if (map.getZoom() < 18) {
-        map.setView(ll, 18, {animate: true});
+        map.setView(ll, 18, {
+            animate: true
+        });
     }
 
-    L.popup({opacity: 0.8})
+    L.popup({
+            opacity: 0.8
+        })
         .setLatLng(ll)
         .setContent(content)
         .openOn(map);
@@ -181,7 +202,7 @@ function renderGroup(grp, ll) {
         var stat = grp.stations[key];
         var row = document.createElement('div');
 
-        if (stat.attrs.name) {        
+        if (stat.attrs.name) {
             row.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a> (<b>\"" + stat.attrs.name + "\"</b>)";
         } else {
             row.innerHTML = "Node <a onmouseover='nodeHl( " + stat.id + ")' onmouseout='nodeUnHl( " + stat.id + ")' target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a>";
@@ -197,10 +218,14 @@ function renderGroup(grp, ll) {
     }
 
     if (map.getZoom() < 18) {
-        map.setView(ll, 18, {animate: true});
+        map.setView(ll, 18, {
+            animate: true
+        });
     }
 
-    L.popup({opacity: 0.8})
+    L.popup({
+            opacity: 0.8
+        })
         .setLatLng(ll)
         .setContent(content)
         .openOn(map);
@@ -223,43 +248,43 @@ function groupHl(id) {
     if (!document.groupIdx[id]) return;
     document.groupIdx[id].setStyle({
         'weight': 6,
-        'fillOpacity':0.5
-});
+        'fillOpacity': 0.5
+    });
 }
 
 function groupUnHl(id) {
     if (!document.groupIdx[id]) return;
-        document.groupIdx[id].setStyle({
+    document.groupIdx[id].setStyle({
         'weight': 3,
-        'fillOpacity':0.2
-});
+        'fillOpacity': 0.2
+    });
 }
 
 function nodeHl(id) {
     if (!document.nodeIdx[id]) return;
     document.nodeIdx[id].setStyle({
         'weight': 5,
-        'color' : "#eecc00"
-});
+        'color': "#eecc00"
+    });
 }
 
 function nodeUnHl(id) {
     if (!document.nodeIdx[id]) return;
-        document.nodeIdx[id].setStyle({
+    document.nodeIdx[id].setStyle({
         'weight': 1,
-        'color' : "black"
-});
+        'color': "black"
+    });
 }
 
 var map = L.map('map', {
-  renderer: L.canvas(),
-  attributionControl: false,
+    renderer: L.canvas(),
+    attributionControl: false,
 }).setView([47.9965, 7.8469], 13);
 
 map.addControl(L.control.attribution({
-        position: 'bottomright',
-        prefix: '&copy; <a href="http://ad.cs.uni-freiburg.de">University of Freiburg, Chair of Algorithms and Data Structures</a>'
-      }));
+    position: 'bottomright',
+    prefix: '&copy; <a href="http://ad.cs.uni-freiburg.de">University of Freiburg, Chair of Algorithms and Data Structures</a>'
+}));
 
 L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
     maxZoom: 23,
@@ -270,7 +295,7 @@ L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x
 var layer = L.featureGroup().addTo(map);
 var labelLayer = L.featureGroup().addTo(map);
 
-map.on("moveend", function () {
+map.on("moveend", function() {
     render();
 });
 
@@ -288,10 +313,41 @@ function render() {
                 var blur = 22 - map.getZoom();
                 var rad = 25 - map.getZoom();
 
-                layer.addLayer(L.heatLayer(content.ok, {max: 500, gradient: {0: '#cbf7cb', 0.5: '#78f378', 1: '#29c329'}, minOpacity: 0.65, blur: blur, radius: rad}));
-                layer.addLayer(L.heatLayer(content.sugg, {max: 500, gradient: {0: '#7f7fbd', 0.5: '#4444b3', 1: '#0606c1'}, minOpacity: 0.65, blur: blur-3, radius: Math.min(12, rad-3)}));
-                
-                layer.addLayer(L.heatLayer(content.err, {max: 500, gradient: {0: '#f39191', 0.5: '#ff5656', 1: '#ff0000'}, minOpacity: 0.75, blur: blur-3, radius: Math.min(10, rad-3), maxZoom: 15}));
+                layer.addLayer(L.heatLayer(content.ok, {
+                    max: 500,
+                    gradient: {
+                        0: '#cbf7cb',
+                        0.5: '#78f378',
+                        1: '#29c329'
+                    },
+                    minOpacity: 0.65,
+                    blur: blur,
+                    radius: rad
+                }));
+                layer.addLayer(L.heatLayer(content.sugg, {
+                    max: 500,
+                    gradient: {
+                        0: '#7f7fbd',
+                        0.5: '#4444b3',
+                        1: '#0606c1'
+                    },
+                    minOpacity: 0.65,
+                    blur: blur - 3,
+                    radius: Math.min(12, rad - 3)
+                }));
+
+                layer.addLayer(L.heatLayer(content.err, {
+                    max: 500,
+                    gradient: {
+                        0: '#f39191',
+                        0.5: '#ff5656',
+                        1: '#ff0000'
+                    },
+                    minOpacity: 0.75,
+                    blur: blur - 3,
+                    radius: Math.min(10, rad - 3),
+                    maxZoom: 15
+                }));
             }
         };
 
@@ -304,7 +360,7 @@ function render() {
 
                 layer.clearLayers();
                 labelLayer.clearLayers();
-                document.groupIdx = {};                
+                document.groupIdx = {};
                 document.nodeIdx = {};
 
                 var stations = [];
@@ -332,17 +388,22 @@ function render() {
                 }
 
                 if (map.getZoom() > 15) {
-                   labelLayer.addLayer(L.featureGroup(labels));
-                   layer.addLayer(L.featureGroup(suggs).on('click', function(a) { openStat(a.layer.options.id); }));
+                    labelLayer.addLayer(L.featureGroup(labels));
+                    layer.addLayer(L.featureGroup(suggs).on('click', function(a) {
+                        openStat(a.layer.options.id);
+                    }));
                 }
 
                 if (map.getZoom() > 13) {
-                   layer.addLayer(L.featureGroup(groups).on('click', function(a) { openGroup(a.layer.options.id, a.layer.getBounds().getCenter());}));
+                    layer.addLayer(L.featureGroup(groups).on('click', function(a) {
+                        openGroup(a.layer.options.id, a.layer.getBounds().getCenter());
+                    }));
                 }
 
 
                 layer.addLayer(L.featureGroup(stations).on('click', function(a) {
-                   openStat(a.layer.options.id);}));
+                    openStat(a.layer.options.id);
+                }));
             }
         };