@raruto/leaflet-elevation 1.7.1 → 1.7.5

package/libs/leaflet-gpxgroup.js

@@ -100,11 +100,10 @@ L.control.layersLegend = function(baseLayers, overlays, options) {
   return new L.Control.LayersLegend(baseLayers, overlays, options);
 };
 
-L.GPX.include(L.Mixin.Selectable);
+L.GeoJSON.include(L.Mixin.Selectable);
 
 L.GpxGroup = L.Class.extend({
   options: {
-    async: true,
     highlight: {
       color: '#ff0',
       opacity: 1,
@@ -125,7 +124,6 @@ L.GpxGroup = L.Class.extend({
     elevation: true,
     elevation_options: {
       theme: 'yellow-theme',
-      // width: 500,
       detachedView: true,
       elevationDiv: '#elevation-div',
     },
@@ -133,11 +131,6 @@ L.GpxGroup = L.Class.extend({
     distanceMarkers_options: {
       lazy: true
     },
-    marker_options: {
-      startIconUrl: null,
-      endIconUrl: null,
-      shadowUrl: null,
-    }
   },
 
   initialize: function(tracks, options) {
@@ -187,10 +180,40 @@ L.GpxGroup = L.Class.extend({
   },
 
   addTrack: function(track) {
-    this._get(track, this._loadRoute.bind(this));
+    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];
+          }
+          this._loadRoute(geojson);
+        });
+      }
+    });
   },
 
   _loadRoute: function(data) {
+    if (!data) return;
+
     var colors = this._uniqueColors(this._tracks.length);
     var color = colors[this._count++];
 
@@ -201,23 +224,24 @@ L.GpxGroup = L.Class.extend({
       distanceMarkers: this.options.distanceMarkers_options,
     };
 
-    var route = new L.GPX(data, {
-      async: this.options.async,
-      marker_options: this.options.marker_options,
-      polyline_options: line_style
+    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.originalStyle = line_style;
-
-    route.on('addline', L.bind(this._onRouteAddLine, this, route));
-    route.on('loaded', L.bind(this._onRouteLoaded, this, route));
-
     route.addTo(this._layers);
     this._routes[route._leaflet_id] = route;
+
+    route.eachLayer((layer) => this._onRouteLayer(route, layer));
+    this._onRouteLoaded(route);
+
   },
 
-  _onRouteAddLine: function(route, e) {
-    var polyline = e.line;
+  _onRouteLayer: function(route, layer) {
+    var polyline = layer;
 
     route.on('selected', L.bind(this._onRouteSelected, this, route, polyline));
 
@@ -225,7 +249,7 @@ 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.get_name(), {
+    polyline.bindTooltip(route.options.name, {
       direction: 'auto',
       sticky: true,
     });
@@ -239,7 +263,7 @@ L.GpxGroup = L.Class.extend({
   },
 
   unhighlight: function(route, polyline) {
-    polyline.setStyle(route.originalStyle);
+    polyline.setStyle(route.options.originalStyle);
     if (this.options.distanceMarkers) {
       polyline.removeDistanceMarkers();
     }
@@ -281,7 +305,7 @@ 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.polyline_options.color + '" fill="transparent" stroke-width="5" /></svg>' + ' ' + route.get_name());
+      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,
@@ -314,7 +338,7 @@ L.GpxGroup = L.Class.extend({
       }
       route.getLayers().forEach(function(layer) {
         if (layer instanceof L.Polyline) {
-          elevation.addData(layer);
+          elevation.addData(layer, false);
           layer.bringToFront();
         }
       });
@@ -353,17 +377,6 @@ L.GpxGroup = L.Class.extend({
     }
   },
 
-  _get: function(url, callback) {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", url);
-    xhr.onreadystatechange = function() {
-      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
-        callback(xhr.response);
-      }
-    };
-    xhr.send();
-  },
-
   _uniqueColors: function(count) {
     if (count === 0) return [];
     if (count === 1) return ['#0000ff'];

package/libs/leaflet-gpxgroup.min.js

@@ -1,16 +1,17 @@
 '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.GPX.include(L.Mixin.Selectable);
-L.GpxGroup=L.Class.extend({options:{async:true,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},marker_options:{startIconUrl:null,endIconUrl:null,shadowUrl:null}},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){this._get(track,this._loadRoute.bind(this))},_loadRoute:function(data){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=new L.GPX(data,{async:this.options.async,marker_options:this.options.marker_options,polyline_options:line_style});route.originalStyle=line_style;route.on("addline",L.bind(this._onRouteAddLine,this,route));route.on("loaded",L.bind(this._onRouteLoaded,this,route));route.addTo(this._layers);this._routes[route._leaflet_id]=route},_onRouteAddLine:function(route,
-e){var polyline=e.line;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.get_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.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.polyline_options.color+
-'" fill="transparent" stroke-width="5" /></svg>'+" "+route.get_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);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":""}},_get:function(url,callback){var xhr=new XMLHttpRequest;xhr.open("GET",url);xhr.onreadystatechange=function(){if(xhr.readyState===XMLHttpRequest.DONE&&xhr.status===
-200)callback(xhr.response)};xhr.send()},_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.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)};

package/package.json

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

package/src/components.js

@@ -161,7 +161,7 @@ export const HeightFocusMarker = ({
 
 export const LegendItem = ({
 	name,
-  label,
+	label,
 	width,
 	height,
 	margins = {},
@@ -506,6 +506,12 @@ export const Chart = ({
 
 		g.attr("transform", "translate(" + margins.left + "," + margins.top + ")");
 
+		// Partially fix: https://github.com/Raruto/leaflet-elevation/issues/123
+		if(/Mac|iPod|iPhone|iPad/.test(navigator.platform) && /AppleWebkit/i.test(navigator.userAgent)) {
+			canvas
+			.style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
+		}
+
 		clipRect
 			.attr("x", 0)
 			.attr("y", 0)

package/src/control.js

@@ -17,13 +17,13 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.3.0/dist/togeojson.umd.js',
 	__LGEOMUTIL:   'https://unpkg.com/leaflet-geometryutil@0.9.3/src/leaflet.geometryutil.js',
 	__LALMOSTOVER: 'https://unpkg.com/leaflet-almostover@1.0.1/src/leaflet.almostover.js',
-	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.0/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.5/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
 	 */
 	addData: function(d, layer) {
-		if ((typeof layer === "undefined" || layer === null) && d.on) {
+		if (typeof layer === "undefined" && d.on) {
 			layer = d;
 		}
 		Elevation._d3LazyLoader = _.lazyLoader(
@@ -70,7 +70,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 
 	_clearChart: function() {
 		if (this._events && this._events.elechart_updated) {
-			this._events.elechart_updated.forEach(e => controlElevation.off('elechart_updated', e.fn, e.ctx));
+			this._events.elechart_updated.forEach(e => this.off('elechart_updated', e.fn, e.ctx));
 		}
 		if (this._chart && this._chart._container) {
 			this._chart._container.selectAll('g.point .point').remove();
@@ -196,6 +196,8 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		// 	this._updateSummary = _.debounce(this._updateSummary, 300, this);
 		// }
 
+		if (this.options.wptIcons === true) this.options.wptIcons = Options.wptIcons;
+
 		// Leaflet canvas renderer colors
 		L.extend(D3.Colors, this.options.colors || {});
 	},
@@ -448,7 +450,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	_addGPXData: function(coords) {
 		_.each(coords, point => {
-			this._addPoint(point.lat, point.lng, point.meta.ele);
+			this._addPoint(point.lat, point.lng, typeof point.alt !== "undefined" ? point.alt : point.meta.ele);
 			this._fireEvt("elepoint_added", { point: point, index: this._data.length - 1 });
 		});
 		this._fireEvt("eletrack_added", { coords: coords, index: this._data.length - 1 });

package/src/options.js

@@ -81,6 +81,7 @@ export var Options = {
 			iconAnchor: [8, 30],
 		}),
 	},
+	wptLabels: true,
 	xAttr: "dist",
 	xLabel: "km",
 	xTicks: undefined,

package/src/utils.js

@@ -73,13 +73,13 @@ export function GeoJSONLoader(data, control) {
 	}
 	control = control || this;
 
-  let distanceMarkers = (
+	let distanceMarkers = (
 			control.options.distanceMarkers === true
 				? { lazy: true }
 				: L.extend({ lazy: true }, control.options.distanceMarkers)
 	);
 
-  let wptIcons = control.options.wptIcons;
+	let { wptIcons, wptLabels } = control.options;
 
 	let layer = L.geoJson(data, {
 		distanceMarkers: distanceMarkers,
@@ -94,24 +94,36 @@ export function GeoJSONLoader(data, control) {
 			if (!control.options.waypoints) return;
 
 			let prop   = feature.properties;
-			let desc   = prop.desc ? prop.desc : '';
-			let name   = prop.name ? prop.name : '';
-			let sym    = (prop.sym ? prop.sym : name).replace(' ', '-').replace('"', '').replace("'", '').toLowerCase();
-
-			// generate and cache appropriate icon symbol
-			if (!wptIcons.hasOwnProperty(sym)) {
-				wptIcons[sym] = L.divIcon(
-					L.extend({}, wptIcons[""].options, { html: '<i class="elevation-waypoint-icon ' + sym + '"></i>' } )
+			let desc   = prop.desc ?? '';
+			let name   = prop.name ?? '';
+			let sym    = (prop.sym ?? name).replace(' ', '-').replace('"', '').replace("'", '').toLowerCase();
+
+			// Handle chart waypoints (dots)
+			if ([true, 'dots'].includes(control.options.waypoints)) {
+				control._registerCheckPoint({
+						latlng: latlng,
+						label: ([true, 'dots'].includes(wptLabels) ? name : '')
+					},
+					true
 				);
 			}
-			let marker = L.marker(latlng, { icon: wptIcons[sym] });
-			if (name || desc) {
-				marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+
+			// Handle map waypoints (markers)
+			if ([true, 'markers'].includes(control.options.waypoints) && wptIcons != false) {
+				// generate and cache appropriate icon symbol
+				if (!wptIcons.hasOwnProperty(sym)) {
+					wptIcons[sym] = L.divIcon(
+						L.extend({}, wptIcons[""].options, { html: '<i class="elevation-waypoint-icon ' + sym + '"></i>' } )
+					);
+				}
+				let marker = L.marker(latlng, { icon: wptIcons[sym] });
+				if ([true, 'markers'].includes(wptLabels) && (name || desc)) {
+					marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
+				}
+				control._addMarker(marker);
+				control.fire('waypoint_added', { point: marker, element: latlng, properties: prop });
+				return marker;
 			}
-      control._addMarker(marker);
-			control._registerCheckPoint({latlng: latlng, label: name}, true);
-			control.fire('waypoint_added', { point: marker, element: latlng, properties: prop });
-			return marker;
 		},
 		onEachFeature: (feature, layer) => {
 			if (feature.geometry && feature.geometry.type == 'Point') return;
@@ -138,12 +150,12 @@ export function GeoJSONLoader(data, control) {
 
 			// Postpone adding the distance markers (lazy: true)
 			if(control.options.distanceMarkers && distanceMarkers.lazy) {
-			  layer.on('add remove', (e) => {
-			    let path = e.target;
-			    if (L.DistanceMarkers && path instanceof L.Polyline) {
+				layer.on('add remove', (e) => {
+					let path = e.target;
+					if (L.DistanceMarkers && path instanceof L.Polyline) {
 						path[e.type + 'DistanceMarkers']();
-			    }
-			  });
+					}
+				});
 			}
 
 			control.track_info = L.extend({}, control.track_info, { type: "geojson", name: data.name });
@@ -318,8 +330,8 @@ export function toggleClass(targetNode, className, conditional) {
 }
 
 export function replaceClass(targetNode, removeClassName, addClassName) {
-  if (removeClassName) removeClass(targetNode, removeClassName);
-  if (addClassName) addClass(targetNode, addClassName);
+	if (removeClassName) removeClass(targetNode, removeClassName);
+	if (addClassName) addClass(targetNode, addClassName);
 }
 
 export function style(targetNode, name, value) {
@@ -328,7 +340,7 @@ export function style(targetNode, name, value) {
 }
 
 export function toggleStyle(targetNode, name, value, conditional) {
-  return style(targetNode, name, conditional ? value : '');
+	return style(targetNode, name, conditional ? value : '');
 }
 
 export function toggleEvent(leafletElement, eventName, handler, conditional) {