@raruto/leaflet-elevation 1.9.2 → 1.9.3

package/package.json

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

@@ -116,9 +116,11 @@ export const PositionMarker = ({
 }) => {
 	return g => {
 
-		let line = g.select('.height-focus.line');
+		g.attr("class", "height-focus-group");
+
+		let line   = g.select('.height-focus.line');
 		let circle = g.select('.height-focus.circle-lower');
-		let text = g.select('.height-focus-label');
+		let text   = g.select('.height-focus-label');
 
 		if (!line.node()) line = g.append('svg:line');
 		if (!circle.node()) circle = g.append('svg:circle');

package/src/control.js

@@ -17,7 +17,7 @@ export const Elevation = L.Control.Elevation = L.Control.extend({
 	__TOGEOJSON:   'https://unpkg.com/@tmcw/togeojson@4.5.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.9.2/libs/leaflet-distance-marker.min.js',
+	__LDISTANCEM:  'https://unpkg.com/@raruto/leaflet-elevation@1.9.3/libs/leaflet-distance-marker.min.js',
 
 	/*
 	 * Add data to the diagram either from GPX or GeoJSON and update the axis domain and data

package/src/marker.js

@@ -10,8 +10,6 @@ export var Marker = L.Class.extend({
 		switch(this.options.marker) {
 			case 'elevation-line':
 				// this._container = d3.create("g").attr("class", "height-focus-group");
-				this._container = d3.select(map.getPane('elevationPane')).select("svg > g")
-					.attr("class", "height-focus-group");
 			break;
 			case 'position-marker':
 				// this._marker   = L.circleMarker([0, 0], { pane: 'overlayPane', radius: 6, fillColor: '#fff', fillOpacity:1, color: '#000', weight:1, interactive: false });
@@ -27,7 +25,7 @@ export var Marker = L.Class.extend({
 	addTo: function(map) {
 		this._map = map;
 		switch(this.options.marker) {
-			case 'elevation-line':  this._container.call(D3.PositionMarker({}));      break;
+			case 'elevation-line':  this._container = d3.select(map.getPane('elevationPane')).select("svg > g").call(D3.PositionMarker({})); break;
 			case 'position-marker': this._marker.addTo(map, { pane: 'overlayPane' }); break;
 		}
 		return this;
@@ -49,18 +47,20 @@ export var Marker = L.Class.extend({
 
 		switch(this.options.marker) {
 			case 'elevation-line':
-				let point   = this._map.latLngToLayerPoint(this._latlng);
-				point = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
-		
-				this._container.classed("leaflet-hidden", false);
-				this._container.call(D3.PositionMarker({
-					theme : this.options.theme,
-					xCoord: point.x,
-					yCoord: point.y,
-					length: point.y - (this._height() / props.maxElevation * point.z), // normalized Y
-					labels: this._labels,
-					item: point
-				}));
+				if (this._container) {
+					let point = this._map.latLngToLayerPoint(this._latlng);
+					point     = L.extend({}, props.item, this._map._rotate ? this._map.rotatedPointToMapPanePoint(point) : point);
+
+					this._container.classed("leaflet-hidden", false);
+					this._container.call(D3.PositionMarker({
+						theme : this.options.theme,
+						xCoord: point.x,
+						yCoord: point.y,
+						length: point.y - (this._height() / props.maxElevation * point.z), // normalized Y
+						labels: this._labels,
+						item: point
+					}));
+				}
 			break;
 			case 'position-marker':
 				_.removeClass(this._marker.getElement(), 'leaflet-hidden');