Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
gemblev opened this issue Aug 4, 2023 · 2 comments
Open

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

gemblev opened this issue Aug 4, 2023 · 2 comments

Comments

@gemblev
Copy link

gemblev commented Aug 4, 2023 •
edited by Raruto
Loading

Hello M. Raruto

Subject of the issue

Related to: #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_mer_bug.gpx.

  • The file entre_terre_et_mer_bug.gpx has some trpk tags without elevation
  • The file entre_terre_et_mer.gpx is ok because the trpk tags without elevation are replaced by tags elevation with elevation=0
<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/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/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

  • browser: firefox
  • operating system: windows 7
@gemblev
Copy link
Author

gemblev commented Aug 4, 2023 •
edited by Raruto
Loading

I forgot the files link:

Thanks

Repository owner deleted a comment from gemblev Aug 7, 2023
@Raruto
Copy link
Owner

Raruto commented Aug 8, 2023 •
edited
Loading

Related to: #227 and #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

@Raruto Raruto changed the title Moving the map with the mouse (Drag and drop) is impossible Omitting the <ele> tag in gpx file throws Uncaught DOMException: CanvasGradient.addColorStop: Invalid color Aug 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Raruto @gemblev