|
@@ -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, fillOpacity:0.2})
|
35
|
|
- return L.polygon(group.poly, {color: '#85f385', smoothFactor : 1, fillOpacity:0.2})
|
|
34
|
+ if (group.new) return L.polygon(group.poly, {color: "blue", smoothFactor : 0.4, fillOpacity:0.2, id : group.id})
|
|
35
|
+ return L.polygon(group.poly, {color: '#85f385', smoothFactor : 1, fillOpacity:0.2, id : group.id})
|
36
|
36
|
}
|
37
|
37
|
|
38
|
38
|
function sugArr(sug, z) {
|
|
@@ -141,6 +141,60 @@ function openStat(id, ll) {
|
141
|
141
|
xmlhttp.send();
|
142
|
142
|
}
|
143
|
143
|
|
|
144
|
+function renderGroup(grp, ll) {
|
|
145
|
+ var attrrows = {};
|
|
146
|
+
|
|
147
|
+ var content = document.createElement('div');
|
|
148
|
+ content.setAttribute("id", "nav")
|
|
149
|
+ var attrTbl = document.createElement('table');
|
|
150
|
+ attrTbl.setAttribute("id", "attr-tbl")
|
|
151
|
+ var suggD = document.createElement('table');
|
|
152
|
+ suggD.setAttribute("id", "sugg")
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+ content.innerHTML = "Relation <a onmouseover='groupHl( " + grp.id + ")' onmouseout='groupUnHl( " + grp.id + ")' target='_blank' href='https://www.openstreetmap.org/relation/" + grp.osmid + "'>" + grp.osmid + "</a>";
|
|
156
|
+
|
|
157
|
+ content.appendChild(attrTbl);
|
|
158
|
+ content.appendChild(suggD);
|
|
159
|
+
|
|
160
|
+ var tbody = document.createElement('tbody');
|
|
161
|
+ attrTbl.appendChild(tbody);
|
|
162
|
+
|
|
163
|
+ for (var key in grp.stations) {
|
|
164
|
+ //var row = document.createElement('tr');
|
|
165
|
+ //var col1 = document.createElement('td');
|
|
166
|
+ //var col2 = document.createElement('td');
|
|
167
|
+ //tbody.appendChild(row);
|
|
168
|
+ //row.appendChild(col1);
|
|
169
|
+ //row.appendChild(col2);
|
|
170
|
+ //col1.innerHTML = "<a href=\"https://wiki.openstreetmap.org/wiki/Key:" + key + "\" target=\"_blank\">" + key + "</a>";
|
|
171
|
+ //for (var i = 0; i < stat.attrs[key].length; i++) col2.innerHTML += "<span class='attrval'>" + stat.attrs[key][i] + "</span>"+ "<br>";
|
|
172
|
+ //attrrows[key] = row;
|
|
173
|
+ }
|
|
174
|
+
|
|
175
|
+ if (map.getZoom() < 18) {
|
|
176
|
+ map.setView(ll, 18, {animate: true});
|
|
177
|
+ }
|
|
178
|
+
|
|
179
|
+ L.popup({opacity: 0.8})
|
|
180
|
+ .setLatLng(ll)
|
|
181
|
+ .setContent(content)
|
|
182
|
+ .openOn(map);
|
|
183
|
+}
|
|
184
|
+
|
|
185
|
+function openGroup(id, ll) {
|
|
186
|
+ var xmlhttp = new XMLHttpRequest();
|
|
187
|
+ xmlhttp.onreadystatechange = function() {
|
|
188
|
+ if (this.readyState == 4 && this.status == 200) {
|
|
189
|
+ var content = JSON.parse(this.responseText);
|
|
190
|
+ renderGroup(content, ll);
|
|
191
|
+ }
|
|
192
|
+ };
|
|
193
|
+
|
|
194
|
+ xmlhttp.open("GET", "http://localhost:9090/group?id=" + id, true);
|
|
195
|
+ xmlhttp.send();
|
|
196
|
+}
|
|
197
|
+
|
144
|
198
|
function groupHl(id) {
|
145
|
199
|
if (!document.groupIdx[id]) return;
|
146
|
200
|
document.groupIdx[id].setStyle({
|
|
@@ -254,7 +308,7 @@ function render() {
|
254
|
308
|
|
255
|
309
|
if (map.getZoom() > 15) {
|
256
|
310
|
labelLayer.addLayer(L.featureGroup(labels));
|
257
|
|
- layer.addLayer(L.featureGroup(groups).on('click', function(a) { console.log(a.layer.options);}));
|
|
311
|
+ layer.addLayer(L.featureGroup(groups).on('click', function(a) { openGroup(a.layer.options.id, a.layer.getBounds().getCenter());}));
|
258
|
312
|
layer.addLayer(L.featureGroup(suggs).on('click', function(a) { openStat(a.layer.options.id, a.layer.getBounds().getCenter());}));
|
259
|
313
|
}
|
260
|
314
|
|