Patrick Brosi 4 years ago
parent
commit
aa09a79e20
2 changed files with 55 additions and 12 deletions
  1. 5 0
      web/index.html
  2. 50 12
      web/script.js

+ 5 - 0
web/index.html

@@ -135,6 +135,11 @@
135
     font-weight: bold;
135
     font-weight: bold;
136
 }
136
 }
137
 
137
 
138
+.grouplink {
139
+    cursor: pointer;
140
+    text-decoration: underline
141
+}
142
+
138
     </style>
143
     </style>
139
 </head>
144
 </head>
140
 <body>
145
 <body>

+ 50 - 12
web/script.js

@@ -31,8 +31,8 @@ function marker(stat, z) {
31
 }
31
 }
32
 
32
 
33
 function poly(group, z) {
33
 function poly(group, z) {
34
-    if (group.new) return L.polygon(group.poly, {color: "blue", smoothFactor : 0.4})
35
-    return L.polygon(group.poly, {color: '#85f385', smoothFactor : 1})
34
+    if (group.new) return L.polygon(group.poly, {color: "blue", smoothFactor : 0.4, fillOpacity:0.2})
35
+    return L.polygon(group.poly, {color: '#85f385', smoothFactor : 1, fillOpacity:0.2})
36
 }
36
 }
37
 
37
 
38
 function sugArr(sug, z) {
38
 function sugArr(sug, z) {
@@ -54,9 +54,9 @@ function renderStat(stat, ll) {
54
     suggD.setAttribute("id", "sugg")
54
     suggD.setAttribute("id", "sugg")
55
 
55
 
56
     if (stat.attrs.name) {        
56
     if (stat.attrs.name) {        
57
-        content.innerHTML = "OSM node <a target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a><br>(<b>" + stat.attrs.name + "</b>)";
57
+        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>)";
58
     } else {
58
     } else {
59
-        content.innerHTML = "OSM node <a target='_blank' href='https://www.openstreetmap.org/node/" + stat.osmid + "'>" + stat.osmid + "</a>";
59
+        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>";
60
     }
60
     }
61
 
61
 
62
     content.appendChild(attrTbl);
62
     content.appendChild(attrTbl);
@@ -85,7 +85,7 @@ function renderStat(stat, ll) {
85
         var info = document.createElement('div');
85
         var info = document.createElement('div');
86
 
86
 
87
         if (err.other_osmid != stat.osmid) {
87
         if (err.other_osmid != stat.osmid) {
88
-            info.innerHTML = "Does not match node <a target=\"_blank\" href=\"https://www.openstreetmap.org/node/" + err.other_osmid + "\">" + err.other_osmid + "</a>";
88
+            info.innerHTML = "Does not match node <a onmouseover='nodeHl( " + err.other + ")' onmouseout='nodeUnHl( " + err.other + ")' target=\"_blank\" href=\"https://www.openstreetmap.org/node/" + err.other_osmid + "\">" + err.other_osmid + "</a>";
89
         } else {
89
         } else {
90
             info.innerHTML = "Does not match '" + err.other_attr[0] + "' = '" + err.other_attr[1];
90
             info.innerHTML = "Does not match '" + err.other_attr[0] + "' = '" + err.other_attr[1];
91
         }
91
         }
@@ -103,15 +103,15 @@ function renderStat(stat, ll) {
103
         var suggDiv = document.createElement('div');
103
         var suggDiv = document.createElement('div');
104
         
104
         
105
         if (sugg.type == 1) {
105
         if (sugg.type == 1) {
106
-            suggDiv.innerHTML = "&bull; Move node into a new relation (internal id=" + sugg.target_gid + ")";
106
+            suggDiv.innerHTML = "&bull; Move node into a <span class='grouplink' onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")'>new relation</span>";
107
         } else if (sugg.type == 2) {
107
         } else if (sugg.type == 2) {
108
-            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>.";
108
+            suggDiv.innerHTML = "&bull; Move node into existing relation <a onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")' href=\"https://www.openstreetmap.org/relation/" + sugg.target_osm_rel_id + "\" target=\"_blank\">" + sugg.target_osm_rel_id + "</a>.";
109
         } else if (sugg.type == 3) {
109
         } else if (sugg.type == 3) {
110
-            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 + ")";
110
+            suggDiv.innerHTML = "&bull; Move node from existing relation <a onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")' 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 + ")";
111
         } else if (sugg.type == 4) {
111
         } else if (sugg.type == 4) {
112
-            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>.";
112
+            suggDiv.innerHTML = "&bull; Move node from existing relation <a onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")' 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>.";
113
         } else if (sugg.type == 5) {
113
         } else if (sugg.type == 5) {
114
-            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>!";
114
+            suggDiv.innerHTML = "&bull; Move node out of existing relation <a onmouseover='groupHl( " + sugg.target_gid + ")' onmouseout='groupUnHl( " + sugg.target_gid + ")' href=\"https://www.openstreetmap.org/relation/" + sugg.orig_osm_rel_id + "\" target=\"_blank\">" + sugg.orig_osm_rel_id + "</a>!";
115
         }
115
         }
