diff --git a/gpx/src/gpx.ts b/gpx/src/gpx.ts index 957420fa..543b3b4a 100644 --- a/gpx/src/gpx.ts +++ b/gpx/src/gpx.ts @@ -120,6 +120,23 @@ export class GPXFile extends GPXTreeNode{ } if (gpx.hasOwnProperty('_data')) { this._data = gpx._data; + + if (!this._data.hasOwnProperty('style')) { + let style = this.getStyle(); + let fileStyle = {}; + if (style.color.length === 1) { + fileStyle['color'] = style.color[0]; + } + if (style.weight.length === 1) { + fileStyle['weight'] = style.weight[0]; + } + if (style.opacity.length === 1) { + fileStyle['opacity'] = style.opacity[0]; + } + if (Object.keys(fileStyle).length > 0) { + this.setStyle(fileStyle); + } + } } } else { this.attributes = {}; @@ -323,7 +340,7 @@ export class GPXFile extends GPXTreeNode{ this._data.style = {}; } if (style.color) { - this._data.style.color = style.color; + this._data.style.color = style.color.replace('#', ''); } if (style.opacity) { this._data.style.opacity = style.opacity; @@ -428,7 +445,16 @@ export class Track extends GPXTreeNode { } getStyle(): LineStyleExtension | undefined { - return this.extensions && this.extensions['gpx_style:line']; + if (this.extensions && this.extensions['gpx_style:line']) { + if (this.extensions["gpx_style:line"].color) { + return { + ...this.extensions["gpx_style:line"], + color: `#${this.extensions["gpx_style:line"].color}` + } + } + return this.extensions['gpx_style:line']; + } + return undefined; } toGeoJSON(): GeoJSON.Feature[] { @@ -436,7 +462,7 @@ export class Track extends GPXTreeNode { let geoJSON = child.toGeoJSON(); if (this.extensions && this.extensions['gpx_style:line']) { if (this.extensions['gpx_style:line'].color) { - geoJSON.properties['color'] = this.extensions['gpx_style:line'].color; + geoJSON.properties['color'] = `#${this.extensions['gpx_style:line'].color}`; } if (this.extensions['gpx_style:line'].opacity) { geoJSON.properties['opacity'] = this.extensions['gpx_style:line'].opacity; @@ -545,7 +571,7 @@ export class Track extends GPXTreeNode { this.extensions['gpx_style:line'] = {}; } if (style.color !== undefined && (force || this.extensions['gpx_style:line'].color === undefined)) { - this.extensions['gpx_style:line'].color = style.color; + this.extensions['gpx_style:line'].color = style.color.replace('#', ''); } if (style.opacity !== undefined && (force || this.extensions['gpx_style:line'].opacity === undefined)) { this.extensions['gpx_style:line'].opacity = style.opacity; diff --git a/gpx/src/io.ts b/gpx/src/io.ts index 5da6b97f..8991ca1d 100644 --- a/gpx/src/io.ts +++ b/gpx/src/io.ts @@ -23,6 +23,7 @@ export function parseGPX(gpxData: string): GPXFile { } return tagName; }, + parseTagValue: false, tagValueProcessor(tagName, tagValue, jPath, hasAttributes, isLeafNode) { if (isLeafNode) { if (tagName === 'ele') { diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts index b67cbf64..25781f5e 100644 --- a/website/src/lib/components/gpx-layer/GPXLayer.ts +++ b/website/src/lib/components/gpx-layer/GPXLayer.ts @@ -98,9 +98,9 @@ export class GPXLayer { return; } - if (file._data.style && file._data.style.color && this.layerColor !== file._data.style.color) { + if (file._data.style && file._data.style.color && this.layerColor !== `#${file._data.style.color}`) { decrementColor(this.layerColor); - this.layerColor = file._data.style.color; + this.layerColor = `#${file._data.style.color}`; } try {