@raruto/leaflet-elevation 1.6.9 → 1.7.3

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,38 @@ 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 ? 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);
     var color = colors[this._count++];
 
@@ -201,23 +222,23 @@ 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,
     });
 
-    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 +246,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 +260,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 +302,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 +335,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 +374,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?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);
+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",
+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.6.9",
+	"version": "1.7.3",
 	"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

@@ -97,8 +97,10 @@ export var Chart = L.Class.extend({
 
 	clear: function() {
 		this._resetDrag();
+		this._hideDiagramIndicator()
 		this._area.selectAll('path').attr("d", "M0 0");
 		this._context.clearRect(0, 0, this._width(), this._height());
+
 		if (this._path) {
 			// this._x.domain([0, 1]);
 			// this._y.domain([0, 1]);
@@ -173,6 +175,7 @@ export var Chart = L.Class.extend({
 	 */
 	_initBrush: function(e) {
 		const brush   = (e) => {
+			if (!this._data.length) return;
 			let extent  = e.selection;
 			if (extent) {
 				let start = this._findIndexForXCoord(extent[0]);
@@ -182,6 +185,7 @@ export var Chart = L.Class.extend({
 		}
 
 		const focus   = (e) => {
+			if (!this._data.length) return;
 			if (e.type == 'brush' && !e.sourceEvent) return;
 			let rect    = this._chart.panes.brush.select('.overlay').node();
 			let coords  = d3.pointers(e, rect)[0];

package/src/components.js

@@ -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.6.9/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.7.3/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(
@@ -56,13 +56,40 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 */
 	clear: function() {
 		if (this._marker) this._marker.remove();
-		if (this._chart)  this._chart.clear();
-		if (this._layers) this._layers.clearLayers();
+		if (this._chart)  this._clearChart();
+		if (this._layers) this._clearLayers();
+		if (this._markers) this._clearMarkers();
 
 		this._data      = [];
 		this.track_info = {};
 
 		this._fireEvt("eledata_clear");
+
+		this._updateChart();
+	},
+
+	_clearChart: function() {
+		if (this._events && this._events.elechart_updated) {
+			this._events.elechart_updated.forEach(e => controlElevation.off('elechart_updated', e.fn, e.ctx));
+		}
+		if (this._chart && this._chart._container) {
+			this._chart._container.selectAll('g.point .point').remove();
+			this._chart.clear();
+		}
+	},
+
+	_clearLayers: function() {
+		if (this._layers && this._layers.eachLayer) {
+			this._layers.eachLayer(l => l.remove())
+			this._layers.clearLayers();
+		}
+	},
+
+	_clearMarkers: function() {
+		if (this._markers && this._markers.eachLayer) {
+			this._markers.eachLayer(l => l.remove())
+			this._markers.clearLayers();
+		}
 	},
 
 	/**
@@ -142,6 +169,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	initialize: function(options) {
 		this._data           = [];
 		this._layers         = L.featureGroup();
+		this._markers        = L.featureGroup();
 		this._markedSegments = L.polyline([]);
 		this._chartEnabled   = true,
 
@@ -420,7 +448,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 });
@@ -448,6 +476,10 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 		if (layer) this._layers.addLayer(layer)
 	},
 
+	_addMarker: function(marker) {
+		if (marker) this._markers.addLayer(marker)
+	},
+
 	/**
 	 * Adds the control to the given "detached" div.
 	 */
@@ -886,7 +918,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	 * Calculates [x, y] domain and then update chart.
 	 */
 	_updateChart: function() {
-		if (!this._data.length || !this._container) return;
+		if (/*!this._data.length ||*/ !this._container) return;
 
 		this._fireEvt("elechart_axis");
 		this._fireEvt("elechart_area");

package/src/index.css

@@ -33,6 +33,7 @@
   overflow: visible;
   display: block;
   touch-action: none;
+  user-select: none;
 }
 
 .elevation-control.elevation .background.zoomed .point,

package/src/options.js

@@ -18,22 +18,6 @@ export var Options = {
 	elevationDiv: "#elevation-div",
 	followMarker: true,
 	forceAxisBounds: false,
-	gpxOptions: {
-		async: true,
-		marker_options: {
-			startIconUrl: null,
-			endIconUrl: null,
-			shadowUrl: null,
-			wptIcons: {
-				'': L.divIcon({
-					className: 'elevation-waypoint-marker',
-					html: '<i class="elevation-waypoint-icon"></i>',
-					iconSize: [30, 30],
-					iconAnchor: [8, 30],
-				})
-			},
-		},
-	},
 	height: 200,
 	heightFactor: 1,
 	imperial: false,
@@ -88,6 +72,15 @@ export var Options = {
 	sInterpolation: "curveStepAfter",
 	sRange: undefined,
 	width: 600,
+	waypoints: true,
+	wptIcons: {
+		'': L.divIcon({
+			className: 'elevation-waypoint-marker',
+			html: '<i class="elevation-waypoint-icon"></i>',
+			iconSize: [30, 30],
+			iconAnchor: [8, 30],
+		}),
+	},
 	xAttr: "dist",
 	xLabel: "km",
 	xTicks: undefined,

package/src/utils.js

@@ -79,7 +79,7 @@ export function GeoJSONLoader(data, control) {
 				: L.extend({ lazy: true }, control.options.distanceMarkers)
 	);
 
-  let wptIcons = control.options.gpxOptions.marker_options.wptIcons;
+  let wptIcons = control.options.wptIcons;
 
 	let layer = L.geoJson(data, {
 		distanceMarkers: distanceMarkers,
@@ -91,22 +91,24 @@ export function GeoJSONLoader(data, control) {
 			return style;
 		},
 		pointToLayer: (feature, latlng) => {
+			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 appropriate icon symbol or retrieve it from cache
-			wptIcons[sym] = (wptIcons[sym] ? wptIcons[sym] : L.divIcon({
-				className: 'elevation-waypoint-marker',
-				html: '<i class="elevation-waypoint-icon ' + sym + '"></i>',
-				iconSize: [30, 30],
-				iconAnchor: [8, 30],
-			}));
+			// 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 (name || desc) {
 				marker.bindPopup("<b>" + name + "</b>" + (desc.length > 0 ? '<br>' + desc : '')).openPopup();
 			}
+      control._addMarker(marker);
 			control._registerCheckPoint({latlng: latlng, label: name}, true);
 			control.fire('waypoint_added', { point: marker, element: latlng, properties: prop });
 			return marker;