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.

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

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.

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!

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!

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

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?

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:

• it is good idea to have options for translation, I mean to have option node to pass translation for tags, for example

Total Length: 264.69 km Max Elevation: 84.90 m Min Elevation: 6.60 m

• have parameter to disable change polyline style. Lets to tell a little about.
  -- I use your plugin in part to display only chart, I mean I parse my GPX/KML files by myself and pass only polyline data as call addData method. But in it you do

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

<!-- 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

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:

1. Is there a way to disable the buttons: "Print map", "Search...", "Show me where I am" and the "Google Street View manikin"? If so, how?
2. Is is possible to set specfic colors (e.g. hex code) for both the line in the map and the elevation plot (and background)? I am currently using Geojson as data input.

Would it be okay to open up more issues if I have more questions?

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 ?

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.

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

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

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

Hi.
Thanks again for your work. It's me again.

Here my diagram

In my data there is no empty ele tags, but I have break to low value

I can give you my GPX file

In addition to this as you can see yAxis have the wrong padding with value more than 1000

;)
Dmitry

hello
Good job.
How can I add my current position on the chart and map? Retrieved from a file or sqllie database?

Can you please tell me if any possible way is there to use the library without gpx

Found the solution using geoJson

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

Hello,

What do you think about the positive elevation information ?

It could by computed and add with the others informations.

Best regards,
Manu

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!

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!

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?

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

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 :) )

When imperial:true is set, the Max Elevation in the chart seems to be set to Infinity.

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!

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.

Hi,

From the following example,
first upload works fine, second one without reloading the page keeps previous data under the elevation graphic.

Cheers

On long distance routes the pointer runs along the route and the map moves jerky. On short routes the movement is smooth

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.

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!

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?

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.

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?

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

Hello,

Very nice plugin.

Could you add a i18n for Download link.

Many thanks.

I'm not a QGIS programming expert, but it seems feasible...

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

Hi @serako,

for when you will have some time (after #6), could you provide to everyone else a simple and concrete example of how to view/load multiple GPX files using the same elevation chart diagram? (so as to insert it among the other examples of this library...)

Thanks in advance,
Raruto

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,

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

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:

• In Safari it shows a map without the trail and without the altitude graph.
• In Firefox it shows the map again without the trail visible but with an somewhat disturbed altitude graph under it..

Do you have any idea what in the Theme may cause this and how to prevent it?
Thank you in advance!

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!

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?

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 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

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);
    }