@trailstash/ultra 4.1.3 → 4.1.4

package/components/ultra-map.js

@@ -1,6 +1,6 @@
 import pick from "lodash.pick";
 import bbox from "@turf/bbox";
-import { h } from "../lib/dom.js";
+import { h, t } from "../lib/dom.js";
 import { setQueryBounds } from "../lib/bounds.js";
 import { setBaseStyle } from "../lib/style.js";
 import { parseSettings } from "../lib/settings.js";
@@ -24,6 +24,31 @@ css.replaceSync(`
     display: flex;
     flex-direction: column;
   }
+  main {
+    justify-content: center;
+    align-items: center;
+  }
+  .loading-indicator {
+    width: 4.5em;
+    position: absolute;
+    background: rgba(0,0,0,0.5);
+    color: white;
+    z-index: 1000;
+    padding: 1em;
+    display: none;
+  }
+  .loading-indicator:after {
+    display: inline-block;
+    animation: dotty steps(1,end) 1s infinite;
+    content: '';
+  }
+  @keyframes dotty {
+    0%   { content: ''; }
+    25%  { content: '.'; }
+    50%  { content: '..'; }
+    75%  { content: '...'; }
+    100% { content: ''; }
+  }
 `);
 
 export class UltraMap extends HTMLElement {
@@ -194,13 +219,20 @@ export class UltraMap extends HTMLElement {
     }
 
     this.refs = {
+      loadingIndicator: h(
+        "div",
+        { className: "loading-indicator" },
+        t("Loading"),
+      ),
       mapLibre: h("map-libre", {
         mapStyle,
         options: this.options,
         controls: this.controls,
       }),
     };
-    this.#shadow.appendChild(h("main", {}, this.refs.mapLibre));
+    this.#shadow.appendChild(
+      h("main", {}, this.refs.loadingIndicator, this.refs.mapLibre),
+    );
 
     this.refs.mapLibre.map.on("click", (e) =>
       handleMouseClick(
@@ -274,39 +306,48 @@ export class UltraMap extends HTMLElement {
       return;
     }
 
-    if (!controller) {
-      controller = new AbortController();
-    }
+    this.refs.loadingIndicator.style.display = "block";
 
-    const queryProvider = this.queryProviders[this.type];
-    if (!queryProvider) {
-      throw new Error(`invalid query provider: ${this.type}`);
-    }
-    const query = setQueryBounds(this.query, this.refs.mapLibre.bounds);
-    if (
-      !this.#cachedSource ||
-      this.type !== this.#cachedType ||
-      query !== this.#cachedQuery ||
-      (queryProvider.invalidateCacheOnBBox &&
-        this.#cachedBBox !=
-          setQueryBounds("{{bbox}}", this.refs.mapLibre.bounds))
-    ) {
-      this.#cachedBBox = setQueryBounds("{{bbox}}", this.refs.mapLibre.bounds);
-      this.#cachedQuery = query;
-      this.#cachedType = this.type;
-      this.#cachedSource = await queryProvider.source(query, controller, {
-        server: this.server,
-        bounds: this.refs.mapLibre.bounds,
+    try {
+      if (!controller) {
+        controller = new AbortController();
+      }
+
+      const queryProvider = this.queryProviders[this.type];
+      if (!queryProvider) {
+        throw new Error(`invalid query provider: ${this.type}`);
+      }
+      const query = setQueryBounds(this.query, this.refs.mapLibre.bounds);
+      if (
+        !this.#cachedSource ||
+        this.type !== this.#cachedType ||
+        query !== this.#cachedQuery ||
+        (queryProvider.invalidateCacheOnBBox &&
+          this.#cachedBBox !=
+            setQueryBounds("{{bbox}}", this.refs.mapLibre.bounds))
+      ) {
+        this.#cachedBBox = setQueryBounds(
+          "{{bbox}}",
+          this.refs.mapLibre.bounds,
+        );
+        this.#cachedQuery = query;
+        this.#cachedType = this.type;
+        this.#cachedSource = await queryProvider.source(query, controller, {
+          server: this.server,
+          bounds: this.refs.mapLibre.bounds,
+        });
+      }
+      this.refs.mapLibre.mapStyle = await getStyle(this.mapStyle, {
+        // Don't love this...
+        source: this.#cachedSource,
+        layers: queryProvider.layers
+          ? await Promise.resolve(queryProvider.layers("ultra", query))
+          : [],
       });
+      return this.#cachedSource.data;
+    } finally {
+      this.refs.loadingIndicator.style.display = "none";
     }
-    this.refs.mapLibre.mapStyle = await getStyle(this.mapStyle, {
-      // Don't love this...
-      source: this.#cachedSource,
-      layers: queryProvider.layers
-        ? await Promise.resolve(queryProvider.layers("ultra", query))
-        : [],
-    });
-    return this.#cachedSource.data;
   }
 
   get #fitBounds() {

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.1.3",
+  "version": "4.1.4",
   "description": "A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc",
   "main": "index.js",
   "scripts": {