search

Raruto / leaflet-elevation

Leaflet plugin that allows to add elevation profiles using d3js
GNU General Public License v3.0
254 stars 84 forks source link

Omitting the `<ele>` tag in gpx file throws Uncaught DOMException: CanvasGradient.addColorStop: Invalid color #265

Open gemblev opened 1 year ago

gemblev commented 1 year ago

Hello M. Raruto

Subject of the issue

Related to: https://github.com/Raruto/leaflet-elevation/issues/259

When I want to move the map with the mouse (drag & drop) with a gpx file which has some trpk tags without elevation, the map remains unchanged.

With firefox debug I have the following errors:

Uncaught DOMException: CanvasGradient.addColorStop: Invalid color

image

I just change the gpx file on your example.

Instead of file via-emilia.gpx, I put file _entre_terre_et_merbug.gpx.

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

<!-- leaflet-ui -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-ui@0.6.0/dist/leaflet-ui.js"></script>

<!-- leaflet-elevation -->
<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>
...
</head>

<body>
...
<div id="map"></div>

<script>
  // Full list options at "leaflet-elevation.js"
  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: "topright",

    // 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: true,

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

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

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

    // 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-edgescale" integration
    edgeScale: 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: [30, 30],
        iconAnchor: [8, 30],
      }),
    },

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

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

  };

  // Instantiate map (leaflet-ui).
  var map = L.map('map', { mapTypeId: 'terrain', center: [41.4583, 12.7059], zoom: 5 });

  // Instantiate elevation control.
  var controlElevation = L.control.elevation(elevation_options).addTo(map);

  // Load track from url (allowed data types: "*.geojson", "*.gpx", "*.tcx")
  //controlElevation.load("entre_terre_et_mer.gpx");
  controlElevation.load("entre_terre_et_mer_bug.gpx");

</script>
</body>

Your environment

gemblev commented 1 year ago

I forgot the files link:

Thanks

Raruto commented 1 year ago

Related to: https://github.com/Raruto/leaflet-elevation/issues/227 and https://github.com/Raruto/leaflet-elevation/issues/259

Though the specs allows you to omit the <ele> tag: 👉 https://www.topografix.com/GPX/1/1/#type_wptType

<ele> [xsd](https://www.topografix.com/GPX/1/1/#ns_xsd):decimal </ele> [0..1]

I don't recommend doing so, in terms of software portability as well.. (generally speaking: undefined != 0)

OK: ele = 0

<!-- https://www.tyrando.fr/Elevation/entre_terre_et_mer.gpx -->

<trkpt lat="47.706262" lon="-3.172217">                    <ele>0</ele> </trkpt>
<trkpt lat="47.70465" lon="-3.166588">                     <ele>0</ele> </trkpt>
<trkpt lat="47.70467" lon="-3.164988">                     <ele>0</ele> </trkpt>
<trkpt lat="47.7044741671216" lon="-3.164952993392945">    <ele>0</ele> </trkpt>
<trkpt lat="47.70440918487362" lon="-3.164727687835694">   <ele>0</ele> </trkpt>
<trkpt lat="47.70440918487362" lon="-3.1644701957702637">  <ele>0</ele> </trkpt>
<trkpt lat="47.704423625380194" lon="-3.1642878055572514"> <ele>0</ele> </trkpt>
<trkpt lat="47.704430845631954" lon="-3.1640625000000004"> <ele>0</ele> </trkpt>
<trkpt lat="47.704481387366386" lon="-3.1638801097869873"> <ele>0</ele> </trkpt>
<trkpt lat="47.70455358975911" lon="-3.163858652114868">   <ele>0</ele> </trkpt>
<trkpt lat="47.704697994244505" lon="-3.16381573677063">   <ele>0</ele> </trkpt>
<trkpt lat="47.704708" lon="-3.163813">                    <ele>0</ele> </trkpt>
<trkpt lat="47.704804" lon="-3.164897">                    <ele>0</ele> </trkpt>

KO: ele = undefined

<!-- https://www.tyrando.fr/Elevation/entre_terre_et_mer_bug.gpx -->

<trkpt lat="47.706262" lon="-3.172217">                                 </trkpt>
<trkpt lat="47.70465" lon="-3.166588">                                  </trkpt>
<trkpt lat="47.70467" lon="-3.164988">                                  </trkpt>
<trkpt lat="47.7044741671216" lon="-3.164952993392945">                 </trkpt>
<trkpt lat="47.70440918487362" lon="-3.164727687835694">                </trkpt>
<trkpt lat="47.70440918487362" lon="-3.1644701957702637">               </trkpt>
<trkpt lat="47.704423625380194" lon="-3.1642878055572514">              </trkpt>
<trkpt lat="47.704430845631954" lon="-3.1640625000000004">              </trkpt>
<trkpt lat="47.704481387366386" lon="-3.1638801097869873">              </trkpt>
<trkpt lat="47.70455358975911" lon="-3.163858652114868">                </trkpt>
<trkpt lat="47.704697994244505" lon="-3.16381573677063">                </trkpt>
<trkpt lat="47.704708" lon="-3.163813">                                 </trkpt>
<trkpt lat="47.704804" lon="-3.164897">                                 </trkpt>

Clever pull requests are welcome to try and handle these edge cases, I don't think I'll look into it.

👋 Raruto