diff --git a/js/LayersConfig.js b/js/LayersConfig.js index c500332..c895aff 100644 --- a/js/LayersConfig.js +++ b/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; 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) {