@raruto/leaflet-elevation 2.0.1 → 2.0.4

package/libs/leaflet-distance-marker.js

@@ -143,102 +143,107 @@ L.DistanceMarkers = L.LayerGroup.extend({
 		// Get line coords as an array
 		let coords = typeof line.getLatLngs == 'function' ? line.getLatLngs() : line;
 
-		// Get accumulated line lengths as well as overall length
-		let accumulated = L.GeometryUtil.accumulatedLengths(line);
-		let length = accumulated.length > 0 ? accumulated[accumulated.length - 1] : 0;
-
-		// count = Number of distance markers to be added
-		// j = Position in accumulated line length array
-		for (let i = 1, count = Math.floor(length / options.offset), j = 0; i <= count; ++i) {
-
-			let distance = options.offset * i;
-
-			// Find the first accumulated distance that is greater than the distance of this marker
-			while (j < accumulated.length - 1 && accumulated[j] < distance) ++j;
-
-			// Grab two nearest points either side marker position
-			let p1 = coords[j - 1];
-			let p2 = coords[j];
-			let m_line = L.polyline([p1, p2]);
-
-			// and create a simple line to interpolate on
-			let ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
-			let position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
-			let delta = map.project(p2).subtract(map.project(p1));
-			let angle = Math.atan2(delta.y, delta.x);
-
-			// Generate distance marker label
-			let text = options.textFunction.call(this, distance, i, options.offset);
-
-			// Grouping layer of visible layers at zoom level (arrow + distance)
-			let zoom = this._minimumZoomLevelForItem(i, showAll);
-			let markers = this._zoomLayers[zoom] = this._zoomLayers[zoom] || L.layerGroup()
-
-			// create arrow markers
-			if (options.direction && ((options.distance && i % 2 == 1) || !options.distance)) {
-				if (preferCanvas) {
-					markers.addLayer(
-						new L.DistanceMarker(p1, {
-							radius: 0,
-							icon: {
-								url: options.arrowUrl,   //image link
-								size: options.arrowSize, //image size ( default [40, 40] )
-								rotate: 0,               //image base rotate ( default 0 )
-								offset: { x: 0, y: 0 },  //image offset ( default { x: 0, y: 0 } )
-							},
-							rotation: angle,
-							interactive: false,
-							// label: '⮞', //'➜',
-							// font: 'normal 20pt "Helvetica Neue", Arial, Helvetica, sans-serif',
-							// fillStyle: 'white',//'#3366CC',
-							// strokeStyle: 'black',
-						})
-					);
-				} else {
-					markers.addLayer(
-						L.marker(position.latLng, {
-							icon: L.icon({
-								iconUrl: options.arrowUrl,
-								iconSize: options.arrowSize,
-							}),
-							// NB the following option is added by "leaflet-rotate"
-							rotation: angle * L.DomUtil.RAD_TO_DEG,
-							interactive: false,
-						})
-					);
+		// Handle "MultiLineString" features
+		coords = L.LineUtil.isFlat(coords) ? [coords] : coords;
+
+		coords.forEach(latlngs => {
+			// Get accumulated line lengths as well as overall length
+			let accumulated = L.GeometryUtil.accumulatedLengths(latlngs);
+			let length = accumulated.length > 0 ? accumulated[accumulated.length - 1] : 0;
+
+			// count = Number of distance markers to be added
+			// j = Position in accumulated line length array
+			for (let i = 1, count = Math.floor(length / options.offset), j = 0; i <= count; ++i) {
+
+				let distance = options.offset * i;
+
+				// Find the first accumulated distance that is greater than the distance of this marker
+				while (j < accumulated.length - 1 && accumulated[j] < distance) ++j;
+
+				// Grab two nearest points either side marker position
+				let p1 = latlngs[j - 1];
+				let p2 = latlngs[j];
+				let m_line = L.polyline([p1, p2]);
+
+				// and create a simple line to interpolate on
+				let ratio = (distance - accumulated[j - 1]) / (accumulated[j] - accumulated[j - 1]);
+				let position = L.GeometryUtil.interpolateOnLine(map, m_line, ratio);
+				let delta = map.project(p2).subtract(map.project(p1));
+				let angle = Math.atan2(delta.y, delta.x);
+
+				// Generate distance marker label
+				let text = options.textFunction.call(this, distance, i, options.offset);
+
+				// Grouping layer of visible layers at zoom level (arrow + distance)
+				let zoom = this._minimumZoomLevelForItem(i, showAll);
+				let markers = this._zoomLayers[zoom] = this._zoomLayers[zoom] || L.layerGroup()
+
+				// create arrow markers
+				if (options.direction && ((options.distance && i % 2 == 1) || !options.distance)) {
+					if (preferCanvas) {
+						markers.addLayer(
+							new L.DistanceMarker(p1, {
+								radius: 0,
+								icon: {
+									url: options.arrowUrl,   //image link
+									size: options.arrowSize, //image size ( default [40, 40] )
+									rotate: 0,               //image base rotate ( default 0 )
+									offset: { x: 0, y: 0 },  //image offset ( default { x: 0, y: 0 } )
+								},
+								rotation: angle,
+								interactive: false,
+								// label: '⮞', //'➜',
+								// font: 'normal 20pt "Helvetica Neue", Arial, Helvetica, sans-serif',
+								// fillStyle: 'white',//'#3366CC',
+								// strokeStyle: 'black',
+							})
+						);
+					} else {
+						markers.addLayer(
+							L.marker(position.latLng, {
+								icon: L.icon({
+									iconUrl: options.arrowUrl,
+									iconSize: options.arrowSize,
+								}),
+								// NB the following option is added by "leaflet-rotate"
+								rotation: angle * L.DomUtil.RAD_TO_DEG,
+								interactive: false,
+							})
+						);
+					}
 				}
-			}
 
-			// create distance markers
-			if (options.distance && i % 2 == 0) {
-				if (preferCanvas) {
-					markers.addLayer(
-						new L.DistanceMarker(position.latLng, {
-							label: text, // TODO: handle text rotation (leaflet-rotate)
-							radius: 7,
-							fillColor: '#fff',
-							fillOpacity: 1,
-							fillStyle: 'black',
-							color: '#777',
-							weight: 1,
-							interactive: false,
-						})
-					);
-				} else {
-					markers.addLayer(
-						L.marker(position.latLng, {
-							title: text,
-							icon: L.divIcon({
-								className: options.cssClass,
-								html: text,
-								iconSize: options.iconSize
-							}),
-							interactive: false,
-						})
-					);
+				// create distance markers
+				if (options.distance && i % 2 == 0) {
+					if (preferCanvas) {
+						markers.addLayer(
+							new L.DistanceMarker(position.latLng, {
+								label: text, // TODO: handle text rotation (leaflet-rotate)
+								radius: 7,
+								fillColor: '#fff',
+								fillOpacity: 1,
+								fillStyle: 'black',
+								color: '#777',
+								weight: 1,
+								interactive: false,
+							})
+						);
+					} else {
+						markers.addLayer(
+							L.marker(position.latLng, {
+								title: text,
+								icon: L.divIcon({
+									className: options.cssClass,
+									html: text,
+									iconSize: options.iconSize
+								}),
+								interactive: false,
+							})
+						);
+					}
 				}
 			}
-		}
+		});
 
 		const updateMarkerVisibility = () => {
 			let oldZoom = this._lastZoomLevel || 0;

package/libs/leaflet-distance-marker.min.js

@@ -1 +1 @@
-L.DistanceMarker=L.CircleMarker.extend({_updatePath:function(){let ctx=this._renderer._ctx,p=this._point;if(this.options.rotation=this.options.rotation||0,this.options.radius&&this._renderer._updateCircle&&this._renderer._updateCircle(this),this.options.icon&&this.options.icon.url)if(this.options.icon.element){const icon=this.options.icon;let cx=p.x+icon.offset.x,cy=p.y+icon.offset.y;ctx.save(),icon.rotate&&(ctx.translate(p.x,p.y),ctx.rotate(icon.rotate),cx=0,cy=0),ctx.drawImage(icon.element,cx-icon.size[0]/2,cy-icon.size[1]/2,icon.size[0],icon.size[1]),ctx.restore()}else{const icon=document.createElement("img");this.options.icon=L.extend({rotate:0,size:[40,40],offset:{x:0,y:0}},this.options.icon),this.options.icon.rotate+=this.options.rotation,this.options.icon.element=icon,icon.src=this.options.icon.url,icon.onload=()=>this.redraw(),icon.onerror=()=>this.options.icon=null}if(this.options.label){let cx=p.x,cy=p.y;ctx.save(),ctx.font=this.options.font||'normal 7pt "Helvetica Neue", Arial, Helvetica, sans-serif',ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStyle=this.options.fillStyle||"black",this.options.rotation&&(ctx.translate(p.x,p.y),ctx.rotate(this.options.rotation),cx=0,cy=0),this._map.getZoom()>17&&(ctx.fillStyle=this.options.strokeStyle||"black"),ctx.fillText(this.options.label,cx,cy),this.options.strokeStyle&&this._map.getZoom()<=17&&(ctx.strokeStyle=this.options.strokeStyle,ctx.strokeText(this.options.label,cx,cy)),ctx.restore()}}}),L.DistanceMarkers=L.LayerGroup.extend({options:{cssClass:"dist-marker",iconSize:[12,12],arrowSize:[10,10],arrowUrl:"data:image/svg+xml,%3Csvg transform='rotate(90)' xmlns='http://www.w3.org/2000/svg' width='560px' height='560px' viewBox='0 0 560 560'%3E%3Cpath stroke-width='35' fill='%23000' stroke='%23FFF' d='M280,40L522,525L280,420L38,525z'/%3E%3C/svg%3E",offset:1e3,showAll:12,textFunction:(distance,i,offset)=>i,distance:!0,direction:!0},initialize:function(line,map,options){this._layers={},this._zoomLayers={},options=L.setOptions(this,options);let preferCanvas=map.options.preferCanvas,showAll=Math.min(map.getMaxZoom(),options.showAll);preferCanvas||map.options.rotate||console.warn('Missing dependency: "leaflet-rotate"');let coords="function"==typeof line.getLatLngs?line.getLatLngs():line,accumulated=L.GeometryUtil.accumulatedLengths(line),length=accumulated.length>0?accumulated[accumulated.length-1]:0;for(let i=1,count=Math.floor(length/options.offset),j=0;i<=count;++i){let distance=options.offset*i;for(;j<accumulated.length-1&&accumulated[j]<distance;)++j;let p1=coords[j-1],p2=coords[j],m_line=L.polyline([p1,p2]),ratio=(distance-accumulated[j-1])/(accumulated[j]-accumulated[j-1]),position=L.GeometryUtil.interpolateOnLine(map,m_line,ratio),delta=map.project(p2).subtract(map.project(p1)),angle=Math.atan2(delta.y,delta.x),text=options.textFunction.call(this,distance,i,options.offset),zoom=this._minimumZoomLevelForItem(i,showAll),markers=this._zoomLayers[zoom]=this._zoomLayers[zoom]||L.layerGroup();options.direction&&(options.distance&&i%2==1||!options.distance)&&(preferCanvas?markers.addLayer(new L.DistanceMarker(p1,{radius:0,icon:{url:options.arrowUrl,size:options.arrowSize,rotate:0,offset:{x:0,y:0}},rotation:angle,interactive:!1})):markers.addLayer(L.marker(position.latLng,{icon:L.icon({iconUrl:options.arrowUrl,iconSize:options.arrowSize}),rotation:angle*L.DomUtil.RAD_TO_DEG,interactive:!1}))),options.distance&&i%2==0&&(preferCanvas?markers.addLayer(new L.DistanceMarker(position.latLng,{label:text,radius:7,fillColor:"#fff",fillOpacity:1,fillStyle:"black",color:"#777",weight:1,interactive:!1})):markers.addLayer(L.marker(position.latLng,{title:text,icon:L.divIcon({className:options.cssClass,html:text,iconSize:options.iconSize}),interactive:!1})))}const updateMarkerVisibility=()=>{let oldZoom=this._lastZoomLevel||0,newZoom=map.getZoom();if(newZoom>oldZoom)for(let i=oldZoom+1;i<=newZoom;++i)void 0!==this._zoomLayers[i]&&this.addLayer(this._zoomLayers[i]);else if(newZoom<oldZoom)for(let i=oldZoom;i>newZoom;--i)void 0!==this._zoomLayers[i]&&this.removeLayer(this._zoomLayers[i]);this._lastZoomLevel=newZoom};map.on("zoomend",updateMarkerVisibility),updateMarkerVisibility()},_minimumZoomLevelForItem:function(i,zoom){for(;i>0&&i%2==0;)--zoom,i=Math.floor(i/2);return zoom}}),L.Polyline.include({_originalOnAdd:L.Polyline.prototype.onAdd,_originalOnRemove:L.Polyline.prototype.onRemove,addDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.addLayer(this._distanceMarkers)},removeDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.removeLayer(this._distanceMarkers)},onAdd:function(map){this._originalOnAdd(map);let opts=this.options.distanceMarkers||{};this.options.distanceMarkers&&(this._distanceMarkers=this._distanceMarkers||new L.DistanceMarkers(this,map,opts)),void 0!==opts.lazy&&!1!==opts.lazy||this.addDistanceMarkers()},onRemove:function(map){this.removeDistanceMarkers(),this._originalOnRemove(map)}});
+L.DistanceMarker=L.CircleMarker.extend({_updatePath:function(){let ctx=this._renderer._ctx,p=this._point;if(this.options.rotation=this.options.rotation||0,this.options.radius&&this._renderer._updateCircle&&this._renderer._updateCircle(this),this.options.icon&&this.options.icon.url)if(this.options.icon.element){const icon=this.options.icon;let cx=p.x+icon.offset.x,cy=p.y+icon.offset.y;ctx.save(),icon.rotate&&(ctx.translate(p.x,p.y),ctx.rotate(icon.rotate),cx=0,cy=0),ctx.drawImage(icon.element,cx-icon.size[0]/2,cy-icon.size[1]/2,icon.size[0],icon.size[1]),ctx.restore()}else{const icon=document.createElement("img");this.options.icon=L.extend({rotate:0,size:[40,40],offset:{x:0,y:0}},this.options.icon),this.options.icon.rotate+=this.options.rotation,this.options.icon.element=icon,icon.src=this.options.icon.url,icon.onload=()=>this.redraw(),icon.onerror=()=>this.options.icon=null}if(this.options.label){let cx=p.x,cy=p.y;ctx.save(),ctx.font=this.options.font||'normal 7pt "Helvetica Neue", Arial, Helvetica, sans-serif',ctx.textAlign="center",ctx.textBaseline="middle",ctx.fillStyle=this.options.fillStyle||"black",this.options.rotation&&(ctx.translate(p.x,p.y),ctx.rotate(this.options.rotation),cx=0,cy=0),this._map.getZoom()>17&&(ctx.fillStyle=this.options.strokeStyle||"black"),ctx.fillText(this.options.label,cx,cy),this.options.strokeStyle&&this._map.getZoom()<=17&&(ctx.strokeStyle=this.options.strokeStyle,ctx.strokeText(this.options.label,cx,cy)),ctx.restore()}}}),L.DistanceMarkers=L.LayerGroup.extend({options:{cssClass:"dist-marker",iconSize:[12,12],arrowSize:[10,10],arrowUrl:"data:image/svg+xml,%3Csvg transform='rotate(90)' xmlns='http://www.w3.org/2000/svg' width='560px' height='560px' viewBox='0 0 560 560'%3E%3Cpath stroke-width='35' fill='%23000' stroke='%23FFF' d='M280,40L522,525L280,420L38,525z'/%3E%3C/svg%3E",offset:1e3,showAll:12,textFunction:(distance,i,offset)=>i,distance:!0,direction:!0},initialize:function(line,map,options){this._layers={},this._zoomLayers={},options=L.setOptions(this,options);let preferCanvas=map.options.preferCanvas,showAll=Math.min(map.getMaxZoom(),options.showAll);preferCanvas||map.options.rotate||console.warn('Missing dependency: "leaflet-rotate"');let coords="function"==typeof line.getLatLngs?line.getLatLngs():line;coords=L.LineUtil.isFlat(coords)?[coords]:coords,coords.forEach(latlngs=>{let accumulated=L.GeometryUtil.accumulatedLengths(latlngs),length=accumulated.length>0?accumulated[accumulated.length-1]:0;for(let i=1,count=Math.floor(length/options.offset),j=0;i<=count;++i){let distance=options.offset*i;for(;j<accumulated.length-1&&accumulated[j]<distance;)++j;let p1=latlngs[j-1],p2=latlngs[j],m_line=L.polyline([p1,p2]),ratio=(distance-accumulated[j-1])/(accumulated[j]-accumulated[j-1]),position=L.GeometryUtil.interpolateOnLine(map,m_line,ratio),delta=map.project(p2).subtract(map.project(p1)),angle=Math.atan2(delta.y,delta.x),text=options.textFunction.call(this,distance,i,options.offset),zoom=this._minimumZoomLevelForItem(i,showAll),markers=this._zoomLayers[zoom]=this._zoomLayers[zoom]||L.layerGroup();options.direction&&(options.distance&&i%2==1||!options.distance)&&(preferCanvas?markers.addLayer(new L.DistanceMarker(p1,{radius:0,icon:{url:options.arrowUrl,size:options.arrowSize,rotate:0,offset:{x:0,y:0}},rotation:angle,interactive:!1})):markers.addLayer(L.marker(position.latLng,{icon:L.icon({iconUrl:options.arrowUrl,iconSize:options.arrowSize}),rotation:angle*L.DomUtil.RAD_TO_DEG,interactive:!1}))),options.distance&&i%2==0&&(preferCanvas?markers.addLayer(new L.DistanceMarker(position.latLng,{label:text,radius:7,fillColor:"#fff",fillOpacity:1,fillStyle:"black",color:"#777",weight:1,interactive:!1})):markers.addLayer(L.marker(position.latLng,{title:text,icon:L.divIcon({className:options.cssClass,html:text,iconSize:options.iconSize}),interactive:!1})))}});const updateMarkerVisibility=()=>{let oldZoom=this._lastZoomLevel||0,newZoom=map.getZoom();if(newZoom>oldZoom)for(let i=oldZoom+1;i<=newZoom;++i)void 0!==this._zoomLayers[i]&&this.addLayer(this._zoomLayers[i]);else if(newZoom<oldZoom)for(let i=oldZoom;i>newZoom;--i)void 0!==this._zoomLayers[i]&&this.removeLayer(this._zoomLayers[i]);this._lastZoomLevel=newZoom};map.on("zoomend",updateMarkerVisibility),updateMarkerVisibility()},_minimumZoomLevelForItem:function(i,zoom){for(;i>0&&i%2==0;)--zoom,i=Math.floor(i/2);return zoom}}),L.Polyline.include({_originalOnAdd:L.Polyline.prototype.onAdd,_originalOnRemove:L.Polyline.prototype.onRemove,addDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.addLayer(this._distanceMarkers)},removeDistanceMarkers:function(){this._map&&this._distanceMarkers&&this._map.removeLayer(this._distanceMarkers)},onAdd:function(map){this._originalOnAdd(map);let opts=this.options.distanceMarkers||{};this.options.distanceMarkers&&(this._distanceMarkers=this._distanceMarkers||new L.DistanceMarkers(this,map,opts)),void 0!==opts.lazy&&!1!==opts.lazy||this.addDistanceMarkers()},onRemove:function(map){this.removeDistanceMarkers(),this._originalOnRemove(map)}});

package/libs/leaflet-gpxgroup.js

@@ -164,7 +164,7 @@ L.GpxGroup = L.Class.extend({
       .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];
+          geojson.name = geojson.name || (geojson[0] && geojson[0].properties.name) || track.split('/').pop().split('#')[0].split('?')[0];
           this._loadRoute(geojson);
         }
       });

package/libs/leaflet-gpxgroup.min.js

@@ -1 +1 @@
-L.Mixin.Selectable={includes:L.Mixin.Events,setSelected:function(s){var selected=!!s;this._selected!==selected&&(this._selected=selected,this.fire("selected"))},isSelected:function(){return!!this._selected}},L.Mixin.Selection={includes:L.Mixin.Events,getSelection:function(){return this._selected},setSelection:function(item){this._selected===item?null!==item&&(item.setSelected(!item.isSelected()),item.isSelected()||(this._selected=null)):(this._selected&&this._selected.setSelected(!1),this._selected=item,this._selected&&this._selected.setSelected(!0)),this.fire("selection_changed")}},L.Control.LayersLegend=L.Control.Layers.extend({_onInputClick:function(){var inputs=this._layerControlInputs,input,layer,addedLayers=[],removedLayers=[];this._handlingClick=!0;for(var i=inputs.length-1;i>=0;i--)input=inputs[i],layer=this._getLayer(input.layerId).layer,input.checked&&this._map.fireEvent("legend_selected",{layer:layer,input:input},!0);this._handlingClick=!1,this._refocusOnMap()}}),L.control.layersLegend=function(baseLayers,overlays,options){return new L.Control.LayersLegend(baseLayers,overlays,options)},L.GeoJSON.include(L.Mixin.Selectable),L.GpxGroup=L.Class.extend({options:{highlight:{color:"#ff0",opacity:1},points:[],points_options:{icon:{iconUrl:"../images/elevation-poi.png",iconSize:[12,12]}},flyToBounds:!0,legend:!1,legend_options:{position:"topright",collapsed:!1},elevation:!0,elevation_options:{theme:"yellow-theme",detachedView:!0,elevationDiv:"#elevation-div"},distanceMarkers:!0,distanceMarkers_options:{lazy:!0}},initialize:function(tracks,options){L.Util.setOptions(this,options),this._count=0,this._loadedCount=0,this._tracks=tracks,this._routes={},this._layers=L.featureGroup(),this._markers=L.featureGroup(),this._elevation=L.control.elevation(this.options.elevation_options),this._legend=L.control.layersLegend(null,null,this.options.legend_options);var icon=L.icon(this.options.points_options.icon);this.options.points.forEach((function(poi){var marker=L.marker(poi.latlng,{icon:icon});marker.bindTooltip(poi.name,{direction:"auto"}),marker.addTo(this._markers)}),this),void 0===L.DistanceMarkers&&(this.options.distanceMarkers=!1)},getBounds:function(){return this._layers.getBounds()},addTo:function(map){this._layers.addTo(map),this._markers.addTo(map),this._map=map,this.on("selection_changed",this._onSelectionChanged,this),this._map.on("legend_selected",this._onLegendSelected,this),this._tracks.forEach(this.addTrack,this)},addTrack:function(track){fetch(track).then(response=>{response.ok&&response.text().then(doc=>{let geojson;doc=doc.trim();try{let xml=(new DOMParser).parseFromString(doc,"text/xml"),type=xml.documentElement.tagName.toLowerCase(),name=xml.getElementsByTagName("name");type in toGeoJSON||(type="TrainingCenterDatabase"==xml.documentElement.tagName?"tcx":"gpx"),geojson=toGeoJSON[type](xml),geojson.name=name.length>0?Array.from(name).find(tag=>"trk"==tag.parentElement.tagName).textContent:""}catch(e){try{geojson=JSON.parse(doc.toString())}catch(e){console.warn("Error parsing track: "+track)}}geojson.name||(geojson.name=track.split("/").pop().split("#")[0].split("?")[0]),this._loadRoute(geojson)})})},_loadRoute:function(data){if(data){var colors,color,line_style={color:this._uniqueColors(this._tracks.length)[this._count++],opacity:.75,weight:5,distanceMarkers:this.options.distanceMarkers_options},route=L.geoJson(data,{name:data.name||"",style:feature=>line_style,distanceMarkers:line_style.distanceMarkers,originalStyle:line_style,filter:feature=>"Point"!=feature.geometry.type});route.addTo(this._layers),this._routes[route._leaflet_id]=route,route.eachLayer(layer=>this._onRouteLayer(route,layer)),this._onRouteLoaded(route)}},_onRouteLayer:function(route,layer){var polyline=layer;route.on("selected",L.bind(this._onRouteSelected,this,route,polyline)),polyline.on("mouseover",L.bind(this._onRouteMouseOver,this,route,polyline)),polyline.on("mouseout",L.bind(this._onRouteMouseOut,this,route,polyline)),polyline.on("click",L.bind(this._onRouteClick,this,route,polyline)),polyline.bindTooltip(route.options.name,{direction:"auto",sticky:!0})},highlight:function(route,polyline){polyline.setStyle(this.options.highlight),this.options.distanceMarkers&&polyline.addDistanceMarkers()},unhighlight:function(route,polyline){polyline.setStyle(route.options.originalStyle),this.options.distanceMarkers&&polyline.removeDistanceMarkers()},_onRouteMouseOver:function(route,polyline){route.isSelected()||(this.highlight(route,polyline),this.options.legend&&(this.setSelection(route),L.DomUtil.get("legend_"+route._leaflet_id).parentNode.previousSibling.click())),this.fire("route_mouseover",{route:route,polyline:polyline})},_onRouteMouseOut:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline),this.fire("route_mouseout",{route:route,polyline:polyline})},_onRouteClick:function(route,polyline){this.setSelection(route)},_onRouteSelected:function(route,polyline){route.isSelected()||this.unhighlight(route,polyline)},_onRouteLoaded:function(route){this.options.legend&&this._legend.addBaseLayer(route,'<svg id="legend_'+route._leaflet_id+'" width="25" height="10" version="1.1" xmlns="http://www.w3.org/2000/svg"><line x1="0" x2="50" y1="5" y2="5" stroke="'+route.options.originalStyle.color+'" fill="transparent" stroke-width="5" /></svg> '+route.options.name),this.fire("route_loaded",{route:route}),++this._loadedCount===this._tracks.length&&(this.fire("loaded"),this.options.flyToBounds&&this._map.flyToBounds(this.getBounds(),{duration:.25,easeLinearity:.25,noMoveStart:!0}),this.options.legend&&this._legend.addTo(this._map))},_onSelectionChanged:function(e){var elevation=this._elevation,eleDiv=elevation.getContainer(),route=this.getSelection();elevation.clear(),route&&route.isSelected()?(eleDiv||elevation.loadChart(this._map),route.getLayers().forEach((function(layer){layer instanceof L.Polyline&&(elevation.addData(layer,!1),layer.bringToFront())}))):eleDiv&&elevation.remove()},_onLegendSelected:function(e){var layers=this._layers._layers,route=e.layer;if(!route.isSelected()){for(var i in this.setSelection(route),route._layers)this.highlight(route,route._layers[i]);this._map.flyToBounds(e.layer.getBounds())}var parent=e.input.closest(".leaflet-control-layers-list"),offset=e.input.offsetTop-parent.offsetTop;for(var j in parent.scroll({top:offset||0,behavior:"smooth"}),layers){var selected=layers[j].isSelected(),legend=L.DomUtil.get("legend_"+layers[j]._leaflet_id);legend.querySelector("line").style.stroke=selected?this.options.highlight.color:"",legend.parentNode.style.fontWeight=selected?"700":""}},_uniqueColors:function(count){if(0===count)return[];if(1===count)return["#0000ff"];for(var increment=1/count,colors=[],i=0;i<count;++i){var hue=i*increment,rgb=this._hsvToRgb(hue,1,.7),hex="#"+this._rgbToHex(rgb[0],rgb[1],rgb[2]);colors.push(hex)}return colors},_hsvToRgb:function(h,s,v){var r,g,b,i=Math.floor(6*h),f=6*h-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s);switch(i%6){case 0:r=v,g=t,b=p;break;case 1:r=q,g=v,b=p;break;case 2:r=p,g=v,b=t;break;case 3:r=p,g=q,b=v;break;case 4:r=t,g=p,b=v;break;case 5:r=v,g=p,b=q}return[255*r,255*g,255*b]},_rgbToHex:function(r,g,b){return this._byteToHex(r)+this._byteToHex(g)+this._byteToHex(b)},_byteToHex:function(n){return(n>>4&15).toString(16)+(15&n).toString(16)},removeFrom:function(map){this._layers.removeFrom(map)}}),L.GpxGroup.include(L.Mixin.Events),L.GpxGroup.include(L.Mixin.Selection),L.gpxGroup=function(tracks,options){return new L.GpxGroup(tracks,options)};
+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(){this._handlingClick=!0,this._layerControlInputs.reduceRight((_,input)=>{if(input.checked)return this._map.fireEvent("legend_selected",{layer:this._getLayer(input.layerId).layer,input:input},!0),input},0),this._handlingClick=!1,this._refocusOnMap()}}),L.control.layersLegend=(baseLayers,overlays,options)=>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",detached:!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._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))},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(text=>this._elevation._parseFromString(text)).then(geojson=>{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){var 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});this._elevation.import(this._elevation.__LGEOMUTIL).then(()=>{route.addTo(this._layers),route.eachLayer(layer=>this._onEachRouteLayer(route,layer)),this._onEachRouteLoaded(route)})}},_onEachRouteLayer: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})},_onEachRouteLoaded: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))},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)},_onSelectionChanged:function(e){var elevation=this._elevation,eleDiv=elevation.getContainer(),route=this.getSelection();elevation.clear(),route&&route.isSelected()?(eleDiv||elevation.addTo(this._map),route.getLayers().forEach((function(layer){layer instanceof L.Polyline&&(elevation.addData(layer,!1),layer.bringToFront())}))):eleDiv&&elevation.remove()},_onLegendSelected:function(e){var parent=e.input.closest(".leaflet-control-layers-list"),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())}parent.scroll({top:e.input.offsetTop-parent.offsetTop||0,behavior:"smooth"}),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){return 1===count?["#0000ff"]:new Array(count).fill(null).map((_,i)=>this._hsvToHex(i*(1/count),1,.7))},_hsvToHex:function(h,s,v){var i=Math.floor(6*h),f=6*h-i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),rgb;return{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].map(d=>255*d).reduce((hex,byte)=>hex+(byte>>4&15).toString(16)+(15&byte).toString(16),"#")},removeFrom:function(map){this._layers.removeFrom(map)}}),L.GpxGroup.include(L.Mixin.Events),L.GpxGroup.include(L.Mixin.Selection),L.gpxGroup=(tracks,options)=>new L.GpxGroup(tracks,options);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "2.0.1",
+	"version": "2.0.4",
 	"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/chart.js

