@raruto/leaflet-elevation 1.8.3 → 1.8.6

package/libs/leaflet-gpxgroup.js

@@ -69,36 +69,25 @@ L.Mixin.Selection = {
 
 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;
-
+    this._layerControlInputs.reduceRight((_,input) => {
       if (input.checked) {
         this._map.fireEvent("legend_selected", {
-          layer: layer,
+          layer: this._getLayer(input.layerId).layer,
           input: input,
         }, true);
-
-      }
-    }
+      return input;
+     }
+    }, 0);
 
     this._handlingClick = false;
 
     this._refocusOnMap();
-
   }
 });
 
-L.control.layersLegend = function(baseLayers, overlays, options) {
-  return new L.Control.LayersLegend(baseLayers, overlays, options);
-};
+L.control.layersLegend = (baseLayers, overlays, options) => new L.Control.LayersLegend(baseLayers, overlays, options);
 
 L.GeoJSON.include(L.Mixin.Selectable);
 
@@ -124,7 +113,7 @@ L.GpxGroup = L.Class.extend({
     elevation: true,
     elevation_options: {
       theme: 'yellow-theme',
-      detachedView: true,
+      detached: true,
       elevationDiv: '#elevation-div',
     },
     distanceMarkers: true,
@@ -137,29 +126,19 @@ L.GpxGroup = L.Class.extend({
 
     L.Util.setOptions(this, options);
 
-    this._count = 0;
+    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);
-
-    if (typeof L.DistanceMarkers === "undefined") {
-      this.options.distanceMarkers = false;
-    }
+    this._tracks      = tracks;
+    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);
+
+    this.options.points.forEach((poi) => 
+      L
+        .marker(poi.latlng, { icon: L.icon(this.options.points_options.icon) })
+        .bindTooltip(poi.name, { direction: 'auto' }).addTo(this._markers)
+    );
 
   },
 
@@ -180,45 +159,22 @@ L.GpxGroup = L.Class.extend({
   },
 
   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 = xml.documentElement.tagName.toLowerCase(); // "kml" or "gpx"
-            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];
-          }
+    fetch(track)
+      .then(response => response.ok && response.text())
+      .then(text => this._elevation._parseFromString(text))
+      .then(geojson => {
+        if(geojson) {
+          geojson.name = geojson.name ?? (geojson[0] && geojson[0].properties.name) ?? track.split('/').pop().split('#')[0].split('?')[0];
           this._loadRoute(geojson);
-        });
-      }
-    });
+        }
+      });
   },
 
   _loadRoute: function(data) {
     if (!data) return;
 
-    var colors = this._uniqueColors(this._tracks.length);
-    var color = colors[this._count++];
-
     var line_style = {
-      color: color,
+      color: this._uniqueColors(this._tracks.length)[this._count++],
       opacity: 0.75,
       weight: 5,
       distanceMarkers: this.options.distanceMarkers_options,
@@ -232,15 +188,17 @@ L.GpxGroup = L.Class.extend({
       filter: feature => feature.geometry.type != "Point",
     });
 
-    route.addTo(this._layers);
-    this._routes[route._leaflet_id] = route;
+    
+    this._elevation.lazyLoad(this._elevation.__LGEOMUTIL).then(() => {
+      route.addTo(this._layers);
 
-    route.eachLayer((layer) => this._onRouteLayer(route, layer));
-    this._onRouteLoaded(route);
+      route.eachLayer((layer) => this._onEachRouteLayer(route, layer));
+      this._onEachRouteLoaded(route);
+    });
 
   },
 
-  _onRouteLayer: function(route, layer) {
+  _onEachRouteLayer: function(route, layer) {
     var polyline = layer;
 
     route.on('selected', L.bind(this._onRouteSelected, this, route, polyline));
@@ -249,10 +207,25 @@ L.GpxGroup = L.Class.extend({
     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,
-    });
+    polyline.bindTooltip(route.options.name, { direction: 'auto', sticky: true, });
+  },
+
+  _onEachRouteLoaded: 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 + '" 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: 0.25, easeLinearity: 0.25, noMoveStart: true });
+      }
+      if (this.options.legend) {
+        this._legend.addTo(this._map);
+      }
+    }
   },
 
   highlight: function(route, polyline) {
@@ -277,20 +250,14 @@ L.GpxGroup = L.Class.extend({
         L.DomUtil.get('legend_' + route._leaflet_id).parentNode.previousSibling.click();
       }
     }
-    this.fire('route_mouseover', {
-      route: route,
-      polyline: polyline
-    });
+    this.fire('route_mouseover', { route: route, polyline: polyline });
   },
 
   _onRouteMouseOut: function(route, polyline) {
     if (!route.isSelected()) {
       this.unhighlight(route, polyline);
     }
-    this.fire('route_mouseout', {
-      route: route,
-      polyline: polyline
-    });
+    this.fire('route_mouseout', { route: route, polyline: polyline });
   },
 
   _onRouteClick: function(route, polyline) {
@@ -303,28 +270,6 @@ L.GpxGroup = L.Class.extend({
     }
   },
 
-  _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 + '" 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: 0.25,
-          easeLinearity: 0.25,
-          noMoveStart: true
-        });
-      }
-      if (this.options.legend) {
-        this._legend.addTo(this._map);
-      }
-    }
-  },
-
   _onSelectionChanged: function(e) {
     var elevation = this._elevation;
     var eleDiv = elevation.getContainer();
@@ -350,8 +295,9 @@ L.GpxGroup = L.Class.extend({
   },
 
   _onLegendSelected: function(e) {
-    var layers = this._layers._layers;
+    var parent = e.input.closest('.leaflet-control-layers-list');
     var route = e.layer;
+
     if (!route.isSelected()) {
       this.setSelection(route);
       for (var i in route._layers) {
@@ -360,88 +306,27 @@ L.GpxGroup = L.Class.extend({
       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'
-      }
-    );
+    parent.scroll({ top: (e.input.offsetTop - parent.offsetTop) || 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" : "";
-    }
+    this._layers.eachLayer(layer => {
+      var legend = L.DomUtil.get('legend_' + layer._leaflet_id);
+      legend.querySelector("line").style.stroke = layer.isSelected() ? this.options.highlight.color : "";
+      legend.parentNode.style.fontWeight = layer.isSelected() ? "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 * increment;
-      var rgb = this._hsvToRgb(hue, 1, 0.7);
-      var hex = '#' + this._rgbToHex(rgb[0], rgb[1], rgb[2]);
-      colors.push(hex);
-    }
-    return colors;
+    return count === 1 ? ['#0000ff'] : new Array(count).fill(null).map((_,i) => this._hsvToHex(i * (1 / count), 1, 0.7));
   },
 
-  _hsvToRgb: function(h, s, v) {
-    var r, g, b;
-
+  _hsvToHex: function(h, s, v) {
     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) + this._byteToHex(b);
-  },
-
-  _byteToHex: function(n) {
-    return ((n >> 4) & 0x0F).toString(16) + (n & 0x0F).toString(16);
+    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];
+    return rgb.map(d => d * 255).reduce((hex, byte) => hex + ((byte >> 4) & 0x0F).toString(16) + (byte & 0x0F).toString(16), "#");
   },
 
   removeFrom: function(map) {
@@ -453,6 +338,4 @@ L.GpxGroup = L.Class.extend({
 L.GpxGroup.include(L.Mixin.Events);
 L.GpxGroup.include(L.Mixin.Selection);
 
-L.gpxGroup = function(tracks, options) {
-  return new L.GpxGroup(tracks, options);
-};
+L.gpxGroup = (tracks, options) => new L.GpxGroup(tracks, options);

package/libs/leaflet-gpxgroup.min.js

@@ -1,17 +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}};
-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")}};
-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()}});
-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: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=
-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=
-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=
-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)})})},
-_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)=>
-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,
-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",
-{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">'+
-'<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=
-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]);
-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[];
-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;
-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)};
+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

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "1.8.3",
+	"version": "1.8.6",
 	"description": "A Leaflet plugin that allows to add elevation profiles using d3js",
 	"main": "dist/leaflet-elevation.min.js",
 	"module": "src/index.js",

package/src/chart.js

@@ -214,6 +214,7 @@ export var Chart = L.Class.extend({
 			this._updateScale(); // hacky way for restoring x scale when zooming out
 			this.zooming = true;
 			this._scales.distance = this._x = e.transform.rescaleX(this._x); // calculate x scale at zoom level
+			if (this._scales.time) this._scales.time = e.transform.rescaleX(this._scales.time); // calculate x scale at zoom level
 			this._resetDrag();
 			if (e.sourceEvent && e.sourceEvent.type == "mousemove") {
 				this._hideDiagramIndicator();
@@ -374,7 +375,9 @@ export var Chart = L.Class.extend({
 		let opts  = this.options;
 		let scale = props.scale;
 
-		if (typeof scale !== 'function') {
+		if (typeof this._scales[props.name] === 'function') {
+			props.scale = this._scales[props.name]; // retrieve cached scale
+		} else if (typeof scale !== 'function') {
 			scale       = L.extend({
 				data       : this._data,
 				forceBounds: opts.forceAxisBounds