Merge pull request #727 from zod/geojson

Support remote GeoJSON layers

js/LayersConfig.js

@@ -348,6 +348,15 @@ BR.LayersConfig = L.Class.extend({
         }
     },
 
+    createGeoJsonLayer: function (props) {
+        const layer = L.geoJSON(undefined, BR.Track.getGeoJsonOptions());
+        fetch(props.url).then(async (response) => {
+            const geojson = await response.json();
+            layer.addData(geojson);
+        });
+        return layer;
+    },
+
     createLayer: function (layerData) {
         var props = layerData.properties;
         var url = props.url;
@@ -436,6 +445,8 @@ BR.LayersConfig = L.Class.extend({
             layer = this.createOpenStreetMapNotesLayer();
         } else if (props.type === 'mvt') {
             layer = this.createMvtLayer(props, options);
+        } else if (props.type === 'geojson') {
+            layer = this.createGeoJsonLayer(props);
         } else {
             // JOSM
             var josmUrl = url;

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) {