Leaflet Elevation plugin with dynamic markers

What I did recently was a simple app, that receives GeoJSON data from server via HTML5 Server Sent Events, and visualize the data, as a moving marker with Leaflet library. This works very well, but the great elevation plugin, Leaflet.Elevation haven’t had any ability to visualize the marker in its elevation window. But now it has!

Leaflet.Elevation uses awesome d3 library, to visualize the data. It transforms the incoming GeoJSON/GPX data, into an array of objects, where every object represents the X as a distance from the beggining, and Y as a altitude. D3 library helps scale the distance and altitude to the pixels, with built-in functions:

The solution for dynamic markers is quite simple. First, we need to register the marker with the plugin:

Then the code registers “onmove” event for Marker, so every time marker changes its position, the circle with move. The circle itself is created with d3, and the x and y coordinates are taken from the code above.

The _findItemForLatLng() function searches the data array for the item that is the closest to the marker. It has a little bug. It assumes, that the marker is on the path, or at least very close. If you put the marker far away the path, it still find you the closest entry in the data array

The code is still in progress, and you must know that I’m not a JavaScript developer, but this looks very well. When it’s done, I’ll create a pull request.

And here is the example:

2 thoughts on “Leaflet Elevation plugin with dynamic markers

Leave a Reply

Your email address will not be published. Required fields are marked *