changes

web/index.html

@@ -66,6 +66,23 @@
             border-radius: 5px;
         }
 
+        #attr-tbl {
+            margin-top: 10px;
+        }
+
+        #sugg .sugtit {
+            font-style: normal;
+            font-weight: bold;
+        }
+
+        #sugg {
+            margin-top: 8px;
+            padding-top: 4px;
+            border-top: solid 1px #AAA;
+            color: blue;
+            font-style: italic;
+        }
+
 .leaflet-popup {left: -20px !important;}
 
 .leaflet-popup-tip-container {

web/script.js

@@ -10,7 +10,7 @@ function marker(stat, z) {
             [stat.lat, stat.lon],
             {
                 color: 'black',
-                fillColor: stat.suggestion ? 'blue' : stat.attrerrs ? 'red' : '#78f378', 
+                fillColor: stat.attrerrs ? 'red' : stat.suggestion ? 'blue' : '#78f378', 
                 radius: mwidths[23 - z],
                 fillOpacity : 1,
                 weight : 1,
@@ -21,7 +21,7 @@ function marker(stat, z) {
         return L.polyline(
             [[stat.lat, stat.lon], [stat.lat, stat.lon]],
             {
-                color: stat.suggestion ? 'blue' : stat.attrerrs ? 'red' : '#78f378',
+                color: stat.attrerrs ? 'red' : stat.suggestion ? 'blue' : '#78f378',
                 weight: widths[15 - z],
                 opacity: opas[15 - z],
                 id : stat.id
@@ -52,7 +52,12 @@ function renderStat(stat, ll) {
      attrTbl.setAttribute("id", "attr-tbl")
     var suggD = document.createElement('table');
     suggD.setAttribute("id", "sugg")
-    content.innerHTML = "OSM node <a target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a>";
+
+    if (stat.attrs.name) {        
+        content.innerHTML = "OSM node <a target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a><br>(<b>" + stat.attrs.name + "</b>)";
+    } else {
+        content.innerHTML = "OSM node <a target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a>";
+    }
 
     content.appendChild(attrTbl);
     content.appendChild(suggD);
@@ -88,34 +93,41 @@ function renderStat(stat, ll) {
         row.childNodes[1].appendChild(info);
     }
 
+    if (stat.suggestions.length) {        
+        suggD.innerHTML = "<span class='sugtit'>Suggestions</span>";
+    }
+
     for (var i = 0; i < stat.suggestions.length; i++) {
         var sugg = stat.suggestions[i];
 
         var suggDiv = document.createElement('div');
         
         if (sugg.type == 1) {
-            suggDiv.innerHTML = "Move node into a new relation (internal id=" + sugg.target_gid + ")";
+            suggDiv.innerHTML = "&bull; Move node into a new relation (internal id=" + sugg.target_gid + ")";
         } else if (sugg.type == 2) {
-            suggDiv.innerHTML = "Move node into existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.target_osm_rel_id + "\" target=\"_blank\">" + sugg.target_osm_rel_id + "</a>.";
+            suggDiv.innerHTML = "&bull; Move node into existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.target_osm_rel_id + "\" target=\"_blank\">" + sugg.target_osm_rel_id + "</a>.";
         } else if (sugg.type == 3) {
-            suggDiv.innerHTML = "Move node from existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a> into new relation (internal id=" + sugg.target_gid + ")";
+            suggDiv.innerHTML = "&bull; Move node from existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a> into new relation (internal id=" + sugg.target_gid + ")";
         } else if (sugg.type == 4) {
-            suggDiv.innerHTML = "Move node from existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a> into existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.target_osm_rel_id + "\" target=\"_blank\">" + sugg.target_osm_rel_id + "</a>.";
+            suggDiv.innerHTML = "&bull; Move node from existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a> into existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.target_osm_rel_id + "\" target=\"_blank\">" + sugg.target_osm_rel_id + "</a>.";
         } else if (sugg.type == 5) {
-            suggDiv.innerHTML = "Move node out of existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a>!";
+            suggDiv.innerHTML = "&bull; Move node out of existing relation <a href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a>!";
         }
 
         suggD.appendChild(suggDiv);
     }
 
-    if (map.getZoom() < 18) map.setView(ll, 18);
+    if (map.getZoom() < 18) {
+        map.setView(ll, 18);
+    }
 
     L.popup({opacity: 0.8})
-    .setLatLng(ll)
-    .setContent(content.innerHTML)
-    .openOn(map);
+        .setLatLng(ll)
+        .setContent(content)
+        .openOn(map);
 }
 
+
 function openStat(id, ll) {
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function() {
@@ -143,10 +155,11 @@ 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("zoomend", function () {
     render();
 });
 
+
 function render() {
     var xmlhttp = new XMLHttpRequest();
 
@@ -203,13 +216,13 @@ function render() {
 
                 if (map.getZoom() > 15) {
                    labelLayer.addLayer(L.featureGroup(labels));
-                   layer.addLayer(L.featureGroup(groups));
-                   layer.addLayer(L.featureGroup(suggs).on('click', function(a) { openStat(a.layer.options.id, a.latlng);}));
+                   layer.addLayer(L.featureGroup(groups).on('click', function(a) { console.log(a);}));
+                   layer.addLayer(L.featureGroup(suggs).on('click', function(a) { openStat(a.layer.options.id, a.layer.getBounds().getCenter());}));
                 }
 
 
-                layer.addLayer(L.featureGroup(stations).on('click', function(a) { 
-                    openStat(a.layer.options.id, a.latlng);}));
+                layer.addLayer(L.featureGroup(stations).on('click', function(a) {
+                    openStat(a.layer.options.id, a.layer.getBounds().getCenter());}));
             }
         };