@raruto/leaflet-elevation 1.8.0 → 1.8.3

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

@@ -1,6 +1 @@
-'use strict';L.DistanceMarkers=L.LayerGroup.extend({initialize:function(line,map,options){options=options||{};var offset=options.offset||1E3;var showAll=Math.min(map.getMaxZoom(),options.showAll||12);var cssClass=options.cssClass||"dist-marker";var iconSize=options.iconSize!==undefined?options.iconSize:[12,12];var textFunction=options.textFunction||function(distance,i,offset){return i};var zoomLayers={};var coords=line;if(typeof line.getLatLngs=="function")coords=line.getLatLngs();var accumulated=
-L.GeometryUtil.accumulatedLengths(line);var length=accumulated.length>0?accumulated[accumulated.length-1]:0;var j=0;var count=Math.floor(length/offset);for(var i=1;i<=count;++i){var distance=offset*i;while(j<accumulated.length-1&&accumulated[j]<distance)++j;var p1=coords[j-1];var p2=coords[j];var m_line=L.polyline([p1,p2]);var ratio=(distance-accumulated[j-1])/(accumulated[j]-accumulated[j-1]);var position=L.GeometryUtil.interpolateOnLine(map,m_line,ratio);var text=textFunction.call(this,distance,
-i,offset);var icon=L.divIcon({className:cssClass,html:text,iconSize:iconSize});var marker=L.marker(position.latLng,{title:text,icon:icon});var zoom=this._minimumZoomLevelForItem(i,showAll);if(zoomLayers[zoom]===undefined)zoomLayers[zoom]=L.layerGroup();zoomLayers[zoom].addLayer(marker)}var currentZoomLevel=0;var markerLayer=this;var updateMarkerVisibility=function(){var oldZoom=currentZoomLevel;var newZoom=currentZoomLevel=map.getZoom();if(newZoom>oldZoom)for(var i=oldZoom+1;i<=newZoom;++i){if(zoomLayers[i]!==
-undefined)markerLayer.addLayer(zoomLayers[i])}else if(newZoom<oldZoom)for(var i=oldZoom;i>newZoom;--i)if(zoomLayers[i]!==undefined)markerLayer.removeLayer(zoomLayers[i])};map.on("zoomend",updateMarkerVisibility);this._layers={};updateMarkerVisibility()},_minimumZoomLevelForItem:function(item,showAllLevel){var zoom=showAllLevel;var i=item;while(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(){if(this._map&&this._distanceMarkers)this._map.addLayer(this._distanceMarkers)},removeDistanceMarkers:function(){if(this._map&&this._distanceMarkers)this._map.removeLayer(this._distanceMarkers)},onAdd:function(map){this._originalOnAdd(map);var opts=this.options.distanceMarkers||{};if(this._distanceMarkers===undefined&&this.options.distanceMarkers)this._distanceMarkers=
-new L.DistanceMarkers(this,map,opts);if(opts.lazy===undefined||opts.lazy===false)this.addDistanceMarkers()},onRemove:function(map){this.removeDistanceMarkers();this._originalOnRemove(map)}});
+L.DistanceMarkers=L.LayerGroup.extend({initialize:function(line,map,options){var offset=(options=options||{}).offset||1e3,showAll=Math.min(map.getMaxZoom(),options.showAll||12),cssClass=options.cssClass||"dist-marker",iconSize=void 0!==options.iconSize?options.iconSize:[12,12],textFunction=options.textFunction||function(distance,i,offset){return i},zoomLayers={},coords=line;"function"==typeof line.getLatLngs&&(coords=line.getLatLngs());for(var accumulated=L.GeometryUtil.accumulatedLengths(line),length=accumulated.length>0?accumulated[accumulated.length-1]:0,j=0,count=Math.floor(length/offset),i=1;i<=count;++i){for(var distance=offset*i;j<accumulated.length-1&&accumulated[j]<distance;)++j;var 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),text=textFunction.call(this,distance,i,offset),icon=L.divIcon({className:cssClass,html:text,iconSize:iconSize}),marker=L.marker(position.latLng,{title:text,icon:icon}),zoom=this._minimumZoomLevelForItem(i,showAll);void 0===zoomLayers[zoom]&&(zoomLayers[zoom]=L.layerGroup()),zoomLayers[zoom].addLayer(marker)}var currentZoomLevel=0,markerLayer=this,updateMarkerVisibility=function(){var oldZoom=currentZoomLevel,newZoom=currentZoomLevel=map.getZoom();if(newZoom>oldZoom)for(var i=oldZoom+1;i<=newZoom;++i)void 0!==zoomLayers[i]&&markerLayer.addLayer(zoomLayers[i]);else if(newZoom<oldZoom)for(var i=oldZoom;i>newZoom;--i)void 0!==zoomLayers[i]&&markerLayer.removeLayer(zoomLayers[i])};map.on("zoomend",updateMarkerVisibility),this._layers={},updateMarkerVisibility()},_minimumZoomLevelForItem:function(item,showAllLevel){for(var zoom=showAllLevel,i=item;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);var opts=this.options.distanceMarkers||{};void 0===this._distanceMarkers&&this.options.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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@raruto/leaflet-elevation",
-	"version": "1.8.0",
+	"version": "1.8.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

@@ -49,7 +49,7 @@ export var Chart = L.Class.extend({
 		this._initScale();
 
 		// Helpers
-		this._clipPath  = chart.get('clipPath');
+		this._mask  = chart.get('mask');
 		this._context   = chart.get('context');
 		this._brush     = chart.get('brush');
 
@@ -61,6 +61,13 @@ export var Chart = L.Class.extend({
 
 		// svg.on('resize', (e)=>console.log(e.detail));
 
+		// Handle multi-track segments (BETA)
+		this._maskGaps = [];
+		control.on('eletrack_added', (e) => {
+			this._maskGaps.push(e.index);
+			control.once('eledata_updated', (e) => this._maskGaps.push(e.index));
+		});
+
 	},
 
 	update: function(props) {
@@ -92,6 +99,9 @@ export var Chart = L.Class.extend({
 			// this._x.domain([0, 1]);
 			// this._y.domain([0, 1]);
 		// }
+
+		this._maskGaps = [];
+		this._mask.selectAll(".gap").remove();
 	},
 
 	_drawPath: function(name) {
@@ -178,6 +188,10 @@ export var Chart = L.Class.extend({
 			if (e.sourceEvent && e.sourceEvent.type == "mousedown") svg.style('cursor', 'grabbing');
 			if (e.transform.k == 1 && e.transform.x == 0) {
 				this._container.classed('zoomed', true);
+				// Apply d3-zoom (bind <clipPath> mask)
+				if (this._mask) {
+					this._point.attr('mask', 'url(#' + this._mask.attr('id') + ')');
+				}
 			}
 			this.zooming = true;
 		};
@@ -185,6 +199,10 @@ export var Chart = L.Class.extend({
 		const onEnd  = (e) => {
 			if (e.transform.k ==1 && e.transform.x == 0){
 				this._container.classed('zoomed', false);
+				// Apply d3-zoom (bind <clipPath> mask)
+				if (this._mask) {
+					this._point.attr('mask', null);
+				}
 			}
 			this.zooming = false;
 			svg.style('cursor', '');
@@ -497,6 +515,24 @@ export var Chart = L.Class.extend({
 				[this._width() - margin.right, Infinity]
 			]);
 
+		// Apply svg mask on multi-track segments (BETA)
+		this._mask.selectAll(".gap").remove()
+		this._maskGaps.forEach((d, i) => {
+			if(i >= this._maskGaps.length - 2) return;
+			let d1 = this._data[this._maskGaps[i]];
+			let d2 = this._data[this._maskGaps[i + 1]];
+			let x1 = this._x(this._data[this._findIndexForLatLng(d1.latlng)].dist);
+			let x2 = this._x(this._data[this._findIndexForLatLng(d2.latlng)].dist);
+			this._mask
+				.append("rect")
+				.attr("x", x1)
+				.attr("y", 0)
+				.attr("width", x2 - x1 )
+				.attr("height", this._height())
+				.attr('class', 'gap')
+				.attr('fill-opacity', '0.8')
+				.attr("fill", 'black');  // black = hide
+		});
 	},
 
 	_updateLegend: function () {
@@ -573,8 +609,8 @@ export var Chart = L.Class.extend({
 				}
 
 				// Apply d3-zoom (bind <clipPath> mask)
-				if (this._clipPath) {
-					path.attr('clip-path', 'url(#' + this._clipPath.attr('id') + ')');
+				if (this._mask) {
+					path.attr('mask', 'url(#' + this._mask.attr('id') + ')');
 				}
 
 			});

package/src/components.js

@@ -505,11 +505,11 @@ export const Chart = ({
 	};
 
 	// SVG Paths
-	const clipPath      = panes.area.append("svg:clipPath").attr("id", 'elevation-clipper');
-	const clipRect      = clipPath.append("svg:rect");
+	const mask          = panes.area.append("svg:mask").attr("id", 'elevation-clipper').attr('fill-opacity', 1);
+	const maskRect      = mask.append("svg:rect").attr('class', 'zoom').attr('fill', 'white'); // white = transparent
 
 	// Canvas Paths
-	const foreignObject = panes.area.append('svg:foreignObject');
+	const foreignObject = panes.area.append('svg:foreignObject').attr('mask', 'url(#' + mask.attr('id') + ')');
 	const canvas        = foreignObject.append('xhtml:canvas').attr('class', 'canvas-plot');
 	const context       = canvas.node().getContext('2d');
 
@@ -523,7 +523,7 @@ export const Chart = ({
 	const scale = (opts) => ({ x: Scale(opts.x), y: Scale(opts.y)});
 
 	let utils = {
-		clipPath,
+		mask,
 		canvas,
 		context,
 		brush,
@@ -560,7 +560,7 @@ export const Chart = ({
 			.style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
 		}
 
-		clipRect
+		maskRect
 			.attr("x", 0)
 			.attr("y", 0)
 			.attr("width", _width)

package/src/control.js

@@ -17,7 +17,7 @@ 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.5/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.8.3/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data
@@ -997,6 +997,7 @@ Elevation.addInitHook(function() {
 					}
 				});
 		}
+
 	});
 
 	// Basic canvas renderer support.

package/src/index.css

@@ -36,7 +36,6 @@
   user-select: none;
 }
 
-.elevation-control.elevation .background.zoomed .point,
 .elevation-control.elevation .background.zoomed .axis.time {
   display: none;
 }

package/src/utils.js

@@ -58,6 +58,23 @@ export function GeoJSONLoader(data, control) {
 
 	let { wptIcons, wptLabels } = control.options;
 
+	// Partially fix MultiLineStrings (trk > trkseg + trkseg) splitting them into seperate LineStrings (trk > trkseg, trk > trkseg)
+	data.features.forEach(d => {
+		if(d.type == 'Feature' && d.geometry.type == "MultiLineString") {
+			d.geometry.coordinates.forEach(coords => {
+				data.features.push({
+					type: 'Feature',
+					geometry: {
+						type: 'LineString',
+						coordinates: coords,
+					},
+					properties: d.properties
+				});
+			});
+		} 
+	});
+	data.features = data.features.filter(d=> d.type && d.geometry.type != "MultiLineString");
+
 	let layer = L.geoJson(data, {
 		distanceMarkers: distanceMarkers,
 		style: (feature) => {