@trailstash/ultra 3.5.1 → 3.6.0

package/components/help-modal.js

@@ -58,6 +58,7 @@ The [source code](https://gitlab.com/trailstash/ultra) of this application is re
 `;
 
 export class HelpModal extends HTMLElement {
+  type;
   static defaults = {
     help,
   };
@@ -99,9 +100,14 @@ export class HelpModal extends HTMLElement {
             <h4>Installed Query Providers</h4>
             <ul>
               ${Object.entries(this.queryProviders)
-                .map(([name]) => `<li><code>${name}</code></li>`)
+                .map(
+                  ([name, { detect }]) =>
+                    `<li><code>${name}${name == this.type ? "+" : ""}${"auto" in this.queryProviders && detect ? "*" : ""}</code></li>`,
+                )
                 .join("\n")}
             </ul>
+            <code>+</code> default provider.
+            ${"auto" in this.queryProviders && Object.values(this.queryProviders).some(({ detect }) => !!detect) ? "<br><code>*</code> detected by <code>auto</code> provider." : ""}
           </div>
           ${stylesHTML}
           <div>

package/components/ultra-ide.js

@@ -135,6 +135,7 @@ export class UltraIDE extends HTMLElement {
           h("help-modal", {
             help: this.help || HelpModal.defaults.help,
             styles: this.styles || StylePicker.defaults.styles,
+            type: this.settings.type || UltraMap.defaults.type,
             queryProviders:
               this.settings.queryProviders || UltraMap.defaults.queryProviders,
           }),

package/components/ultra-map.js

@@ -30,6 +30,7 @@ export class UltraMap extends HTMLElement {
   #init;
   #shadow;
 
+  #cachedBBox;
   #cachedType;
   #cachedQuery;
   #cachedSource;
@@ -263,8 +264,12 @@ export class UltraMap extends HTMLElement {
     if (
       !this.#cachedSource ||
       this.type !== this.#cachedType ||
-      query !== this.#cachedQuery
+      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, {

package/docs/yaml.md

@@ -59,6 +59,7 @@ Automatically detects and chooses the right query provider out of the following:
 - `kml`
 - `gpx`
 - `tcx`
+- `raw`
 
 See each provider for how it is auto-detected
 
@@ -156,6 +157,14 @@ Detected if
 
 - Parses as XML and contains a top level `tcx` tag
 
+### `raw`
+
+A full [MapLibre Source](https://maplibre.org/maplibre-style-spec/sources/) as JSON or YAML.
+
+Detected if
+
+- Parses as JSON or YAML and contains a valid MapLibre Source `type`.
+
 ### `raster`
 
 A line delimited list of [tile URLs](https://maplibre.org/maplibre-style-spec/sources/#tiles_1) for

package/lib/queryProviders/auto.js

@@ -3,6 +3,7 @@ export default class AutoProvider {
   #layers;
   #popupContextBuilder;
   #popupTemplate;
+  #invalidateCacheOnBBox;
   #providers;
 
   constructor(providers = {}) {
@@ -23,6 +24,7 @@ export default class AutoProvider {
         this.#layers = provider.layers;
         this.#popupContextBuilder = provider.popupContextBuilder;
         this.#popupTemplate = provider.popupTemplate;
+        this.#invalidateCacheOnBBox = provider.invalidateCacheOnBBox;
         return provider.source(query, controller, { server, bounds });
       }
     }
@@ -44,4 +46,12 @@ export default class AutoProvider {
   get popupTemplate() {
     return this.#popupTemplate;
   }
+
+  get invalidateCacheOnBBox() {
+    // This isn't ideal, because this is called _before_ `source`, but it will work because it's either:
+    // * undefined & the first run, so bc first run it always will execute anyway
+    // * different type, which might mean a different invalidateCacheOnBBox value, but we always run on new type anyway
+    // * type unchanged, & subsequent run, so actually valid value
+    return this.#invalidateCacheOnBBox;
+  }
 }

package/lib/queryProviders/index.js

@@ -8,20 +8,22 @@ import { osmxml, osmjson } from "./osm.js";
 import kml from "./kml.js";
 import gpx from "./gpx.js";
 import tcx from "./tcx.js";
+import raw from "./raw.js";
 
 export const all = {
+  raw,
+  raster,
+  vector,
   overpass,
   osmWebsite,
   osmWiki,
-  ohsome,
-  geojson,
   osmxml,
   osmjson,
+  geojson,
   kml,
   gpx,
   tcx,
-  raster,
-  vector,
+  ohsome,
 };
 
 export default { auto: new AutoProvider(all), ...all };

package/lib/queryProviders/ohsome.js

@@ -58,5 +58,6 @@ const overpass = {
   layers,
   popupTemplate,
   popupContextBuilder,
+  invalidateCacheOnBBox: true,
 };
 export default overpass;

package/lib/queryProviders/overpass.js

@@ -126,6 +126,7 @@ export const osmWebsite = {
     return !!query.match(osmUrlRe);
   },
   fitBounds: true,
+  invalidateCacheOnBBox: true,
 };
 
 export const osmWiki = {
@@ -165,4 +166,5 @@ out geom;`,
     const page = decodeURIComponent(url.pathname.slice(6));
     return page.split(":")[0] === "Tag" || page.split(":")[0] === "Key";
   },
+  invalidateCacheOnBBox: true,
 };

package/lib/queryProviders/raw.js

@@ -0,0 +1,36 @@
+import YAML from "yaml";
+
+export default {
+  source: async function geojson(query, controller) {
+    let data;
+    try {
+      return JSON.parse(query);
+    } catch {
+      return YAML.parse(query, { merge: true });
+    }
+  },
+  detect,
+};
+
+const sourceTypes = [
+  "vector",
+  "raster",
+  "geojson",
+  "image",
+  "raster-dem",
+  "video",
+];
+
+function detect(query) {
+  try {
+    let json;
+    try {
+      json = JSON.parse(query);
+    } catch {
+      json = YAML.parse(query, { merge: true });
+    }
+    if (sourceTypes.includes(json.type)) {
+      return true;
+    }
+  } catch {}
+}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.5.1",
+  "version": "3.6.0",
   "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": {