116
 
116
 
117
         suggD.appendChild(suggDiv);
117
         suggD.appendChild(suggDiv);
@@ -141,6 +141,38 @@ function openStat(id, ll) {
141
     xmlhttp.send();
141
     xmlhttp.send();
142
 }
142
 }
143
 
143
 
144
+function groupHl(id) {
145
+    if (!document.groupIdx[id]) return;
146
+    document.groupIdx[id].setStyle({
147
+        'weight': 6,
148
+        'fillOpacity':0.5
149
+});
150
+}
151
+
152
+function groupUnHl(id) {
153
+    if (!document.groupIdx[id]) return;
154
+        document.groupIdx[id].setStyle({
155
+        'weight': 3,
156
+        'fillOpacity':0.2
157
+});
158
+}
159
+
160
+function nodeHl(id) {
161
+    if (!document.nodeIdx[id]) return;
162
+    document.nodeIdx[id].setStyle({
163
+        'weight': 5,
164
+        'color' : "#eecc00"
165
+});
166
+}
167
+
168
+function nodeUnHl(id) {
169
+    if (!document.nodeIdx[id]) return;
170
+        document.nodeIdx[id].setStyle({
171
+        'weight': 1,
172
+        'color' : "black"
173
+});
174
+}
175
+
144
 var map = L.map('map', {
176
 var map = L.map('map', {
145
   renderer: L.canvas()
177
   renderer: L.canvas()
146
 }).setView([47.9965, 7.8469], 13);
178
 }).setView([47.9965, 7.8469], 13);
@@ -192,18 +224,24 @@ function render() {
192
 
224
 
193
                 layer.clearLayers();
225
                 layer.clearLayers();
194
                 labelLayer.clearLayers();
226
                 labelLayer.clearLayers();
227
+                document.groupIdx = {};                
228
+                document.nodeIdx = {};
195
 
229
 
196
                 var stations = [];
230
                 var stations = [];
197
                 var labels = [];
231
                 var labels = [];
198
                 for (var i = 0; i < content.stats.length; i++) {
232
                 for (var i = 0; i < content.stats.length; i++) {
199
                     stat = content.stats[i];
233
                     stat = content.stats[i];
200
-                    stations.push(marker(stat, map.getZoom()));
234
+                    var ndMarker = marker(stat, map.getZoom());
235
+                    stations.push(ndMarker);
236
+                    document.nodeIdx[stat.id] = ndMarker;
201
                 }
237
                 }
202
 
238
 
203
                 var groups = [];
239
                 var groups = [];
204
                 for (var i = 0; i < content.groups.length; i++) {
240
                 for (var i = 0; i < content.groups.length; i++) {
205
                     group = content.groups[i];
241
                     group = content.groups[i];
206
-                    groups.push(poly(group, map.getZoom()));
242
+                    var groupPoly = poly(group, map.getZoom());
243
+                    groups.push(groupPoly);
244
+                    document.groupIdx[group.id] = groupPoly;
207
                 }
245
                 }
208
 
246
 
209
                 var suggs = [];
247
                 var suggs = [];