Leaflet.Elevation
Leaflet.Elevation copied to clipboard
Request
Is the following possible?
Now hovering the elevation graph will display the current position on the map, but what about the other way around too? Hovering on the map at a specific point will show that exact point at the elevation graph ?
Btw, I am using gpx files
Yes, this is already implemented, but seems neither to be documented in the readme nor used in the demos.
It only works if addData
is called with a second layer
parameter that either is null
or a Leaflet Layer representing or containing the track.
I'm actually having the opposite problem .. Implemented as from the example I can hover the track but the graph is not "hoverable" and no indicator on the map .. I'm using Leaflet 1.1.0, bootstrap 4.0alpha. ANy suggestion? thanks
Probably #67?
Replaced L.Browser.touch by L.Browser.mobile in leaflet.elevation-0.0.4.min.js. and it works! thanks, sorry my mistake for some reasons I was not able to refresh the cache and the edit didn't took place.. so this fix the problem!
@nrenner Could you explain your solution further? I don't fully understand how to add it.
The addData
function needs to get passed the GPX layer g
as a second parameter:
var g=new L.GPX("./mytrack.gpx", {async: true});
g.on("addline",function(e){
//el.addData(e.line);
el.addData(e.line, g);
});
See modified demo (hover blue line to show position marker in graph): http://plnkr.co/edit/qlmrze0YPdLayxU9Fekb?p=preview
For GeoJSON this already works implicitly when using addData
as onEachFeature
listener with parameters (feature, layer)
. See modified demo (online demo uses old 0.0.2 version):
http://plnkr.co/edit/v68yhhCA4GSr5VT77ks9?p=preview
By default, the marker will remain on the elevation profile after the mouse leaves the GPX/GeoJSON layer on the map.
You can easily modify this by adding a "mouseout" event in addData():
if (layer) {
layer.on("mousemove", this._handleLayerMouseOver.bind(this)).
on("mouseout", this._mouseoutHandler.bind(this));
}
See also pending PR #53