Implement simplestyle for GeoJSON

js/LayersConfig.js

@@ -349,7 +349,7 @@ BR.LayersConfig = L.Class.extend({
     },
 
     createGeoJsonLayer: function (props) {
-        const layer = L.geoJSON(undefined);
+        const layer = L.geoJSON(undefined, BR.Track.getGeoJsonOptions());
         fetch(props.url).then(async (response) => {
             const geojson = await response.json();
             layer.addData(geojson);

js/util/Track.js

@@ -10,13 +10,27 @@ BR.Track = {
      * @returns {Object} to pass as `options` parameter to `L.geoJson`
      */
     getGeoJsonOptions: function (layersControl) {
+        // https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0
+        const styleMapping = [
+            ['stroke', 'color'],
+            ['stroke-width', 'weight'],
+            ['stroke-opacity', 'opacity'],
+            ['fill', 'fillColor'],
+            ['fill-opacity', 'fillOpacity'],
+        ];
         return {
             style: function (geoJsonFeature) {
-                var currentLayerId = layersControl.getActiveBaseLayer().layer.id;
+                var currentLayerId = layersControl?.getActiveBaseLayer().layer.id;
-                return {
+                const featureStyle = {
                     color: currentLayerId === 'cyclosm' ? 'yellow' : 'blue',
                     weight: 4,
                 };
+                for (const [simpleStyle, leafletStyle] of styleMapping) {
+                    if (geoJsonFeature?.properties?.[simpleStyle]) {
+                        featureStyle[leafletStyle] = geoJsonFeature.properties[simpleStyle];
+                    }
+                }
+                return featureStyle;
             },
             interactive: false,
             filter: function (geoJsonFeature) {