From 4e719daee113bdd984636ed66bc55b8e2379e236 Mon Sep 17 00:00:00 2001
From: Manuel Fuhr <manuel@knid.net>
Date: Thu, 20 Apr 2023 21:45:15 +0200
Subject: [PATCH] Implement simplestyle for GeoJSON

---
 js/LayersConfig.js |  2 +-
 js/util/Track.js   | 18 ++++++++++++++++--
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/js/LayersConfig.js b/js/LayersConfig.js
index c54c6a0..c895aff 100644
--- a/js/LayersConfig.js
+++ b/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);
diff --git a/js/util/Track.js b/js/util/Track.js
index 27cb7fa..17856f9 100644
--- a/js/util/Track.js
+++ b/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;
-                return {
+                var currentLayerId = layersControl?.getActiveBaseLayer().layer.id;
+                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) {