elevation graph buggy not properly color filled (ref: multi track segments)

fschn90 commented 1 year ago

elevation graph buggy not properly color filled sometimes

please see screenshot: Screenshot from 2023-03-23 23-36-18

Your environment

leaflet-elevation: 2.2.8
leaflet: 1.9.3
browser: Firefox 110.0.1 (64-bit)
operating system: Ubuntu 22.04.2 LTS
link to your project: see screenshot above and code below:

Steps to reproduce

<head>
<style> html, body, #map, #elevation-div { height: 100%; width: 100%; padding: 0; margin: 0; } #map { height: 500px; } #elevation-div { height: 25%; font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; } </style>

<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.css" />
<script src="https://unpkg.com/@raruto/leaflet-elevation/dist/leaflet-elevation.js"></script>

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />

</head>
<body>
        <div  id="binder"></div>
</body>


var elevation_options = {

    // Default chart colors: theme lime-theme, magenta-theme, ...
    theme: "lightblue-theme",

    // Chart container outside/inside map container
    detached: true,

    // if (detached), the elevation chart container
    elevationDiv: "#elevation-div",

    // if (!detached) autohide chart profile on chart mouseleave
    autohide: false,

    // if (!detached) initial state of chart profile control
    collapsed: false,

    // if (!detached) control position on one of map corners
    position: "bottomright",

    // Toggle close icon visibility
    closeBtn: true,

    // Autoupdate map center on chart mouseover.
    followMarker: true,

    // Autoupdate map bounds on chart update.
    autofitBounds: true,

    // Chart distance/elevation units.
    imperial: false,

    // [Lat, Long] vs [Long, Lat] points. (leaflet default: [Lat, Long])
    reverseCoords: false,

    // Acceleration chart profile: true || "summary" || "disabled" || false
    acceleration: false,

    // Slope chart profile: true || "summary" || "disabled" || false
    slope: false,

    // Speed chart profile: true || "summary" || "disabled" || false
    speed: false,

    // Altitude chart profile: true || "summary" || "disabled" || false
    altitude: true,

    // Display time info: true || "summary" || false
    time: false,

    // Display distance info: true || "summary" || false
    distance: true,

    // Summary track info style: "inline" || "multiline" || false
    summary: 'inline',

    // Download link: "link" || false || "modal"
    downloadLink: false,

    // Toggle chart ruler filter
    ruler: true,

    // Toggle chart legend filter
    legend: true,

    // Toggle "leaflet-almostover" integration
    almostOver: true,

    // Toggle "leaflet-distance-markers" integration
    distanceMarkers: false,

    // Toggle "leaflet-hotline" integration
    hotline: true,

    // Display track datetimes: true || false
    timestamps: false,

    // Display track waypoints: true || "markers" || "dots" || false
    waypoints: true,

    // Toggle custom waypoint icons: true || { associative array of <sym> tags } || false
    wptIcons: {
      '': L.divIcon({
        className: 'elevation-waypoint-marker',
        html: '<i class="elevation-waypoint-icon"></i>',
        iconSize: [20, 20],
        iconAnchor: [8, 20],
      }),
    },

    // Toggle waypoint labels: true || "markers" || "dots" || false
    wptLabels: "markers",

    // Render chart profiles as Canvas or SVG Paths
    preferCanvas: true,

  };

    var binder = window.leafletMap = L.map(binder).setView([51.505, -0.09], 2);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
    }).addTo(binder);
    L.control.scale().addTo(binder);
    new L.Control.Fullscreen().addTo(binder);
    var controlElevation = L.control.elevation(elevation_options).addTo(binder);
    controlElevation.load(gpx_file);

Expected behaviour

a fully filled with color elevation graph, like this: Screenshot from 2023-03-25 10-37-41

Actual behaviour

see attached screenshot. looks buggy, and is a not fully filled with color elevation graph. happens about 1/3 in page loads

fschn90 commented 1 year ago

is there some kind of size limit for the gpx files? not sure but, but it seems to be correlating with larger gpx files 10k track points plus.

Update: it not file size, but its about track segments. this issue lead me on #176. tracks (incl large tracks) with just one segment, display fine. Tracks with multiple segments display funnily.

Raruto commented 1 year ago

Hi @flo-schn, thanks for your report.

Also regarding https://github.com/Raruto/leaflet-elevation/issues/238, please provide a link to a fully working example that shows your issue (eg. on jsfiddle.net any other site you prefer).

Honestly, I'm running out of time to test and compile others code locally..

👋 Raruto

fschn90 commented 1 year ago

fair enough. I used github to deploy a fully working example:

the example illustrates both issues, this one and #238 regarding #237, sometimes it works perfectly and all is properly color filled, then a refresh of the page usually helps to display buggy not properly color filled.

here's a screenshot, just in case: Screenshot from 2023-03-29 10-41-58

hope that helps, flo

hupe13 commented 1 year ago

I can confirm it with this track in my environment.

Raruto commented 1 year ago

Have you tried applying this suggestion? https://github.com/Raruto/leaflet-elevation/issues/176#issuecomment-1032763314

hupe13 commented 1 year ago

https://github.com/Raruto/leaflet-elevation/issues/176#issuecomment-1032763314 works.

fschn90 commented 1 year ago

just applied https://github.com/Raruto/leaflet-elevation/issues/176#issuecomment-1032763314 and updated my working example:

updated result: https://flo-schn.github.io/reproducing-issue-for-leaflet-elevation/
updated code: https://github.com/flo-schn/reproducing-issue-for-leaflet-elevation

and yes, it solves this issue, thus displaying the elevation graph properly color filled.

but unfortunately, it does not solve https://github.com/Raruto/leaflet-elevation/issues/238 reducing the height of the elevation graph when multiple maps and elevation-divs are displayed on one page. see screenshot:

best, flo

hupe13 commented 1 year ago

Try to set height of the chart to an absolute value: https://github.com/Raruto/leaflet-elevation/blob/868179234d8e9b8f7beaea57d0e34d8bd79a2622/src/options.js#L73

fschn90 commented 1 year ago

Hi, just did: https://github.com/flo-schn/reproducing-issue-for-leaflet-elevation/blob/c121d29ea4bec6ad8fa31e0530961a96ef9ff4e6/map-builder.js#L96

if u check the again updated result: https://flo-schn.github.io/reproducing-issue-for-leaflet-elevation/

or see the screenshot:

i guess it somehow works by resizing the graph to a size that is readable again. however, there is still this rather large unused empty space at the bottom of the elevation-div container. and the summary statistics usually just below the elevation-div container have disappeared.

FabianSchmick commented 1 year ago

Another solution for me was to hide the specific mask-element, like:

.elevation-control .area mask {
    display: none;
}

Raruto / leaflet-elevation