@@ -85,6 +85,7 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 		this._updateScale();
 		this._updateArea();
 		this._updateAxis();
+		this._updateMargins();
 		this._updateLegend();
 		this._updateClipper();
 
@@ -350,7 +351,7 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 		if (typeof props.preferCanvas === "undefined") props.preferCanvas = opts.preferCanvas;
 
 		// Save paths in memory for latter usage
-		this._paths[props.name]       = D3.Path(props);;
+		this._paths[props.name]       = D3.Path(props);
 		this._props.areas[props.name] = props;
 
 		if (opts.legend) {
@@ -536,80 +537,92 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 	},
 
 	_updateLegend: function () {
-
-		if (this.options.legend === false) return;
-
-		const legendOpts = {
-			width  : this._width(),
-			height : this._height(),
-			margins: this.options.margins,
-		};
-
-		// Reset legend items
-		this._legend.selectAll('g').remove();
-		_.each(this._props.legendItems, (legend) => {
-			this._legend.append("g").call(D3.LegendItem(L.extend(legendOpts, legend)));
-		});
-
+		let xAxesB  = this._axis.selectAll('.x.axis.bottom').nodes().length;
+		
 		// Get legend items
-		let items  = this._legend.selectAll('.legend-item');
+		let items = Object.keys(this._paths);
 
 		// Calculate legend item positions
-		let n      = items.nodes().length;
+		let n      = items.length;
 		let v      = Array(Math.floor(n / 2)).fill(null).map((d, i) => (i + 1) * 2 - (1 - Math.sign(n % 2)));
 		let rev    = v.slice().reverse().map((d) => -(d));
 
+		// push a fake element to handle center alignment (odd numbers)
 		if (n % 2 !== 0) {
 			rev.push(0);
 		}
 		v = rev.concat(v);
 
-		// Get chart margins
-		let xAxesB  = this._axis.selectAll('.x.axis.bottom').nodes().length;
-		let marginB = 30 + (xAxesB * 2);
-		let marginR = n * 30;
+		// Reset legend items
+		this._legend.selectAll('g').remove();
 
-		// Adjust chart right margins
-		if (n && this.options.margins.right < marginR) {
-			this.options.margins.right  = marginR;
-			this.fire('margins_updated');
-		}
+		// Render legend items
+		_.each(this._props.legendItems, (legend) => {
+			this._legend.append("g").call(
+				D3.LegendItem(L.extend({
+					width  : this._width(),
+					height : this._height(),
+					margins: this.options.margins,
+				}, legend))
+			);
+		});
 
-		// Adjust chart bottom margins
-		if(xAxesB && this.options.margins.bottom < marginB) {
-			this.options.margins.bottom = marginB;
-			this.fire('margins_updated');
+		// Render legend item switcher
+		if (n > 1) {
+			this._legend.append("g").call(
+				D3.LegendSmall({
+					width  : this._width(),
+					height : this._height(),
+					items  : items,
+					onClick: (selected) => {
+						_.each(items, name => this._togglePath(name, selected == name, true));
+						this._updateArea();
+					}
+				})
+			);
 		}
+		
+		_.each(items, (name, i) => {
+			// Adjust legend item positions
+			this._legend.select('[data-name=' + name + ']').attr("transform", "translate(" + (v[i] * 55) + ", " + (xAxesB * 2) + ")");
+			// Set initial state (disabled controls)
+			this._togglePath(name, !(name in this.options && this.options[name] == 'disabled'), true);
+		});
 
-		items
-			.each((d, i, n) => {
-
-				let legend  = d3.select(n[i]);
-				let rect    = legend.select('rect');
-				let name    = legend.attr('data-name');
-				let path    = this._paths[name];
+	},
 
-				let tx      = v[i] * 55;
-				let ty      = xAxesB * 2;
+	_updateMargins: function() {
+		// Get chart margins
+		let xAxesB  = this._axis.selectAll('.x.axis.bottom').nodes().length;
+		let xAxesL  = this._axis.selectAll('.y.axis.left').nodes().length;
+		let xAxesR  = this._axis.selectAll('.y.axis.right').nodes().length;
+		let marginB = 60 + (xAxesB * 2);
+		let marginL = 10 + (xAxesL * 30);
+		let marginR = 40 + (xAxesR * 30);
 
-				legend
+		let marginsUpdated = false
 
-				// Adjust legend item positions
-				.attr("transform", "translate(" + tx + ", " + ty + ")");
+		// Adjust right margin
+		if (xAxesR && this.options.margins.right < marginR) {
+			this.options.margins.right  = marginR;
+			marginsUpdated = true;
+		}
 
-				// Set initial state (disabled controls)
-				if (name in this.options && this.options[name] == 'disabled') {
-					path.classed('leaflet-hidden', true);
-					legend.select('text').style('text-decoration-line', 'line-through');
-					legend.select('rect').style('fill-opacity', '0');
-				}
+		// Adjust left margin
+		if(xAxesL && this.options.margins.left < marginL) {
+			this.options.margins.left = marginL;
+			marginsUpdated = true;
+		}
 
-				// Apply d3-zoom (bind <clipPath> mask)
-				if (this._mask) {
-					path.attr('mask', 'url(#' + this._mask.attr('id') + ')');
-				}
+		// Adjust bottom margin
+		if(xAxesB && this.options.margins.bottom < marginB) {
+			this.options.margins.bottom = marginB;
+			marginsUpdated = true;
+		}
 
-			});
+		if (marginsUpdated) {
+			this.fire('margins_updated');
+		}
 	},
 
 	_updateScale: function() {
@@ -733,6 +746,21 @@ export var Chart = L.Control.Elevation.Chart = L.Class.extend({
 			}));
 	},
 
