handle gpx style attributes without the namespace

gpx/src/gpx.ts

@@ -140,12 +140,12 @@ export class GPXFile extends GPXTreeNode<Track> {
                 if (style.color.length === 1) {
                     fileStyle['gpx_style:color'] = style.color[0];
                 }
-                if (style.width.length === 1) {
-                    fileStyle['gpx_style:width'] = style.width[0];
-                }
                 if (style.opacity.length === 1) {
                     fileStyle['gpx_style:opacity'] = style.opacity[0];
                 }
+                if (style.width.length === 1) {
+                    fileStyle['gpx_style:width'] = style.width[0];
+                }
                 if (Object.keys(fileStyle).length > 0) {
                     this.setStyle(fileStyle);
                 }
@@ -517,6 +517,17 @@ export class Track extends GPXTreeNode<TrackSegment> {
         return undefined;
     }
 
+    getValidStyle(): LineStyleExtension | undefined {
+        if (this.extensions && this.extensions['gpx_style:line']) {
+            return {
+                "gpx_style:color": this.extensions['gpx_style:line']["gpx_style:color"],
+                "gpx_style:opacity": this.extensions['gpx_style:line']["gpx_style:opacity"],
+                "gpx_style:width": this.extensions['gpx_style:line']["gpx_style:width"]
+            };
+        }
+        return undefined;
+    }
+
     toGeoJSON(): GeoJSON.Feature[] {
         return this.children.map((child) => {
             let geoJSON = child.toGeoJSON();
@@ -543,7 +554,9 @@ export class Track extends GPXTreeNode<TrackSegment> {
             src: this.src,
             link: this.link,
             type: this.type,
-            extensions: this.extensions,
+            extensions: this.extensions && this.extensions['gpx_style:line'] ? {
+                'gpx_style:line': this.getValidStyle()
+            } : undefined,
             trkseg: this.trkseg.map((seg) => seg.toTrackSegmentType(exclude)),
         };
     }

gpx/src/io.ts

@@ -21,6 +21,19 @@ export function parseGPX(gpxData: string): GPXFile {
                 // Transform the simple <power> tag to the more complex <gpxpx:PowerExtension> tag, the nested <gpxpx:PowerInWatts> tag is then handled by the tagValueProcessor
                 return 'gpxpx:PowerExtension';
             }
+            // Add the gpx_style namespace to the line style tags
+            if (tagName === 'line') {
+                return 'gpx_style:line';
+            }
+            if (tagName === 'color') {
+                return 'gpx_style:color';
+            }
+            if (tagName === 'opacity') {
+                return 'gpx_style:opacity';
+            }
+            if (tagName === 'width') {
+                return 'gpx_style:width';
+            }
             return tagName;
         },
         parseTagValue: false,

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -453,12 +453,12 @@ export class GPXLayer {
             if (!feature.properties.color) {
                 feature.properties.color = this.layerColor;
             }
-            if (!feature.properties.width) {
-                feature.properties.width = get(defaultWidth);
-            }
             if (!feature.properties.opacity) {
                 feature.properties.opacity = get(defaultOpacity);
             }
+            if (!feature.properties.width) {
+                feature.properties.width = get(defaultWidth);
+            }
             if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)) || get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), true)) {
                 feature.properties.width = feature.properties.width + 2;
                 feature.properties.opacity = Math.min(1, feature.properties.opacity + 0.1);