add generic loading icon

cal-itp · Jun 27, 2023 · c4f25f9 · c4f25f9
1 parent c50b0d8
commit c4f25f9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 19 deletions.
diff --git a/apps/maps/package-lock.json b/apps/maps/package-lock.json
diff --git a/apps/maps/package.json b/apps/maps/package.json
@@ -48,8 +48,8 @@
     "fflate": "^0.7.4",
     "js-base64": "^3.7.5",
     "json-schema-to-typescript": "^13.0.1",
+    "leaflet-loading": "^0.1.24",
     "leaflet-pixi-overlay": "^1.9.4",
-    "leaflet-spin": "^1.1.2",
     "svelte-select": "^5.6.0",
     "title-case": "^3.0.3"
   }

diff --git a/apps/maps/src/routes/+page.svelte b/apps/maps/src/routes/+page.svelte
@@ -15,6 +15,8 @@
     import { titleCase } from "title-case";
     import * as convert from 'color-convert';
 
+    import "leaflet-loading";
+
     const STATE_QUERY_PARAM = "state";
     const START_LAT_LON = [37.6, -120.1];
     const LEAFLET_START_ZOOM = 6;
@@ -265,6 +267,7 @@
                     getFillColor: (feature) => getColor(feature, layer),
                     highlightColor: ({ object, layer }) => getColor(object, layer, layerProperties.highlight_saturation_multiplier || 0.7),
                     onDataLoad: (data) => {
+                      // map.fire("dataload");
                       console.log("Finished loading", layer);
 
                       if (idx === state.layers.length - 1) {
@@ -316,7 +319,8 @@
         }
 
         map = L.map(mapElement, {
-            preferCanvas: true
+          preferCanvas: true,
+          loadingControl: true,
         }).setView(START_LAT_LON, LEAFLET_START_ZOOM);
 
         const basemapConfig = state.basemap_config || DEFAULT_BASEMAP_CONFIG;
@@ -350,6 +354,7 @@
 </script>
 
 <style>
+    @import "leaflet-loading/src/Control.Loading.css";
     @import 'leaflet/dist/leaflet.css';
 
     .navbar {