+	_togglePath(name, enabled = true, lazy = false) {
+		let path    = this._paths[name];
+		let legend  = this._container.select('.legend [data-name=' + name + ']');
+		path.classed('leaflet-hidden', !enabled);
+		legend.select('text').style('text-decoration-line', enabled ? '' : 'line-through');
+		legend.select('rect').style('fill-opacity', enabled ? '': '0');
+		// Apply d3-zoom (bind <clipPath> mask)
+		if (this._mask) {
+			path.attr('mask', 'url(#' + this._mask.attr('id') + ')');
+		}
+		if (!lazy) {
+			this._updateArea();
+		}
+	},
+
 	_hideDiagramIndicator: function() {
 		this._tooltip.attr("display", 'none');
 	},

package/src/components/d3.js

@@ -205,7 +205,6 @@ export const LegendItem = ({
 			.text(L._(label || name))
 			.attr("x", (width / 2) + 5)
 			.attr("font-size", 10)
-			.style("text-decoration-thickness", "2px")
 			.style("font-weight", "700")
 			.attr('y', height + margins.bottom / 2)
 			.attr('dy', "0.75em");
@@ -214,6 +213,70 @@ export const LegendItem = ({
 	}
 };
 
+export const LegendSmall = ({
+	width,
+	height,
+	items,
+	onClick
+}) => {
+	return g => {
+		let idx = 0;
+
+		g.data([{
+			x: width,
+			y: height + 40
+		}]).attr("transform", d => "translate(" + d.x + "," + d.y + ")").classed('legend-switcher');
+
+		// let label  = g.selectAll(".legend-switcher-label")  .data([{ idx: 0 }]);
+		let label = g.append('svg:text')
+						.attr("class", "legend-switcher-label")
+						.attr("text-anchor", "end")
+						.attr("x", -25)
+						.attr("y", 5)
+						.on("mousedown", (e, d) => setIdx(L.Util.wrapNum((idx + 1), [0, items.length])));
+
+		let symbol = g.selectAll(".legend-switcher-symbol").data([
+			{ type: d3.symbolTriangle, x: 0,   y: 3, angle: 0,   size: 50, id: "down" },
+			{ type: d3.symbolTriangle, x: -13, y: 0, angle: 180, size: 50, id: "up" }
+		]);
+
+		symbol.exit().remove();
+		label.exit().remove();
+	
+		symbol.enter()
+			.append("svg:path")
+			.attr("class", "legend-switcher-symbol")
+			.attr("cursor", 'pointer')
+			.attr("fill", "#000")
+			.merge(symbol)
+			.attr("d", 
+				d3.symbol()
+				.type(d => d.type)
+				.size(d => d.size)
+			)
+			.attr("transform", d => "translate(" + d.x + "," + d.y + ") rotate(" + d.angle + ")")
+			.on("mousedown", (e, d) => setIdx(L.Util.wrapNum((d.id === "up" ? idx + 1 : idx - 1), [0, items.length])));
+
+		const setIdx = (id) => {
+			idx = id;
+			// label.enter()
+			// 	.append('text')
+			// 	.attr("class", "legend-switcher-label")
+			// 	.attr("text-anchor", "end")
+			// 	.attr("x", -25)
+			// 	.attr("y", 5)
+			// 	.merge(label.data([{ idx: id }]))
+			// 	.text(d => items.length ? (items[idx][0].toUpperCase() + items[idx].slice(1)) : '')
+			// 	.on("mousedown", (e, d) => setIdx(L.Util.wrapNum((idx + 1), [0, items.length])));
+			label.text(items.length ? (items[idx][0].toUpperCase() + items[idx].slice(1)) : '');
+			onClick(items[idx]);
+		};
+		setIdx(0);
+		
+		return g;
+	};
+};
+
 export const Tooltip = ({
 	xCoord,
 	yCoord,
@@ -300,27 +363,21 @@ export const Ruler = ({
 	return g => {
 
 		g.data([{
-				"x": 0,
-				"y": height,
+				x: 0,
+				y: height,
 			}])
 			.attr("transform", d => "translate(" + d.x + "," + d.y + ")");
 
-		let rect   = g.selectAll('.horizontal-drag-rect')
-			.data([{ w: width }]);
-
-		let line   = g.selectAll('.horizontal-drag-line')
-			.data([{ w: width }]);
-
-		let label  = g.selectAll('.horizontal-drag-label')
-			.data([{ w: width - 8 }]);
-
+		let rect   = g.selectAll('.horizontal-drag-rect').data([{ w: width }]);
+		let line   = g.selectAll('.horizontal-drag-line').data([{ w: width }]);
+		let label  = g.selectAll('.horizontal-drag-label').data([{ w: width - 8 }]);
 		let symbol = g.selectAll('.horizontal-drag-symbol')
 			.data([{
-				"type": d3.symbolTriangle,
-				"x": width + 7,
-				"y": 0,
-				"angle": -90,
-				"size": 50
+				type: d3.symbolTriangle,
+				x: width + 7,
+				y: 0,
+				angle: -90,
+				size: 50
 			}]);
 
 		rect.exit().remove();