Comments (3)
I don't believe that would be possible, since the only thing rendered is the polyline itself, and none of the individual points – presumably you'd need those to be rendered as distinct elements to have mouseover on each point to get its information and timestamp.
Maybe you could work something out with Polyline.closestLayerPoint()
? But that still wouldn't give you access to the additional information about that point of the line.
from leaflet-gpx.
I implemented this feature today by changing the code a little bit.
By changing
// add track
var l = new L.Polyline(coords, this._extract_styling(line, base_style, polyline_options));
to
// add track
tmp = this._extract_styling(line, base_style, polyline_options)
tmp.custom = coords;
var l = new L.Polyline(coords, tmp);
you're able to access the parsed coordinate objects, which contain not only the location but also the timestamp etc.
Then you can search for the Polyline layer and add invisible Markers for each coordinate, like this:
polyline_layer.options.custom.forEach(ll =>
L.marker([ll.lat, ll.lng], { clickable: false })
.bindPopup('Timestamp: ' + ll.meta.time.toLocaleTimeString())
.on('mouseover', function (e) {
this.openPopup();
})
.on('mouseout', function (e) {
this.closePopup();
})
.setOpacity(0)
.addTo(map);
);
It would be awesome if leaflet-gpx could raise an event for every trkpt
or let us access the coords with the meta data easily.
from leaflet-gpx.
I didn't do that because I'm worried about the performance impact of raising an event for every point on the track (could be thousands). Maybe as an opt-in?
from leaflet-gpx.
Related Issues (20)
- Choose multiple GPX via checkbox HOT 3
- Change the colour of the first X meters of the track HOT 1
- get_elevation_data() return empty Array HOT 2
- Empty waypoints at each end of the displayed track HOT 1
- iconSize ignored when using startIconUrl HOT 1
- Get latLng HOT 3
- Typescript error HOT 7
- Multiple gpx files: map fits only on the last GPX HOT 6
- Make gpx tracks clickable HOT 3
- Lazy loading large GPX track only when layer is enabled HOT 3
- group data and control display by years HOT 1
- GPX data seems consistently offset to the north HOT 7
- Module version of the plugin? HOT 5
- Change url and update track HOT 1
- ES Module HOT 2
- Simple example from README does not work. HOT 1
- Accessing waypoints HOT 3
- Cannot disable startIcon or endIcon HOT 1
- Cannot read properties of null (reading 'toFixed')
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet-gpx.