Refined the curvature overlay with automatic updating and better styling

.github/actions/build-website/action.yml

@@ -11,4 +11,12 @@ runs:
           sudo pip install rjsmin==1.2.1
           sudo pip install rcssmin==1.1.1
           sudo pip install lxml==4.9.2
-          python ".github/scripts/optimize-site.py" .
+          python ".github/scripts/optimize-site.py" .
+    - name: Download curves data
+      # This step downloads and converts autogenerated curvature data for a map overlay.
+      # The script supports processing KMZ files provided by kml.roadcurvature.com. "Curve" KMZ format is not supported.
+      shell: bash
+      run: |
+          sudo pip install --upgrade pip
+          sudo pip install kml2geojson==5.1.0
+          python ".github/scripts/get-curve-map.py" "https://kml.roadcurvature.com/europe/hungary.c_1000.kmz" "map/curves.geojson" "map/curves-style.json"

res/huroutes.js

@@ -28,17 +28,17 @@ const huroutes = {
             // Choosable overlay sources supported in the layer selector. All are off by default.
             'overlays': {
                 'Elevation Shading': L.tileLayer('https://map.turistautak.hu/tiles/shading/{z}/{x}/{y}.png', {attribution:'© turistautak.hu',minZoom:5,maxZoom: 18,zIndex:5,className: 'overlay-dem'}),
-                'Curvature': L.layerGroup(null, {attribution:'Curves: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'})
+                'Curvature': L.layerGroup()
             },
             // Overlay sources that are always shown and hidden along with specific map tile sources.
             // The name of the overlay must be the same as the tile layer to which it is bound.
             'tileOverlays': {},
-            // Lazy-content overlay data, which is downloaded only when the user first shows it.
-            // Usage: Create an overlay under 'overlays' with an empty L.layerGroup. Create an
-            // item in 'lazyOverlays' with the same ID as the layergroup overlay. The value is
-            // a function that returns the layer that contains the data.
-            'lazyOverlays': {
-                'Curvature': (layer) => omnivore.geojson('map/curves.geojson', null, layer)
+            // Curvature data definition, used to populate the Curvature overlay when first viewed.
+            // The layer's data is prepared by the build-website github action.
+            'curvatureData': {
+                'geojson': 'map/curves.geojson',
+                'style': 'map/curves-style.json',
+                'attribution': 'Curves: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
             }
         },
         // A list of navigation service providers that can be chosen for the "navigate to" links'.
@@ -320,23 +320,27 @@ function initCtrls(tiles, overlays)
 /**
  * Initializes data inside of a layer group on demand.
  * @param {string} id The overlay identifier.
- * @param {object} layerGroup A Leaflet layerGroup object to which the data is added.
+ * @param {object} lg A Leaflet layerGroup object to which the data is added.
  */
-function initLazyOverlay(id, layerGroup)
+function initLazyOverlay(id, lg)
 {
-    try {
-        if (layerGroup.getLayers().length == 0)
-        {
-            var layer = L.geoJson(null, {
-                style: {
-                    color: '#BB0',
-                    opacity: 0.9,
-                    weight: 1.5
-                }
-            });
-            layerGroup.addLayer(huroutes.opt.map.lazyOverlays[id](layer));
-        }
-    } catch { }
+    // Only populate empty layerGroups with data.
+    if (!lg.getLayers || lg.getLayers().length != 0)
+        return;
+
+    // Initialize the Curvature lazy overlay's contents.
+    if (id == 'Curvature')
+    {
+        const cfg = huroutes.opt.map.curvatureData;
+        $.when($.ajax(cfg.geojson), $.ajax(cfg.style)).done((r1, r2) => {
+            const styleMap = r2[0];
+            lg.addLayer(L.geoJson(r1[0], {
+                attribution: cfg.attribution,
+                style: (feature) =>
+                    feature.properties.styleUrl && styleMap[feature.properties.styleUrl]
+            }));
+        });
+    }
 }
 
 /**