diff --git a/gpx/src/gpx.ts b/gpx/src/gpx.ts index f9ec9fae..9ffd286a 100644 --- a/gpx/src/gpx.ts +++ b/gpx/src/gpx.ts @@ -140,12 +140,12 @@ export class GPXFile extends GPXTreeNode { 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 { 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 { 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)), }; } diff --git a/gpx/src/io.ts b/gpx/src/io.ts index 405a41b2..ce0e8c78 100644 --- a/gpx/src/io.ts +++ b/gpx/src/io.ts @@ -21,6 +21,19 @@ export function parseGPX(gpxData: string): GPXFile { // Transform the simple tag to the more complex tag, the nested 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, diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts index d88c0755..e6b2c37b 100644 --- a/website/src/lib/components/gpx-layer/GPXLayer.ts +++ b/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);