Patrick Brosi 4 anos atrás
pai
commit
aa09a79e20
2 arquivos alterados com 55 adições e 12 exclusões
  1. 5 0
      web/index.html
  2. 50 12
      web/script.js

+ 5 - 0
web/index.html

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

+ 50 - 12
web/script.js

@@ -31,8 +31,8 @@ function marker(stat, z) {
31 31
 }
32 32
 
33 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 38
 function sugArr(sug, z) {
@@ -54,9 +54,9 @@ function renderStat(stat, ll) {
54 54
     suggD.setAttribute("id", "sugg")
55 55
 
56 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 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 62
     content.appendChild(attrTbl);
@@ -85,7 +85,7 @@ function renderStat(stat, ll) {
85 85
         var info = document.createElement('div');
86 86
 
87 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 89
         } else {
90 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 103
         var suggDiv = document.createElement('div');
104 104
         
105 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 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 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 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 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 117
         suggD.appendChild(suggDiv);
@@ -141,6 +141,38 @@ function openStat(id, ll) {
141 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 176
 var map = L.map('map', {
145 177
   renderer: L.canvas()
146 178
 }).setView([47.9965, 7.8469], 13);
@@ -192,18 +224,24 @@ function render() {
192 224
 
193 225
                 layer.clearLayers();
194 226
                 labelLayer.clearLayers();
227
+                document.groupIdx = {};                
228
+                document.nodeIdx = {};
195 229
 
196 230
                 var stations = [];
197 231
                 var labels = [];
198 232
                 for (var i = 0; i < content.stats.length; i++) {
199 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 239
                 var groups = [];
204 240
                 for (var i = 0; i < content.groups.length; i++) {
205 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 247
                 var suggs = [];