@raruto/leaflet-elevation 1.8.4 → 1.8.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/leaflet-elevation.css +16 -1
- package/dist/leaflet-elevation.js +515 -568
- package/dist/leaflet-elevation.js.map +1 -1
- package/dist/leaflet-elevation.min.css +1 -1
- package/dist/leaflet-elevation.min.js +2 -2
- package/dist/leaflet-elevation.min.js.map +1 -1
- package/libs/leaflet-gpxgroup.js +69 -186
- package/libs/leaflet-gpxgroup.min.js +1 -17
- package/package.json +1 -1
- package/src/control.js +377 -236
- package/src/index.css +16 -1
- package/src/index.js +14 -0
- package/src/utils.js +0 -218
- package/images/remove.svg +0 -1
package/libs/leaflet-gpxgroup.js
CHANGED
|
@@ -69,36 +69,25 @@ L.Mixin.Selection = {
|
|
|
69
69
|
|
|
70
70
|
L.Control.LayersLegend = L.Control.Layers.extend({
|
|
71
71
|
_onInputClick: function() {
|
|
72
|
-
var inputs = this._layerControlInputs,
|
|
73
|
-
input, layer;
|
|
74
|
-
var addedLayers = [],
|
|
75
|
-
removedLayers = [];
|
|
76
|
-
|
|
77
72
|
this._handlingClick = true;
|
|
78
73
|
|
|
79
|
-
|
|
80
|
-
input = inputs[i];
|
|
81
|
-
layer = this._getLayer(input.layerId).layer;
|
|
82
|
-
|
|
74
|
+
this._layerControlInputs.reduceRight((_,input) => {
|
|
83
75
|
if (input.checked) {
|
|
84
76
|
this._map.fireEvent("legend_selected", {
|
|
85
|
-
layer: layer,
|
|
77
|
+
layer: this._getLayer(input.layerId).layer,
|
|
86
78
|
input: input,
|
|
87
79
|
}, true);
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
80
|
+
return input;
|
|
81
|
+
}
|
|
82
|
+
}, 0);
|
|
91
83
|
|
|
92
84
|
this._handlingClick = false;
|
|
93
85
|
|
|
94
86
|
this._refocusOnMap();
|
|
95
|
-
|
|
96
87
|
}
|
|
97
88
|
});
|
|
98
89
|
|
|
99
|
-
L.control.layersLegend =
|
|
100
|
-
return new L.Control.LayersLegend(baseLayers, overlays, options);
|
|
101
|
-
};
|
|
90
|
+
L.control.layersLegend = (baseLayers, overlays, options) => new L.Control.LayersLegend(baseLayers, overlays, options);
|
|
102
91
|
|
|
103
92
|
L.GeoJSON.include(L.Mixin.Selectable);
|
|
104
93
|
|
|
@@ -124,7 +113,7 @@ L.GpxGroup = L.Class.extend({
|
|
|
124
113
|
elevation: true,
|
|
125
114
|
elevation_options: {
|
|
126
115
|
theme: 'yellow-theme',
|
|
127
|
-
|
|
116
|
+
detached: true,
|
|
128
117
|
elevationDiv: '#elevation-div',
|
|
129
118
|
},
|
|
130
119
|
distanceMarkers: true,
|
|
@@ -137,29 +126,19 @@ L.GpxGroup = L.Class.extend({
|
|
|
137
126
|
|
|
138
127
|
L.Util.setOptions(this, options);
|
|
139
128
|
|
|
140
|
-
this._count
|
|
129
|
+
this._count = 0;
|
|
141
130
|
this._loadedCount = 0;
|
|
142
|
-
this._tracks
|
|
143
|
-
this.
|
|
144
|
-
this.
|
|
145
|
-
this.
|
|
146
|
-
this.
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
});
|
|
154
|
-
marker.bindTooltip(poi.name, {
|
|
155
|
-
direction: 'auto'
|
|
156
|
-
});
|
|
157
|
-
marker.addTo(this._markers);
|
|
158
|
-
}, this);
|
|
159
|
-
|
|
160
|
-
if (typeof L.DistanceMarkers === "undefined") {
|
|
161
|
-
this.options.distanceMarkers = false;
|
|
162
|
-
}
|
|
131
|
+
this._tracks = tracks;
|
|
132
|
+
this._layers = L.featureGroup();
|
|
133
|
+
this._markers = L.featureGroup();
|
|
134
|
+
this._elevation = L.control.elevation(this.options.elevation_options);
|
|
135
|
+
this._legend = L.control.layersLegend(null, null, this.options.legend_options);
|
|
136
|
+
|
|
137
|
+
this.options.points.forEach((poi) =>
|
|
138
|
+
L
|
|
139
|
+
.marker(poi.latlng, { icon: L.icon(this.options.points_options.icon) })
|
|
140
|
+
.bindTooltip(poi.name, { direction: 'auto' }).addTo(this._markers)
|
|
141
|
+
);
|
|
163
142
|
|
|
164
143
|
},
|
|
165
144
|
|
|
@@ -180,45 +159,22 @@ L.GpxGroup = L.Class.extend({
|
|
|
180
159
|
},
|
|
181
160
|
|
|
182
161
|
addTrack: function(track) {
|
|
183
|
-
fetch(track)
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
try {
|
|
190
|
-
let xml = (new DOMParser()).parseFromString(doc, "text/xml");
|
|
191
|
-
let type = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
|
|
192
|
-
let name = xml.getElementsByTagName('name');
|
|
193
|
-
if (!(type in toGeoJSON)) {
|
|
194
|
-
type = xml.documentElement.tagName == "TrainingCenterDatabase" ? 'tcx' : 'gpx';
|
|
195
|
-
}
|
|
196
|
-
geojson = toGeoJSON[type](xml);
|
|
197
|
-
geojson.name = name.length > 0 ? Array.from(name).find(tag => tag.parentElement.tagName == "trk").textContent : '';
|
|
198
|
-
} catch (e) {
|
|
199
|
-
try {
|
|
200
|
-
geojson = JSON.parse(doc.toString());
|
|
201
|
-
} catch (e) {
|
|
202
|
-
console.warn("Error parsing track: " + track);
|
|
203
|
-
}
|
|
204
|
-
}
|
|
205
|
-
if (!geojson.name) {
|
|
206
|
-
geojson.name = track.split('/').pop().split('#')[0].split('?')[0];
|
|
207
|
-
}
|
|
162
|
+
fetch(track)
|
|
163
|
+
.then(response => response.ok && response.text())
|
|
164
|
+
.then(text => this._elevation._parseFromString(text))
|
|
165
|
+
.then(geojson => {
|
|
166
|
+
if(geojson) {
|
|
167
|
+
geojson.name = geojson.name ?? (geojson[0] && geojson[0].properties.name) ?? track.split('/').pop().split('#')[0].split('?')[0];
|
|
208
168
|
this._loadRoute(geojson);
|
|
209
|
-
}
|
|
210
|
-
}
|
|
211
|
-
});
|
|
169
|
+
}
|
|
170
|
+
});
|
|
212
171
|
},
|
|
213
172
|
|
|
214
173
|
_loadRoute: function(data) {
|
|
215
174
|
if (!data) return;
|
|
216
175
|
|
|
217
|
-
var colors = this._uniqueColors(this._tracks.length);
|
|
218
|
-
var color = colors[this._count++];
|
|
219
|
-
|
|
220
176
|
var line_style = {
|
|
221
|
-
color:
|
|
177
|
+
color: this._uniqueColors(this._tracks.length)[this._count++],
|
|
222
178
|
opacity: 0.75,
|
|
223
179
|
weight: 5,
|
|
224
180
|
distanceMarkers: this.options.distanceMarkers_options,
|
|
@@ -232,15 +188,17 @@ L.GpxGroup = L.Class.extend({
|
|
|
232
188
|
filter: feature => feature.geometry.type != "Point",
|
|
233
189
|
});
|
|
234
190
|
|
|
235
|
-
|
|
236
|
-
this.
|
|
191
|
+
|
|
192
|
+
this._elevation.lazyLoad(this._elevation.__LGEOMUTIL).then(() => {
|
|
193
|
+
route.addTo(this._layers);
|
|
237
194
|
|
|
238
|
-
|
|
239
|
-
|
|
195
|
+
route.eachLayer((layer) => this._onEachRouteLayer(route, layer));
|
|
196
|
+
this._onEachRouteLoaded(route);
|
|
197
|
+
});
|
|
240
198
|
|
|
241
199
|
},
|
|
242
200
|
|
|
243
|
-
|
|
201
|
+
_onEachRouteLayer: function(route, layer) {
|
|
244
202
|
var polyline = layer;
|
|
245
203
|
|
|
246
204
|
route.on('selected', L.bind(this._onRouteSelected, this, route, polyline));
|
|
@@ -249,10 +207,25 @@ L.GpxGroup = L.Class.extend({
|
|
|
249
207
|
polyline.on('mouseout', L.bind(this._onRouteMouseOut, this, route, polyline));
|
|
250
208
|
polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
|
|
251
209
|
|
|
252
|
-
polyline.bindTooltip(route.options.name, {
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
210
|
+
polyline.bindTooltip(route.options.name, { direction: 'auto', sticky: true, });
|
|
211
|
+
},
|
|
212
|
+
|
|
213
|
+
_onEachRouteLoaded: function(route) {
|
|
214
|
+
if (this.options.legend) {
|
|
215
|
+
this._legend.addBaseLayer(route, '<svg id="legend_' + route._leaflet_id + '" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">' + '<line x1="0" x2="50" y1="5" y2="5" stroke="' + route.options.originalStyle.color + '" fill="transparent" stroke-width="5" /></svg>' + ' ' + route.options.name);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
this.fire('route_loaded', { route: route });
|
|
219
|
+
|
|
220
|
+
if (++this._loadedCount === this._tracks.length) {
|
|
221
|
+
this.fire('loaded');
|
|
222
|
+
if (this.options.flyToBounds) {
|
|
223
|
+
this._map.flyToBounds(this.getBounds(), { duration: 0.25, easeLinearity: 0.25, noMoveStart: true });
|
|
224
|
+
}
|
|
225
|
+
if (this.options.legend) {
|
|
226
|
+
this._legend.addTo(this._map);
|
|
227
|
+
}
|
|
228
|
+
}
|
|
256
229
|
},
|
|
257
230
|
|
|
258
231
|
highlight: function(route, polyline) {
|
|
@@ -277,20 +250,14 @@ L.GpxGroup = L.Class.extend({
|
|
|
277
250
|
L.DomUtil.get('legend_' + route._leaflet_id).parentNode.previousSibling.click();
|
|
278
251
|
}
|
|
279
252
|
}
|
|
280
|
-
this.fire('route_mouseover', {
|
|
281
|
-
route: route,
|
|
282
|
-
polyline: polyline
|
|
283
|
-
});
|
|
253
|
+
this.fire('route_mouseover', { route: route, polyline: polyline });
|
|
284
254
|
},
|
|
285
255
|
|
|
286
256
|
_onRouteMouseOut: function(route, polyline) {
|
|
287
257
|
if (!route.isSelected()) {
|
|
288
258
|
this.unhighlight(route, polyline);
|
|
289
259
|
}
|
|
290
|
-
this.fire('route_mouseout', {
|
|
291
|
-
route: route,
|
|
292
|
-
polyline: polyline
|
|
293
|
-
});
|
|
260
|
+
this.fire('route_mouseout', { route: route, polyline: polyline });
|
|
294
261
|
},
|
|
295
262
|
|
|
296
263
|
_onRouteClick: function(route, polyline) {
|
|
@@ -303,28 +270,6 @@ L.GpxGroup = L.Class.extend({
|
|
|
303
270
|
}
|
|
304
271
|
},
|
|
305
272
|
|
|
306
|
-
_onRouteLoaded: function(route) {
|
|
307
|
-
if (this.options.legend) {
|
|
308
|
-
this._legend.addBaseLayer(route, '<svg id="legend_' + route._leaflet_id + '" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">' + '<line x1="0" x2="50" y1="5" y2="5" stroke="' + route.options.originalStyle.color + '" fill="transparent" stroke-width="5" /></svg>' + ' ' + route.options.name);
|
|
309
|
-
}
|
|
310
|
-
this.fire('route_loaded', {
|
|
311
|
-
route: route,
|
|
312
|
-
});
|
|
313
|
-
if (++this._loadedCount === this._tracks.length) {
|
|
314
|
-
this.fire('loaded');
|
|
315
|
-
if (this.options.flyToBounds) {
|
|
316
|
-
this._map.flyToBounds(this.getBounds(), {
|
|
317
|
-
duration: 0.25,
|
|
318
|
-
easeLinearity: 0.25,
|
|
319
|
-
noMoveStart: true
|
|
320
|
-
});
|
|
321
|
-
}
|
|
322
|
-
if (this.options.legend) {
|
|
323
|
-
this._legend.addTo(this._map);
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
},
|
|
327
|
-
|
|
328
273
|
_onSelectionChanged: function(e) {
|
|
329
274
|
var elevation = this._elevation;
|
|
330
275
|
var eleDiv = elevation.getContainer();
|
|
@@ -350,8 +295,9 @@ L.GpxGroup = L.Class.extend({
|
|
|
350
295
|
},
|
|
351
296
|
|
|
352
297
|
_onLegendSelected: function(e) {
|
|
353
|
-
var
|
|
298
|
+
var parent = e.input.closest('.leaflet-control-layers-list');
|
|
354
299
|
var route = e.layer;
|
|
300
|
+
|
|
355
301
|
if (!route.isSelected()) {
|
|
356
302
|
this.setSelection(route);
|
|
357
303
|
for (var i in route._layers) {
|
|
@@ -360,88 +306,27 @@ L.GpxGroup = L.Class.extend({
|
|
|
360
306
|
this._map.flyToBounds(e.layer.getBounds());
|
|
361
307
|
}
|
|
362
308
|
|
|
363
|
-
|
|
364
|
-
var offset = e.input.offsetTop - parent.offsetTop;
|
|
365
|
-
|
|
366
|
-
parent.scroll({
|
|
367
|
-
top: offset || 0,
|
|
368
|
-
behavior: 'smooth'
|
|
369
|
-
}
|
|
370
|
-
);
|
|
309
|
+
parent.scroll({ top: (e.input.offsetTop - parent.offsetTop) || 0, behavior: 'smooth' });
|
|
371
310
|
|
|
372
|
-
|
|
373
|
-
var
|
|
374
|
-
|
|
375
|
-
legend.
|
|
376
|
-
|
|
377
|
-
}
|
|
311
|
+
this._layers.eachLayer(layer => {
|
|
312
|
+
var legend = L.DomUtil.get('legend_' + layer._leaflet_id);
|
|
313
|
+
legend.querySelector("line").style.stroke = layer.isSelected() ? this.options.highlight.color : "";
|
|
314
|
+
legend.parentNode.style.fontWeight = layer.isSelected() ? "700" : "";
|
|
315
|
+
});
|
|
378
316
|
},
|
|
379
317
|
|
|
380
318
|
_uniqueColors: function(count) {
|
|
381
|
-
|
|
382
|
-
if (count === 1) return ['#0000ff'];
|
|
383
|
-
var increment = 1 / count;
|
|
384
|
-
var colors = [];
|
|
385
|
-
for (var i = 0; i < count; ++i) {
|
|
386
|
-
var hue = i * increment;
|
|
387
|
-
var rgb = this._hsvToRgb(hue, 1, 0.7);
|
|
388
|
-
var hex = '#' + this._rgbToHex(rgb[0], rgb[1], rgb[2]);
|
|
389
|
-
colors.push(hex);
|
|
390
|
-
}
|
|
391
|
-
return colors;
|
|
319
|
+
return count === 1 ? ['#0000ff'] : new Array(count).fill(null).map((_,i) => this._hsvToHex(i * (1 / count), 1, 0.7));
|
|
392
320
|
},
|
|
393
321
|
|
|
394
|
-
|
|
395
|
-
var r, g, b;
|
|
396
|
-
|
|
322
|
+
_hsvToHex: function(h, s, v) {
|
|
397
323
|
var i = Math.floor(h * 6);
|
|
398
324
|
var f = h * 6 - i;
|
|
399
325
|
var p = v * (1 - s);
|
|
400
326
|
var q = v * (1 - f * s);
|
|
401
327
|
var t = v * (1 - (1 - f) * s);
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
case 0:
|
|
405
|
-
r = v;
|
|
406
|
-
g = t;
|
|
407
|
-
b = p;
|
|
408
|
-
break;
|
|
409
|
-
case 1:
|
|
410
|
-
r = q;
|
|
411
|
-
g = v;
|
|
412
|
-
b = p;
|
|
413
|
-
break;
|
|
414
|
-
case 2:
|
|
415
|
-
r = p;
|
|
416
|
-
g = v;
|
|
417
|
-
b = t;
|
|
418
|
-
break;
|
|
419
|
-
case 3:
|
|
420
|
-
r = p;
|
|
421
|
-
g = q;
|
|
422
|
-
b = v;
|
|
423
|
-
break;
|
|
424
|
-
case 4:
|
|
425
|
-
r = t;
|
|
426
|
-
g = p;
|
|
427
|
-
b = v;
|
|
428
|
-
break;
|
|
429
|
-
case 5:
|
|
430
|
-
r = v;
|
|
431
|
-
g = p;
|
|
432
|
-
b = q;
|
|
433
|
-
break;
|
|
434
|
-
}
|
|
435
|
-
|
|
436
|
-
return [r * 255, g * 255, b * 255];
|
|
437
|
-
},
|
|
438
|
-
|
|
439
|
-
_rgbToHex: function(r, g, b) {
|
|
440
|
-
return this._byteToHex(r) + this._byteToHex(g) + this._byteToHex(b);
|
|
441
|
-
},
|
|
442
|
-
|
|
443
|
-
_byteToHex: function(n) {
|
|
444
|
-
return ((n >> 4) & 0x0F).toString(16) + (n & 0x0F).toString(16);
|
|
328
|
+
var rgb = { 0: [v, t, p], 1: [q, v, p], 2: [p, v, t], 3: [p, q, v], 4: [t, p, v], 5: [v, p, q] }[i % 6];
|
|
329
|
+
return rgb.map(d => d * 255).reduce((hex, byte) => hex + ((byte >> 4) & 0x0F).toString(16) + (byte & 0x0F).toString(16), "#");
|
|
445
330
|
},
|
|
446
331
|
|
|
447
332
|
removeFrom: function(map) {
|
|
@@ -453,6 +338,4 @@ L.GpxGroup = L.Class.extend({
|
|
|
453
338
|
L.GpxGroup.include(L.Mixin.Events);
|
|
454
339
|
L.GpxGroup.include(L.Mixin.Selection);
|
|
455
340
|
|
|
456
|
-
L.gpxGroup =
|
|
457
|
-
return new L.GpxGroup(tracks, options);
|
|
458
|
-
};
|
|
341
|
+
L.gpxGroup = (tracks, options) => new L.GpxGroup(tracks, options);
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
|
|
2
|
-
L.Mixin.Selection={includes:L.Mixin.Events,getSelection:function(){return this._selected},setSelection:function(item){if(this._selected===item){if(item!==null){item.setSelected(!item.isSelected());if(!item.isSelected())this._selected=null}}else{if(this._selected)this._selected.setSelected(false);this._selected=item;if(this._selected)this._selected.setSelected(true)}this.fire("selection_changed")}};
|
|
3
|
-
L.Control.LayersLegend=L.Control.Layers.extend({_onInputClick:function(){var inputs=this._layerControlInputs,input,layer;var addedLayers=[],removedLayers=[];this._handlingClick=true;for(var i=inputs.length-1;i>=0;i--){input=inputs[i];layer=this._getLayer(input.layerId).layer;if(input.checked)this._map.fireEvent("legend_selected",{layer:layer,input:input},true)}this._handlingClick=false;this._refocusOnMap()}});
|
|
4
|
-
L.control.layersLegend=function(baseLayers,overlays,options){return new L.Control.LayersLegend(baseLayers,overlays,options)};L.GeoJSON.include(L.Mixin.Selectable);
|
|
5
|
-
L.GpxGroup=L.Class.extend({options:{highlight:{color:"#ff0",opacity:1},points:[],points_options:{icon:{iconUrl:"../images/elevation-poi.png",iconSize:[12,12]}},flyToBounds:true,legend:false,legend_options:{position:"topright",collapsed:false},elevation:true,elevation_options:{theme:"yellow-theme",detachedView:true,elevationDiv:"#elevation-div"},distanceMarkers:true,distanceMarkers_options:{lazy:true}},initialize:function(tracks,options){L.Util.setOptions(this,options);this._count=0;this._loadedCount=
|
|
6
|
-
0;this._tracks=tracks;this._routes={};this._layers=L.featureGroup();this._markers=L.featureGroup();this._elevation=L.control.elevation(this.options.elevation_options);this._legend=L.control.layersLegend(null,null,this.options.legend_options);var icon=L.icon(this.options.points_options.icon);this.options.points.forEach(function(poi){var marker=L.marker(poi.latlng,{icon:icon});marker.bindTooltip(poi.name,{direction:"auto"});marker.addTo(this._markers)},this);if(typeof L.DistanceMarkers==="undefined")this.options.distanceMarkers=
|
|
7
|
-
false},getBounds:function(){return this._layers.getBounds()},addTo:function(map){this._layers.addTo(map);this._markers.addTo(map);this._map=map;this.on("selection_changed",this._onSelectionChanged,this);this._map.on("legend_selected",this._onLegendSelected,this);this._tracks.forEach(this.addTrack,this)},addTrack:function(track){fetch(track).then((response)=>{if(response.ok)response.text().then((doc)=>{let geojson;doc=doc.trim();try{let xml=(new DOMParser).parseFromString(doc,"text/xml");let type=
|
|
8
|
-
xml.documentElement.tagName.toLowerCase();let name=xml.getElementsByTagName("name");if(!(type in toGeoJSON))type=xml.documentElement.tagName=="TrainingCenterDatabase"?"tcx":"gpx";geojson=toGeoJSON[type](xml);geojson.name=name.length>0?Array.from(name).find((tag)=>tag.parentElement.tagName=="trk").textContent:""}catch(e){try{geojson=JSON.parse(doc.toString())}catch(e){console.warn("Error parsing track: "+track)}}if(!geojson.name)geojson.name=track.split("/").pop().split("#")[0].split("?")[0];this._loadRoute(geojson)})})},
|
|
9
|
-
_loadRoute:function(data){if(!data)return;var colors=this._uniqueColors(this._tracks.length);var color=colors[this._count++];var line_style={color:color,opacity:.75,weight:5,distanceMarkers:this.options.distanceMarkers_options};var route=L.geoJson(data,{name:data.name||"",style:(feature)=>line_style,distanceMarkers:line_style.distanceMarkers,originalStyle:line_style,filter:(feature)=>feature.geometry.type!="Point"});route.addTo(this._layers);this._routes[route._leaflet_id]=route;route.eachLayer((layer)=>
|
|
10
|
-
this._onRouteLayer(route,layer));this._onRouteLoaded(route)},_onRouteLayer:function(route,layer){var polyline=layer;route.on("selected",L.bind(this._onRouteSelected,this,route,polyline));polyline.on("mouseover",L.bind(this._onRouteMouseOver,this,route,polyline));polyline.on("mouseout",L.bind(this._onRouteMouseOut,this,route,polyline));polyline.on("click",L.bind(this._onRouteClick,this,route,polyline));polyline.bindTooltip(route.options.name,{direction:"auto",sticky:true})},highlight:function(route,
|
|
11
|
-
polyline){polyline.setStyle(this.options.highlight);if(this.options.distanceMarkers)polyline.addDistanceMarkers()},unhighlight:function(route,polyline){polyline.setStyle(route.options.originalStyle);if(this.options.distanceMarkers)polyline.removeDistanceMarkers()},_onRouteMouseOver:function(route,polyline){if(!route.isSelected()){this.highlight(route,polyline);if(this.options.legend){this.setSelection(route);L.DomUtil.get("legend_"+route._leaflet_id).parentNode.previousSibling.click()}}this.fire("route_mouseover",
|
|
12
|
-
{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){if(!route.isSelected())this.unhighlight(route,polyline);this.fire("route_mouseout",{route:route,polyline:polyline})},_onRouteClick:function(route,polyline){this.setSelection(route)},_onRouteSelected:function(route,polyline){if(!route.isSelected())this.unhighlight(route,polyline)},_onRouteLoaded:function(route){if(this.options.legend)this._legend.addBaseLayer(route,'<svg id="legend_'+route._leaflet_id+'" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg">'+
|
|
13
|
-
'<line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.originalStyle.color+'" fill="transparent" stroke-width="5" /></svg>'+" "+route.options.name);this.fire("route_loaded",{route:route});if(++this._loadedCount===this._tracks.length){this.fire("loaded");if(this.options.flyToBounds)this._map.flyToBounds(this.getBounds(),{duration:.25,easeLinearity:.25,noMoveStart:true});if(this.options.legend)this._legend.addTo(this._map)}},_onSelectionChanged:function(e){var elevation=this._elevation;var eleDiv=
|
|
14
|
-
elevation.getContainer();var route=this.getSelection();elevation.clear();if(route&&route.isSelected()){if(!eleDiv)elevation.loadChart(this._map);route.getLayers().forEach(function(layer){if(layer instanceof L.Polyline){elevation.addData(layer,false);layer.bringToFront()}})}else if(eleDiv)elevation.remove()},_onLegendSelected:function(e){var layers=this._layers._layers;var route=e.layer;if(!route.isSelected()){this.setSelection(route);for(var i in route._layers)this.highlight(route,route._layers[i]);
|
|
15
|
-
this._map.flyToBounds(e.layer.getBounds())}var parent=e.input.closest(".leaflet-control-layers-list");var offset=e.input.offsetTop-parent.offsetTop;parent.scroll({top:offset||0,behavior:"smooth"});for(var j in layers){var selected=layers[j].isSelected();var legend=L.DomUtil.get("legend_"+layers[j]._leaflet_id);legend.querySelector("line").style.stroke=selected?this.options.highlight.color:"";legend.parentNode.style.fontWeight=selected?"700":""}},_uniqueColors:function(count){if(count===0)return[];
|
|
16
|
-
if(count===1)return["#0000ff"];var increment=1/count;var colors=[];for(var i=0;i<count;++i){var hue=i*increment;var rgb=this._hsvToRgb(hue,1,.7);var hex="#"+this._rgbToHex(rgb[0],rgb[1],rgb[2]);colors.push(hex)}return colors},_hsvToRgb:function(h,s,v){var r,g,b;var i=Math.floor(h*6);var f=h*6-i;var p=v*(1-s);var q=v*(1-f*s);var t=v*(1-(1-f)*s);switch(i%6){case 0:r=v;g=t;b=p;break;case 1:r=q;g=v;b=p;break;case 2:r=p;g=v;b=t;break;case 3:r=p;g=q;b=v;break;case 4:r=t;g=p;b=v;break;case 5:r=v;g=p;b=q;
|
|
17
|
-
break}return[r*255,g*255,b*255]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+this._byteToHex(b)},_byteToHex:function(n){return(n>>4&15).toString(16)+(n&15).toString(16)},removeFrom:function(map){this._layers.removeFrom(map)}});L.GpxGroup.include(L.Mixin.Events);L.GpxGroup.include(L.Mixin.Selection);L.gpxGroup=function(tracks,options){return new L.GpxGroup(tracks,options)};
|
|
1
|
+
L.Mixin.Selectable={includes:L.Mixin.Events,setSelected:function(s){var selected=!!s;this._selected!==selected&&(this._selected=selected,this.fire("selected"))},isSelected:function(){return!!this._selected}},L.Mixin.Selection={includes:L.Mixin.Events,getSelection:function(){return this._selected},setSelection:function(item){this._selected===item?null!==item&&(item.setSelected(!item.isSelected()),item.isSelected()||(this._selected=null)):(this._selected&&this._selected.setSelected(!1),this._selected=item,this._selected&&this._selected.setSelected(!0)),this.fire("selection_changed")}},L.Control.LayersLegend=L.Control.Layers.extend({_onInputClick:function(){var inputs=this._layerControlInputs,input,layer,addedLayers=[],removedLayers=[];this._handlingClick=!0;for(var i=inputs.length-1;i>=0;i--)input=inputs[i],layer=this._getLayer(input.layerId).layer,input.checked&&this._map.fireEvent("legend_selected",{layer:layer,input:input},!0);this._handlingClick=!1,this._refocusOnMap()}}),L.control.layersLegend=function(baseLayers,overlays,options){return new L.Control.LayersLegend(baseLayers,overlays,options)},L.GeoJSON.include(L.Mixin.Selectable),L.GpxGroup=L.Class.extend({options:{highlight:{color:"#ff0",opacity:1},points:[],points_options:{icon:{iconUrl:"../images/elevation-poi.png",iconSize:[12,12]}},flyToBounds:!0,legend:!1,legend_options:{position:"topright",collapsed:!1},elevation:!0,elevation_options:{theme:"yellow-theme",detachedView:!0,elevationDiv:"#elevation-div"},distanceMarkers:!0,distanceMarkers_options:{lazy:!0}},initialize:function(tracks,options){L.Util.setOptions(this,options),this._count=0,this._loadedCount=0,this._tracks=tracks,this._routes={},this._layers=L.featureGroup(),this._markers=L.featureGroup(),this._elevation=L.control.elevation(this.options.elevation_options),this._legend=L.control.layersLegend(null,null,this.options.legend_options);var icon=L.icon(this.options.points_options.icon);this.options.points.forEach((function(poi){var marker=L.marker(poi.latlng,{icon:icon});marker.bindTooltip(poi.name,{direction:"auto"}),marker.addTo(this._markers)}),this),void 0===L.DistanceMarkers&&(this.options.distanceMarkers=!1)},getBounds:function(){return this._layers.getBounds()},addTo:function(map){this._layers.addTo(map),this._markers.addTo(map),this._map=map,this.on("selection_changed",this._onSelectionChanged,this),this._map.on("legend_selected",this._onLegendSelected,this),this._tracks.forEach(this.addTrack,this)},addTrack:function(track){fetch(track).then(response=>{response.ok&&response.text().then(doc=>{let geojson;doc=doc.trim();try{let xml=(new DOMParser).parseFromString(doc,"text/xml"),type=xml.documentElement.tagName.toLowerCase(),name=xml.getElementsByTagName("name");type in toGeoJSON||(type="TrainingCenterDatabase"==xml.documentElement.tagName?"tcx":"gpx"),geojson=toGeoJSON[type](xml),geojson.name=name.length>0?Array.from(name).find(tag=>"trk"==tag.parentElement.tagName).textContent:""}catch(e){try{geojson=JSON.parse(doc.toString())}catch(e){console.warn("Error parsing track: "+track)}}geojson.name||(geojson.name=track.split("/").pop().split("#")[0].split("?")[0]),this._loadRoute(geojson)})})},_loadRoute:function(data){if(data){var colors,color,line_style={color:this._uniqueColors(this._tracks.length)[this._count++],opacity:.75,weight:5,distanceMarkers:this.options.distanceMarkers_options},route=L.geoJson(data,{name:data.name||"",style:feature=>line_style,distanceMarkers:line_style.distanceMarkers,originalStyle:line_style,filter:feature=>"Point"!=feature.geometry.type});route.addTo(this._layers),this._routes[route._leaflet_id]=route,route.eachLayer(layer=>this._onRouteLayer(route,layer)),this._onRouteLoaded(route)}},_onRouteLayer:function(route,layer){var polyline=layer;route.on("selected",L.bind(this._onRouteSelected,this,route,polyline)),polyline.on("mouseover",L.bind(this._onRouteMouseOver,this,route,polyline)),polyline.on("mouseout",L.bind(this._onRouteMouseOut,this,route,polyline)),polyline.on("click",L.bind(this._onRouteClick,this,route,polyline)),polyline.bindTooltip(route.options.name,{direction:"auto",sticky:!0})},highlight:function(route,polyline){polyline.setStyle(this.options.highlight),this.options.distanceMarkers&&polyline.addDistanceMarkers()},unhighlight:function(route,polyline){polyline.setStyle(route.options.originalStyle),this.options.distanceMarkers&&polyline.removeDistanceMarkers()},_onRouteMouseOver:function(route,polyline){route.isSelected()||(this.highlight(route,polyline),this.options.legend&&(this.setSelection(route),L.DomUtil.get("legend_"+route._leaflet_id).parentNode.previousSibling.click())),this.fire("route_mouseover",{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline),this.fire("route_mouseout",{route:route,polyline:polyline})},_onRouteClick:function(route,polyline){this.setSelection(route)},_onRouteSelected:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline)},_onRouteLoaded:function(route){this.options.legend&&this._legend.addBaseLayer(route,'<svg id="legend_'+route._leaflet_id+'" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.originalStyle.color+'" fill="transparent" stroke-width="5" /></svg> '+route.options.name),this.fire("route_loaded",{route:route}),++this._loadedCount===this._tracks.length&&(this.fire("loaded"),this.options.flyToBounds&&this._map.flyToBounds(this.getBounds(),{duration:.25,easeLinearity:.25,noMoveStart:!0}),this.options.legend&&this._legend.addTo(this._map))},_onSelectionChanged:function(e){var elevation=this._elevation,eleDiv=elevation.getContainer(),route=this.getSelection();elevation.clear(),route&&route.isSelected()?(eleDiv||elevation.loadChart(this._map),route.getLayers().forEach((function(layer){layer instanceof L.Polyline&&(elevation.addData(layer,!1),layer.bringToFront())}))):eleDiv&&elevation.remove()},_onLegendSelected:function(e){var layers=this._layers._layers,route=e.layer;if(!route.isSelected()){for(var i in this.setSelection(route),route._layers)this.highlight(route,route._layers[i]);this._map.flyToBounds(e.layer.getBounds())}var parent=e.input.closest(".leaflet-control-layers-list"),offset=e.input.offsetTop-parent.offsetTop;for(var j in parent.scroll({top:offset||0,behavior:"smooth"}),layers){var selected=layers[j].isSelected(),legend=L.DomUtil.get("legend_"+layers[j]._leaflet_id);legend.querySelector("line").style.stroke=selected?this.options.highlight.color:"",legend.parentNode.style.fontWeight=selected?"700":""}},_uniqueColors:function(count){if(0===count)return[];if(1===count)return["#0000ff"];for(var increment=1/count,colors=[],i=0;i<count;++i){var hue=i*increment,rgb=this._hsvToRgb(hue,1,.7),hex="#"+this._rgbToHex(rgb[0],rgb[1],rgb[2]);colors.push(hex)}return colors},_hsvToRgb:function(h,s,v){var r,g,b,i=Math.floor(6*h),f=6*h-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s);switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;case 5:r=v,g=p,b=q}return[255*r,255*g,255*b]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+this._byteToHex(b)},_byteToHex:function(n){return(n>>4&15).toString(16)+(15&n).toString(16)},removeFrom:function(map){this._layers.removeFrom(map)}}),L.GpxGroup.include(L.Mixin.Events),L.GpxGroup.include(L.Mixin.Selection),L.gpxGroup=function(tracks,options){return new L.GpxGroup(tracks,options)};
|
package/package.json
CHANGED