raruto / leaflet-elevation Goto Github PK
View Code? Open in Web Editor NEWLeaflet plugin that allows to add elevation profiles using d3js
License: GNU General Public License v3.0
Leaflet plugin that allows to add elevation profiles using d3js
License: GNU General Public License v3.0
When imperial:true
is set, the Max Elevation in the chart seems to be set to Infinity
.
Hi Raruto,
Thanks for your great work!
I would like to ask you a question about an issue I have when I import this GPX file:
It is a loop of 49km, you can verify it with several tools:
But when I import this file into leaflet-elevation using your example here I obtain a 77km track.
It looks like there is a little problem...
Thanks for your help
Hi Raruto.
Not really an issue, more of a question about how to add circles on top of the elevation graph, something similar to: https://bl.ocks.org/d3noob/38744a17f9c0141bcd04
The circles will come from a geojson file.
What I would like is just some tips on where to look in your code to make the changes, if you don't mind. I am not really an expert in JavaScript, that's why some suggestions on how to approach this would be much appreciated.
I didn't find any e-mail, so I am just writing this here.
In the end I just want to thank you for developing this project!
Hi.
It is me again.
I get error of behaviour.
When I enable 0.8.0 or current release - I got correct diagram, but if I click on it, it is removed, only axis. Click again - shown. But you can select range on it. Only click event.
If I click on mobile browser - the same
I check, in your example there is 0.6.8, and it gives correct behaviour.
Cheers,
Dmitry
Hi Raruto,
Thanks for a great Plugin! I like it a lot. Is it possible to separate the toggle button from the location of the chart? For example, I am using your Leaflet-elevation plugin on mobile, and it would be great if there were a way to have the button in the top-right but the chart in the bottom.
Thanks!
Tim
Sorry if this an improper way to contact you. I didn't find another way. I found your amazing solution for displaying GPX files with an altitude graph after looking for exactly that.
I am trying to implement this with very very basic knowledge about how to into a wordpress blog to display trails+elevation data. Unfortunately the map doesn't get displayed.
It leads to:
Error: Bounds are not valid.
fitBounds (leaflet.js:5:31707)
_resetView (leaflet-elevation.js:1183)
fire (leaflet.js:5:16833)
(anonymous function) (leaflet.js:5:43183)
(anonymous function)
I would be very happy if you could give me some hints how to implement this into a wordpress blog!
Thank you!
Hello. Thank you for your code.
In this example is it possible to move the cursor along the profile with code ?
What i want is create an animation.....
Thank you
If you move out the elevation trace, the curve collapse but the indicator is visible.
Option autohideindication == true/ false is same
I resolve this on uncomment this on line 490 and pass true on force variable :
_mouseoutHandler: function() {
this._hidePositionMarker(true);
},
some reason to uncomment?
Great plugin - really like it and plan to integrate it into my current project.
I have some questions regarding the configuration of your plugin. I was already looking into leaflet-elevation.js
but couldn't find what I am looking for - maybe because I barely have any js experience:
Would it be okay to open up more issues if I have more questions?
hello
Good job.
How can I add my current position on the chart and map? Retrieved from a file or sqllie database?
On long distance routes the pointer runs along the route and the map moves jerky. On short routes the movement is smooth
Can you please tell me if any possible way is there to use the library without gpx
Found the solution using geoJson
I have successfully loaded data from gpx and got all required info on website, however, i am trying to get data graph graph to put it as addition info on other place on page with:
map.on('eledata_loaded', function(e) {
var track = e.track_info;
console.log(track)
console.log(track.distance)
$('.distance').innerHTML = track.distance.toFixed(2) + " km";
$('.elevation-gain').innerHTML = track.ele.toFixed(0) + " m";
});
I receive empty HTML with console log:
{distance: 0, elevation_max: 0, elevation_min: 0, type: "gpx", name: "Test GPX"}
I am not sure why it wont detect track_info.
Also, is there possibility to get addition info from track like in original leaflet-gpx plugin
for example: Cumulative Elevation Gain and Loss (not min and max)
Regards
Is it possible to have a link to a gpx track that is outside of the map? I would like to list all of the GPX files in a left-side column, with the map loaded in the remaining right column (similar to this layout).
How can I accomplish this?
Hello,
I use leaflet-elevation-gpx waypoint icons for the following example.
What I would like to do, if possible, is when you hover the cursor over the graph, the point moves over the plot and the map stays stationary.
Thank you for your help.
Jean Marc
I'm not a QGIS programming expert, but it seems feasible...
Hello,
What do you think about the positive elevation information ?
It could by computed and add with the others informations.
Best regards,
Manu
Hi,
Sorry for asking again a maybe stupid question.
After applying your solution for my first problem (adding a leaflet-map-container
element around the map) , I stumbled upon another problem.
When using the standard Wordpress Theme Twenty Twenty, the map and altitude graph get displayed as expected in (Firefox, Chrome, Safari). But when changing the theme to, in my case, Fabulist it isn't anymore:
Do you have any idea what in the Theme may cause this and how to prevent it?
Thank you in advance!
Hi Raruto,
I post this issue here as it could help others too. You can probably merge it with this closed issue.
I'm trying to display several Points of Interest using the DiagramIndicators on the elevation chart on data load (NOT on mouse move event). Something like this:
I have carefully tried to understand all the events that could fire this function, without success.
I have created my function called _showUserDiagramIndicator(item, xCoord); and I could test it on _mousemoveHandler function (as you explained above). It displays what I want when I mouseover the chart.
But I cannot figure out how to call it on data load.
I have also tried to call _showUserDiagramIndicator(item, xCoord); in addData: function(d, layer) or in initialize: function(options) but these functions are not called with the same arguments so it does not work. I have erros like _TypeError: this.data is undefined
Any help is appreciated!
Thanks,
Paul
Good morning,
Based on the example on this page: https://github.com/Raruto/leaflet-elevation I created a map with an elevation profile following the attached file.
My question is what lines of code should be inserted to add an IGN map background ( GEOGRAPHICALGRIDSYSTEMS.MAPS).
Thank you in advance.
Jean Marc
leaflet-elevation.txt
When I call .clear()
on my terrain profiler, the graph clears out but the line get's left on the map. I can see where _clearPath()
goes and removes class names from the <path>
element, but this doesn't appear to affect the line on the map at all. So I'm unsure what the objective is.
I would expect the polyline that's drawn when I load in data to disappear (if not remove the g->svg->path
elements altogether).
If this is expected behavior, I'd like to remove the line when I clear the profile data in preparation to display a new profile and line. I found that I can remove the graph from the map entirely with .remove()
, but the line persists.
Hello! I love this plugin, but I'm wondering if there is a way to disable the zooming and re-centering of the map that occurs when a user enters or exits fullscreen mode?
For example, a user might be zoomed in on a particular portion of a gpx route. Upon entering fullscreen mode, the map zooms out and re-centers to show the complete gpx route. This might make for a poor user experience if someone is tracking their hiking route in real time with GPS location control.
Thanks!
Hi,
This is not really an issue, but do you know how I can add a Start and End Icon on the map using your plugin ? On a map based on this example
Thanks for your awesome job !
JF
Hey Raruto, here is a strange behavior I've noticed and tried to solve without success:
In this URL I load a static GPX file from an URL and I calculate the elevation gain. Everything goes fine, you can see in the chart summary, it is displayed after the Total.
var GPXurl = "http://193.70.42.160/test/jeudimatin.gpx";
var controlElevation2 = L.control.elevation(opts.elevationControl2.options);
controlElevation2.addTo(map);
controlElevation2.load(GPXurl);
map.on('eledata_loaded', function(e) {
var q = document.querySelector.bind(document);
var track = e.track_info;
var layer = e.layer;
// Advanced summary info
gain = layer.get_elevation_gain() ;
loss = layer.get_elevation_loss() ;
// layer.get_total_time();
// layer.get_total_speed();
map.fitBounds(e.target.getBounds());
//alert(gain);
//document.getElementById("dplus").innerHTML = gain.toFixed(2) + " m";
q('.gain .summaryvalue').innerHTML = gain.toFixed(0) + " m";
});
Now, in this other URL, I have used your GPX local file loader at topright position to select the same GPX file which has correct elevation data inside. I then try to calculate the same elevation gain like this below in the data:loaded function. Nothing happens and the elevation chart does not display,
fileLayer.loader.on('data:loaded', function(e) {
if (layer) layer.remove();
layer = e.layer;
//gpx_layer = e.target.getLayers()[0];
gain = e.layer.get_elevation_gain() ;
if (!controlElevation._map) controlElevation.addTo(map);
else controlElevation.redraw();
map.locate({setView: false, maxZoom: 17, watch:true});
q('.gain .summaryvalue').innerHTML = gain.toFixed(0) + " m";
});
If I comment this line: gain = e.layer.get_elevation_gain();
then the chart loads but of course no gain is reported. As if the get_elevation_gain function has not been defined for the layer when using the var fileLayer = L.Control.fileLayerLoad
. But I have no error in the console.
Many thanks for your help,
Paul
<!-- D3.js -->
<script src="https://unpkg.com/[email protected]/build/d3.min.js" charset="utf-8"></script>
<!-- Leaflet (JS/CSS) -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- leaflet-geometryutil -->
<script src="https://unpkg.com/[email protected]/src/leaflet.geometryutil.js"></script>
<!-- leaflet-distance-marker -->
<link rel="stylesheet" href="https://unpkg.com/@raruto/[email protected]/libs/leaflet-distance-marker.min.css" />
<script src="https://unpkg.com/@raruto/[email protected]/libs/leaflet-distance-marker.min.js"></script>
<!-- leaflet-gpx -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.4.0/gpx.js"></script>
<!-- leaflet-gpxgroup -->
<script src="https://unpkg.com/@raruto/[email protected]/libs/leaflet-gpxgroup.min.js"></script>
<!-- leaflet-elevation -->
<link rel="stylesheet" href="https://unpkg.com//@raruto/[email protected]/leaflet-elevation.min.css" />
<script src="https://unpkg.com/@raruto/[email protected]/leaflet-elevation.min.js"></script>
<link rel="stylesheet" href="div/leaflet.zoomdisplay.css" />
<script type="text/javascript" src="div/leaflet.zoomdisplay.js"></script>
<!-- leaflet-locatecontrol -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/L.Control.Locate.min.css" />
<script src="https://unpkg.com/[email protected]/dist/L.Control.Locate.min.js"></script>
I did some tests from version 0.5.0 until 0.6.6
Version 0.5.8 is the only one where the map zooms to level 15 when I move the mouse pointer inside the chart
Not really an issue but this is the only way I have to reach you.
Let me, firstly, say that this was a really good job from you!
Any plans on implementing a React component in order to use this with react-leaflet?
How can I remove te GPX info + downloadlink that you recently added?
elevationControl: {
url: 'gpx.gpx',
options: {
downloadLink: false, // not working
position: "topright",
theme: "lime-theme",
useHeightIndicator: true,
collapsed: true,
detachedView: false,
elevationDiv: "#elevation-div",
}
I added the line downloadLink: false, but that doesn't seem to work.
Hello,
Very nice plugin.
Could you add a i18n for Download link.
Many thanks.
Hello raruto,
I tested your example :
https://raruto.github.io/leaflet-elevation/examples/leaflet-elevation_hoverable-tracks.html
and I setted distanceMarkers to true to display distance. As you can test, the result seems like "unstable" : the track is selected but without any chang on color and distance not be displayed. or display distance, I must click on the track.
var routes = L.gpxGroup(tracks, {
points: points,
points_options: opts.points.options,
elevation: true,
elevation_options: {
theme: "lightblue-theme",
detachedView: true,
elevationDiv: '#elevation-div',
followPositionMarker: true,
zFollow: 15,
},
legend: true,
distanceMarkers: true, // <-- set distanceMarkers to true to display distance
});
Hi,
From the following example,
first upload works fine, second one without reloading the page keeps previous data under the elevation graphic.
Cheers
Not an issue (or yes, i don't know) but this is the only way I have to reach you.
Using clear() function the path entered in the map (with loadData() ) is not deleted.
How can I remove it?
Thank you for your job!!
(answer in Italian if you can :) )
In Chrome console appears:
Uncaught ReferenceError: d3 is not defined
at i._applyData (leaflet-elevation.js:939)
at i.addData (leaflet-elevation.js:134)
at i.<anonymous> (leaflet-elevation.js:402)
at i.fire (leaflet.js:5)
at i._parse_trkseg (gpx.min.js:1)
at i._parse_gpx_data (gpx.min.js:1)
at o (gpx.min.js:1)
at gpx.min.js:1
Many thanks for the valuable work.
Hi,
I use your plugins in detachedview=false, but when the weight screen is small, the elevation is not reduce on width.
I do this in line 73
if ( !opts.detachedView && opts.responsiveView) {
var respWidth = map._container.clientWidth;
opts.width = opts.width - 20 > respWidth ? respWidth - 20 : opts.width;
}
But it's not very nice because if you rotate your phone, the elevation graph don't adjust on the new width.
Hello,
I have a problem with integration of this plugin in a joomla html page: I lose the followMarker
functionality. For an example file, in simple html it's work fine, if I copy/paste the code in a joomla page I loose the functionality. The map move along the gpx trace when i scroll the histogram but without any pin and information.
I haven't any error in console.
Do you have any idea ?
Hi,
I'm experimenting your work, and well, thanks for this!
I noticed that the plugin only is able to read gpx
files. Would it be possible to add also other file format support, like geojson for example? I'm very interested in helping you if you are interested.
Based on : https://fr.wordpress.org/plugins/wp-gpx-maps/
What do you think about the fact to add Speed, Heart rate in the graph (of course if thes informations are available in gpx file)
Manu
Hi Raruto,
In your nice example, I've tried to find out which parameter allow me to display the distance milestones on the stroke. I've tried the following but without success:
// options
...
hoverNumber: {
decimalsX: 3, //decimals on distance (always in km)
decimalsY: 0, //deciamls on height (always in m)
},
...
Thanks for your help,
Paul
I have some trouble when loading gpx tracks on a local file (I see that in your example your gpx track is located on a real url).
The following image is on a local machine (and it's doing the job perfectly):
while this following image is the result when I load the exact same html
file but on a server (I'd so say in production):
So it seems that the issue is when I upload the track on the server. I get this error from firefox console:
XML Parsing Error: mismatched tag. Expected: </link>.
Location: http://...................................../maps/track.gpx
Line Number 26, Column 15:
Do you have any suggestion to solve this problem? Many thanks!
If there is existing GeoJSON data in the control and the clear()
method is called, this error appears.
It appears to be triggered by line 1205 when this._focusG
tries to set a style, but while the this._focusG.style
object exists, the visibility property is undefined.
if (this._focusG) {
this._focusG.style("visibility", "hidden");
}
Commenting out this line fixes the initial crash, but I don't know what it's purpose is so I guess there may be other side effects to doing so?
For now, I've replaced it with:
if (this._focusG.style.visibility)
this._focusG.style("visibility", "hidden");
}
but whether it ever matches I don't know.
Great plugin, thank you very much for that work! I'm actually implementing it in a new Wordpress theme for my website together with the latest version of Leaflet (1.5.1).
Initially I had some JS errors that prevented the GPS-Track from being displayed at the map (console: ReferenceError: Can't find variable: that leaflet-elevation.js:802) but I found a workaround for it (loaded the same GPX-file again with gpx.js, not clean but working).
Question: is it possible to manually set the position for the elevation profile's tooltip? Or preventing it from following the profile? While Chrome & Firefox handle to show it even if it goes out of canvas (height), Safari cuts it. At the end of the profile, when the tooltip goes off-canvas, it's cut in all three browsers I tried. Thank you!
Currently it seems that when a piece of area is selected in the elevation profile there is not possible to reset the view to the initial map. Would it be possible to add this feature?
I think you can have an option if we prefer have elevation zoom aera or indicator if we have a touch screen. because with touch screen it's not nice for moving the indicator!
for use with prefer indicator (i not implemented a condition with option!)
line 134 now 434 (but i don't try with our last modif)
if (L.Browser.touch) {
background (new focusrect?)
.on("touchmove", this._mousemoveHandler.bind(this));
// .on("touchmove.drag", this._dragHandler.bind(this))
// .on("touchstart.drag", this._dragStartHandler.bind(this))
// .on("touchstart.focus", this._mousemoveHandler.bind(this));
// L.DomEvent.on(this._container, 'touchend', this._dragEndHandler, this);
}
Hi.
I'm very appreciate you for development and support new features.
Your plugin is running on the last leaflet versions.
I have a few issues and improvement request.
First of it:
Total Length
: 264.69 km
Max Elevation
: 84.90 m
Min Elevation
: 6.60 m
if (layer._path) {
L.DomUtil.addClass(layer._path, 'elevation-polyline ' + this.options.theme);
}
and in this case I need to do rollback action
L.DomUtil.removeClass(fv_path._path, 'elevation-polyline');
L.DomUtil.removeClass(fv_path._path, 'lightblue-theme');
it is in case lightblue theme ;)
It is because in my file I have a few track segments with different color. And after this code I have all track in one color (theme color). I need to manage how to do with it.
It is good idea not change current line color to current theme color.
Cheers,
I'll post the other issues/improvements ;)
Dmitry
I used
https://unpkg.com/@raruto/[email protected]/leaflet-elevation.js
But this file is gone now.
When I use
https://github.com/Raruto/leaflet-elevation/blob/master/src/leaflet-elevation.js
I have an error
TypeError: controlElevation.loadChart is not a function
Thanks a lot for the work!
Hi,
It might be related to my data and customisations but in leaflet-elevation.js
, line 357
, I had to change
this._addPoint(coords[i][1], coords[i][0], coords[i][2]);
to
this._addPoint(coords[i][0], coords[i][1], coords[i][2]);
I can fork and make a PR if you want, but as I saw that the project evolved in the past few days I thought it would be faster to tell you.
Best, thanks for the plugin,
Good Morning,
for my project to visualize hiking routes in my home region (~70 routes) I plan to implement elevation charts.
I played around with your plug in and the example hoverable .gpx tracks. I do not fully understand what's going on, because I am still a beginner in programming. I just worked with your example and changed the GPS tracks and points for my needs. It worked so far but when I switch to version 0.4.9 it won't work. So I switched back to 0.3.9. It is not important which version I use.
Further question is, how can I give each route its defined colour on map and legend?
Hey there, thanks again for you work. I really love this plugin (and the leaflet-ui). I successfully integrated the leaflet-elevation plugin into my sports activity organizer - workoutizer.
Since it turns out really nice and was so simple to integrate, I'm now thinking about how to facilitate the functionality even further. Which is why I would like to know if it would be possible to somehow add additional plots for more activity data, e.g. heart rate, pace, speed, temperature, ...
It would be great to have multiple plots below each other displaying all kinds of data, which are all connected to each other via the hover cursor.
I am not asking you to do this for me, since it would clearly be above the scope of this project, rather than asking you to point me in the right directions, so I give it a try.
Thanks in advance!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.