@raruto/leaflet-elevation 1.7.2 → 1.7.3
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/dist/leaflet-elevation.js +3 -3
- package/dist/leaflet-elevation.js.map +1 -1
- package/dist/leaflet-elevation.min.js +1 -1
- package/dist/leaflet-elevation.min.js.map +1 -1
- package/libs/leaflet-gpxgroup.js +45 -39
- package/libs/leaflet-gpxgroup.min.js +14 -13
- package/package.json +1 -1
- package/src/control.js +3 -3
package/libs/leaflet-gpxgroup.js
CHANGED
|
@@ -100,11 +100,10 @@ L.control.layersLegend = function(baseLayers, overlays, options) {
|
|
|
100
100
|
return new L.Control.LayersLegend(baseLayers, overlays, options);
|
|
101
101
|
};
|
|
102
102
|
|
|
103
|
-
L.
|
|
103
|
+
L.GeoJSON.include(L.Mixin.Selectable);
|
|
104
104
|
|
|
105
105
|
L.GpxGroup = L.Class.extend({
|
|
106
106
|
options: {
|
|
107
|
-
async: true,
|
|
108
107
|
highlight: {
|
|
109
108
|
color: '#ff0',
|
|
110
109
|
opacity: 1,
|
|
@@ -125,7 +124,6 @@ L.GpxGroup = L.Class.extend({
|
|
|
125
124
|
elevation: true,
|
|
126
125
|
elevation_options: {
|
|
127
126
|
theme: 'yellow-theme',
|
|
128
|
-
// width: 500,
|
|
129
127
|
detachedView: true,
|
|
130
128
|
elevationDiv: '#elevation-div',
|
|
131
129
|
},
|
|
@@ -133,14 +131,6 @@ L.GpxGroup = L.Class.extend({
|
|
|
133
131
|
distanceMarkers_options: {
|
|
134
132
|
lazy: true
|
|
135
133
|
},
|
|
136
|
-
marker_options: {
|
|
137
|
-
startIconUrl: null,
|
|
138
|
-
endIconUrl: null,
|
|
139
|
-
shadowUrl: null,
|
|
140
|
-
},
|
|
141
|
-
gpx_options: {
|
|
142
|
-
parseElements: ["track", "route"],
|
|
143
|
-
}
|
|
144
134
|
},
|
|
145
135
|
|
|
146
136
|
initialize: function(tracks, options) {
|
|
@@ -190,10 +180,38 @@ L.GpxGroup = L.Class.extend({
|
|
|
190
180
|
},
|
|
191
181
|
|
|
192
182
|
addTrack: function(track) {
|
|
193
|
-
|
|
183
|
+
fetch(track).then(response => {
|
|
184
|
+
if (response.ok) {
|
|
185
|
+
response.text().then(doc => {
|
|
186
|
+
let geojson;
|
|
187
|
+
doc = doc.trim();
|
|
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 ? name[0].textContent : '';
|
|
198
|
+
} catch (e) {
|
|
199
|
+
try {
|
|
200
|
+
geojson = JSON.parse(doc.toString());
|
|
201
|
+
geojson.name = geojson.name || '';
|
|
202
|
+
} catch (e) {
|
|
203
|
+
console.warn("Error parsing track: " + track);
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
this._loadRoute(geojson);
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
});
|
|
194
210
|
},
|
|
195
211
|
|
|
196
212
|
_loadRoute: function(data) {
|
|
213
|
+
if (!data) return;
|
|
214
|
+
|
|
197
215
|
var colors = this._uniqueColors(this._tracks.length);
|
|
198
216
|
var color = colors[this._count++];
|
|
199
217
|
|
|
@@ -204,24 +222,23 @@ L.GpxGroup = L.Class.extend({
|
|
|
204
222
|
distanceMarkers: this.options.distanceMarkers_options,
|
|
205
223
|
};
|
|
206
224
|
|
|
207
|
-
var route =
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
225
|
+
var route = L.geoJson(data, {
|
|
226
|
+
name: data.name || '',
|
|
227
|
+
style: (feature) => line_style,
|
|
228
|
+
distanceMarkers: line_style.distanceMarkers,
|
|
229
|
+
originalStyle: line_style,
|
|
212
230
|
});
|
|
213
231
|
|
|
214
|
-
route.originalStyle = line_style;
|
|
215
|
-
|
|
216
|
-
route.on('addline', L.bind(this._onRouteAddLine, this, route));
|
|
217
|
-
route.on('loaded', L.bind(this._onRouteLoaded, this, route));
|
|
218
|
-
|
|
219
232
|
route.addTo(this._layers);
|
|
220
233
|
this._routes[route._leaflet_id] = route;
|
|
234
|
+
|
|
235
|
+
route.eachLayer((layer) => this._onRouteLayer(route, layer));
|
|
236
|
+
this._onRouteLoaded(route);
|
|
237
|
+
|
|
221
238
|
},
|
|
222
239
|
|
|
223
|
-
|
|
224
|
-
var polyline =
|
|
240
|
+
_onRouteLayer: function(route, layer) {
|
|
241
|
+
var polyline = layer;
|
|
225
242
|
|
|
226
243
|
route.on('selected', L.bind(this._onRouteSelected, this, route, polyline));
|
|
227
244
|
|
|
@@ -229,7 +246,7 @@ L.GpxGroup = L.Class.extend({
|
|
|
229
246
|
polyline.on('mouseout', L.bind(this._onRouteMouseOut, this, route, polyline));
|
|
230
247
|
polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
|
|
231
248
|
|
|
232
|
-
polyline.bindTooltip(route.
|
|
249
|
+
polyline.bindTooltip(route.options.name, {
|
|
233
250
|
direction: 'auto',
|
|
234
251
|
sticky: true,
|
|
235
252
|
});
|
|
@@ -243,7 +260,7 @@ L.GpxGroup = L.Class.extend({
|
|
|
243
260
|
},
|
|
244
261
|
|
|
245
262
|
unhighlight: function(route, polyline) {
|
|
246
|
-
polyline.setStyle(route.originalStyle);
|
|
263
|
+
polyline.setStyle(route.options.originalStyle);
|
|
247
264
|
if (this.options.distanceMarkers) {
|
|
248
265
|
polyline.removeDistanceMarkers();
|
|
249
266
|
}
|
|
@@ -285,7 +302,7 @@ L.GpxGroup = L.Class.extend({
|
|
|
285
302
|
|
|
286
303
|
_onRouteLoaded: function(route) {
|
|
287
304
|
if (this.options.legend) {
|
|
288
|
-
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.
|
|
305
|
+
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);
|
|
289
306
|
}
|
|
290
307
|
this.fire('route_loaded', {
|
|
291
308
|
route: route,
|
|
@@ -318,7 +335,7 @@ L.GpxGroup = L.Class.extend({
|
|
|
318
335
|
}
|
|
319
336
|
route.getLayers().forEach(function(layer) {
|
|
320
337
|
if (layer instanceof L.Polyline) {
|
|
321
|
-
elevation.addData(layer);
|
|
338
|
+
elevation.addData(layer, false);
|
|
322
339
|
layer.bringToFront();
|
|
323
340
|
}
|
|
324
341
|
});
|
|
@@ -357,17 +374,6 @@ L.GpxGroup = L.Class.extend({
|
|
|
357
374
|
}
|
|
358
375
|
},
|
|
359
376
|
|
|
360
|
-
_get: function(url, callback) {
|
|
361
|
-
var xhr = new XMLHttpRequest();
|
|
362
|
-
xhr.open("GET", url);
|
|
363
|
-
xhr.onreadystatechange = function() {
|
|
364
|
-
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
|
365
|
-
callback(xhr.response);
|
|
366
|
-
}
|
|
367
|
-
};
|
|
368
|
-
xhr.send();
|
|
369
|
-
},
|
|
370
|
-
|
|
371
377
|
_uniqueColors: function(count) {
|
|
372
378
|
if (count === 0) return [];
|
|
373
379
|
if (count === 1) return ['#0000ff'];
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
'use strict';L.Mixin.Selectable={includes:L.Mixin.Events,setSelected:function(s){var selected=!!s;if(this._selected!==selected){this._selected=selected;this.fire("selected")}},isSelected:function(){return!!this._selected}};
|
|
2
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
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.
|
|
5
|
-
L.GpxGroup=L.Class.extend({options:{
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
polyline)
|
|
12
|
-
|
|
13
|
-
route.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
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;break}return[r*255,g*255,b*255]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+
|
|
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?name[0].textContent:""}catch(e){try{geojson=JSON.parse(doc.toString());geojson.name=geojson.name||""}catch(e){console.warn("Error parsing track: "+track)}}this._loadRoute(geojson)})})},_loadRoute:function(data){if(!data)return;var colors=this._uniqueColors(this._tracks.length);
|
|
9
|
+
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});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",
|
|
10
|
+
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,polyline){polyline.setStyle(this.options.highlight);if(this.options.distanceMarkers)polyline.addDistanceMarkers()},unhighlight:function(route,
|
|
11
|
+
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",{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){if(!route.isSelected())this.unhighlight(route,polyline);
|
|
12
|
+
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">'+'<line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.originalStyle.color+
|
|
13
|
+
'" 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=elevation.getContainer();var route=this.getSelection();elevation.clear();if(route&&
|
|
14
|
+
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]);this._map.flyToBounds(e.layer.getBounds())}var parent=e.input.closest(".leaflet-control-layers-list");
|
|
15
|
+
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[];if(count===1)return["#0000ff"];var increment=1/count;var colors=[];for(var i=0;i<count;++i){var hue=i*
|
|
16
|
+
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;break}return[r*255,g*255,b*255]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+
|
|
17
|
+
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)};
|
package/package.json
CHANGED
package/src/control.js
CHANGED
|
@@ -17,13 +17,13 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
|
|
|
17
17
|
__TOGEOJSON: 'https://unpkg.com/@tmcw/togeojson@4.3.0/dist/togeojson.umd.js',
|
|
18
18
|
__LGEOMUTIL: 'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
|
|
19
19
|
__LALMOSTOVER: 'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
|
|
20
|
-
__LDISTANCEM: 'https://unpkg.com/@raruto/leaflet-elevation@1.7.
|
|
20
|
+
__LDISTANCEM: 'https://unpkg.com/@raruto/leaflet-elevation@1.7.3/libs/leaflet-distance-marker.min.js',
|
|
21
21
|
|
|
22
22
|
/*
|
|
23
23
|
* Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
|
|
24
24
|
*/
|
|
25
25
|
addData: function(d, layer) {
|
|
26
|
-
if (
|
|
26
|
+
if (typeof layer === "undefined" && d.on) {
|
|
27
27
|
layer = d;
|
|
28
28
|
}
|
|
29
29
|
Elevation._d3LazyLoader = _.lazyLoader(
|
|
@@ -448,7 +448,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
|
|
|
448
448
|
*/
|
|
449
449
|
_addGPXData: function(coords) {
|
|
450
450
|
_.each(coords, point => {
|
|
451
|
-
this._addPoint(point.lat, point.lng, point.meta.ele);
|
|
451
|
+
this._addPoint(point.lat, point.lng, typeof point.alt !== "undefined" ? point.alt : point.meta.ele);
|
|
452
452
|
this._fireEvt("elepoint_added", { point: point, index: this._data.length - 1 });
|
|
453
453
|
});
|
|
454
454
|
this._fireEvt("eletrack_added", { coords: coords, index: this._data.length - 1 });
|