ruler on leaflet-elevation_hoverable-tracks.html

[hupe13]

Hi Raruto,

please see your example loading multiple .gpx tracks (hover to toggle ).
You move with the mouse over a track, the chart and the ruler appear. Now you click on any track on the map, the chart disappears. Next you move with the mouse over a track again, the chart appears, the ruler doesn't.

How to fix this?

[Raruto]

Hi @hupe13,

basically the control doesn't redraw the Ruler after calling remove() → addTo(map)

leaflet-elevation/libs/leaflet-gpxgroup.js

Lines 279 to 301 in bd9316b

	_onSelectionChanged: function(e) {
	var elevation = this._elevation;
	var eleDiv = elevation.getContainer();
	var route = this.getSelection();
	elevation.clear();
	if (route && route.isSelected()) {
	if (!eleDiv) {
	elevation.addTo(this._map);
	}
	route.getLayers().forEach(function(layer) {
	if (layer instanceof L.Polyline) {
	elevation.addData(layer, false);
	layer.bringToFront();
	}
	});
	} else {
	if (eleDiv) {
	elevation.remove();
	}
	}
	},

leaflet-elevation/src/control.js

Lines 1201 to 1217 in bd9316b

	/**
	* Hacky way for handling chart resize. Deletes it and redraw chart.
	*/
	_resizeChart() {
	if (this._container && _.style(this._container, "display") != "none") {
	let opts = this.options;
	let newWidth = opts.detached ? (this.eleDiv || this._container).offsetWidth : _.clamp(opts._maxWidth, [0, this._map.getContainer().clientWidth - 30]);
	if (newWidth) {
	opts.width = newWidth;
	if (this._chart && this._chart._chart) {
	this._chart._chart._resize(opts);
	this._updateChart();
	}
	}
	this._updateMapSegments();
	}
	},

leaflet-elevation/src/components/d3.js

Lines 602 to 641 in bd9316b

	chart._resize = ({
	width,
	height,
	margins = {},
	ruler,
	}) => {
	const w = width - margins.left - margins.right;
	const h = height - margins.top - margins.bottom;
	svg .attr("width", width).attr("height", height).attr("viewBox", `0 0 ${width} ${height}`);
	g .attr("transform", "translate(" + margins.left + "," + margins.top + ")");
	// Fix: https://github.com/Raruto/leaflet-elevation/issues/123
	// Fix: https://github.com/Raruto/leaflet-elevation/issues/232
	if (
	/Mac|iPod|iPhone|iPad/.test(navigator.platform) &&
	/AppleWebkit/i.test(navigator.userAgent) &&
	!/Chrome/.test(navigator.userAgent)
	) {
	canvas .style("transform", "translate(" + margins.left + "px," + margins.top + "px)");
	}
	maskRect .attr("width", w).attr("height", h).attr("x", 0).attr("y", 0);
	foreignObject.attr('width', w).attr('height', h);
	canvas .attr('width', w).attr('height', h);
	if (ruler) {
	panes.ruler.call(Ruler({ height: h, width: w }));
	}
	panes.brush.call(brush.extent( [ [0,0], [w, h] ] ));
	panes.brush.select(".overlay").attr('cursor', null);
	chart._width = w;
	chart._height = h;
	chart.svg.dispatch('resize', { detail: { width: w, height: h } } );
	};

---

Below some offending lines:

• eleDiv may never change on subsequent call to addTo(map)

leaflet-elevation/src/control.js

Line 248 in bd9316b

if (!this.eleDiv) this.eleDiv = container;

leaflet-elevation/src/control.js

Line 1207 in bd9316b

let newWidth = opts.detached ? (this.eleDiv || this._container).offsetWidth : _.clamp(opts._maxWidth, [0, this._map.getContainer().clientWidth - 30]);

• opts.ruler may be undefined

leaflet-elevation/src/control.js

Line 1211 in bd9316b

this._chart._chart._resize(opts);

leaflet-elevation/src/components/d3.js

Lines 629 to 631 in bd9316b

	if (ruler) {
	panes.ruler.call(Ruler({ height: h, width: w }));
	}

leaflet-elevation/src/components/d3.js

Line 646 in bd9316b

chart._resize({ width, height, margins});

👋 Raruto