Omitting the `<ele>` tag in gpx file throws Uncaught DOMException: CanvasGradient.addColorStop: Invalid color
gemblev opened this issue · 2 comments
gemblev commented
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
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/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
- browser: firefox
- operating system: windows 7
gemblev commented
Raruto commented
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