@trailstash/ultra 4.3.1 → 5.0.0

package/.gitlab-ci.yml

@@ -10,6 +10,7 @@ pages:
     - npm ci
     # Update version
     - jq ".version = \"$(git describe --tags --dirty | sed -e 's/^v//')\"" package.json | sponge package.json
+    - mv pages-config.mjs config.mjs
     - npm run build
     - npm run build:examples-docs
     - npm run build:maplibre-examples-docs

package/MapLibre-Examples/color-relief.ultra

@@ -0,0 +1,58 @@
+---
+title: Add a color relief layer
+description: Add a color relief layer.
+options:
+  center: [ 11.45, 47.2 ]
+  zoom: 10
+  pitch: 0
+style:
+  version: 8
+  sources:
+    terrainSource:
+      type: raster-dem
+      url: https://demotiles.maplibre.org/terrain-tiles/tiles.json
+      tileSize: 256
+  layers:
+    - type: color-relief
+      source: terrainSource
+      color-relief-color:
+        - interpolate
+        - [linear]
+        - [elevation]
+        - 400
+        - rgb(4, 0, 108)
+        - 582.35
+        - rgb(5, 1, 154)
+        - 764.71
+        - rgb(10, 21, 189)
+        - 947.06
+        - rgb(16, 44, 218)
+        - 1129.41
+        - rgb(24, 69, 240)
+        - 1311.76
+        - rgb(20, 112, 193)
+        - 1494.12
+        - rgb(39, 144, 116)
+        - 1676.47
+        - rgb(57, 169, 29)
+        - 1858.82
+        - rgb(111, 186, 5)
+        - 2041.18
+        - rgb(160, 201, 4)
+        - 2223.53
+        - rgb(205, 216, 2)
+        - 2405.88
+        - rgb(244, 221, 4)
+        - 2588.24
+        - rgb(251, 194, 14)
+        - 2770.59
+        - rgb(252, 163, 21)
+        - 2952.94
+        - rgb(253, 128, 20)
+        - 3135.29
+        - rgb(254, 85, 14)
+        - 3317.65
+        - rgb(243, 36, 13)
+        - 3500
+        - rgb(215, 5, 13)
+---

package/components/button-modal.js

@@ -27,14 +27,14 @@ export class ButtonModal extends HTMLElement {
       button {
         position: relative;
       }
-      button div span.close {
+      button + div.backdrop span.close {
         cursor: pointer;
         float: right;
       }
       button.button-modal:after {
         content: " ${this.text}";
       }
-      button > div {
+      button + div.backdrop {
         cursor: default;
         display: none;
         z-index: 1;
@@ -45,14 +45,14 @@ export class ButtonModal extends HTMLElement {
         right: 0;
         background: rgba(0,0,0,0.5);
       }
-      button > div.visible {
+      button + div.backdrop.visible {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         padding: 20px;
       }
-      button > div > div {
+      button + div.backdrop > div {
         max-height: 100%;
         max-width: 100%;
         overflow: auto;
@@ -81,21 +81,19 @@ export class ButtonModal extends HTMLElement {
       h("span", { class: "close" }, "×"),
       h("slot", { name: "modal-content" }),
     );
-    const backdrop = h("div", {}, div);
+    const backdrop = h("div", { className: "backdrop" }, div);
     const button = h(
       "button",
       { class: "button-modal" },
       h("fa-icon", { icon: this.icon }),
-      backdrop,
     );
     this.refs = { button, div, backdrop };
 
     button.addEventListener("click", () => {
       this.toggle();
     });
-    div.addEventListener("click", (e) => {
-      e.preventDefault();
-      e.stopPropagation();
+    backdrop.addEventListener("click", (e) => {
+      if (e.target.classList.contains("backdrop")) this.toggle();
     });
     div.querySelector("span.close").addEventListener("click", (e) => {
       this.toggle();
@@ -104,6 +102,7 @@ export class ButtonModal extends HTMLElement {
     });
 
     shadow.appendChild(button);
+    shadow.appendChild(backdrop);
   }
   toggle() {
     this.refs.backdrop.classList.toggle("visible");

package/components/code-editor.js

@@ -45,6 +45,8 @@ export class CodeEditor extends HTMLElement {
       value: this.source,
     });
     this.refs = { textarea };
+    this.refs.textarea.selectionStart = 0;
+    this.refs.textarea.selectionEnd = 0;
     shadow.appendChild(textarea);
     textarea.addEventListener("dragenter", (e) => {
       e.preventDefault();

package/components/export-modal.js

@@ -0,0 +1,282 @@
+import { h, t } from "../lib/dom.js";
+import { style as buttonCSS } from "./button.js";
+import { normalizeCSS } from "../lib/normalize.js";
+import { toQueryParams } from "../lib/queryParams.js";
+import { htmlExport } from "../lib/htmlExport.js";
+
+export class ExportModal extends HTMLElement {
+  #center;
+  #zoom;
+  #query;
+  #data;
+  #style;
+
+  constructor() {
+    super();
+  }
+
+  get center() {
+    return this.#center;
+  }
+  set center(value) {
+    this.#center = value;
+    this.update();
+  }
+
+  get zoom() {
+    return this.#zoom;
+  }
+  set zoom(value) {
+    this.#zoom = value;
+    this.update();
+  }
+
+  get query() {
+    return this.#query;
+  }
+  set query(value) {
+    this.#query = value;
+    this.update();
+  }
+
+  set data(data) {
+    this.#data = data;
+    this.update();
+  }
+  get data() {
+    return this.#data;
+  }
+
+  set style(style) {
+    this.#style = style;
+    this.update();
+  }
+  get style() {
+    return this.#style
+      ? {
+          ...this.#style,
+          glyphs:
+            this.#style && this.#style.glyphs
+              ? new URL(this.#style.glyphs).searchParams.get("url")
+              : undefined,
+        }
+      : null;
+  }
+  get html() {
+    return htmlExport(this.style, "Ultra Export", "", {
+      zoom: this.zoom,
+      center: this.center,
+    });
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    const dataDownloadButton = h("button", {}, t("download"));
+    dataDownloadButton.addEventListener("click", () =>
+      this.download(JSON.stringify(this.data), "ultra.geojson"),
+    );
+    const styleDownloadButton = h("button", {}, t("download"));
+    styleDownloadButton.addEventListener("click", () => {
+      this.download(JSON.stringify(this.style), "style.json");
+    });
+    const htmlDownloadButton = h("button", {}, t("download"));
+    htmlDownloadButton.addEventListener("click", () => {
+      this.download(this.html, "ultra.html");
+    });
+    const queryDownloadButton = h("button", {}, t("download"));
+    queryDownloadButton.addEventListener("click", () => {
+      this.download(this.query, "query.ultra");
+    });
+    const dataCopyButton = h("button", {}, t("copy"));
+    dataCopyButton.addEventListener("click", () => {
+      navigator.clipboard.writeText(JSON.stringify(this.data));
+    });
+    const styleCopyButton = h("button", {}, t("copy"));
+    styleCopyButton.addEventListener("click", () => {
+      navigator.clipboard.writeText(JSON.stringify(this.style));
+    });
+    const htmlCopyButton = h("button", {}, t("copy"));
+    htmlCopyButton.addEventListener("click", () => {
+      navigator.clipboard.writeText(this.html);
+    });
+    const queryCopyButton = h("button", {}, t("copy"));
+    queryCopyButton.addEventListener("click", () => {
+      navigator.clipboard.writeText(this.query);
+    });
+    const div = h(
+      "div",
+      { style: "", slot: "modal-content" },
+      h(
+        "style",
+        {},
+        `
+        div {
+          padding: 0 8px 8px;
+          max-width: 100%;
+          width: 460px;
+        }
+        details, .note {
+          font-size: 0.8em;
+        }
+        h3, h5 {
+          margin-bottom: 0;
+        }
+        input[type=text] {
+          width: 100%;
+          padding: 0;
+          margin: 0;
+        }
+        label {
+          display: block;
+        }
+        button {
+          cursor: pointer;
+        }
+       `,
+      ),
+      h(
+        "div",
+        { className: "data" },
+        h("h3", {}, "Data"),
+        h("p", {}, "Export the query result as GeoJSON"),
+        dataDownloadButton,
+        t(" "),
+        dataCopyButton,
+      ),
+      h(
+        "div",
+        { className: "map" },
+        h("h3", {}, "Map"),
+        h("fa-icon", { icon: "triangle-exclamation" }),
+        h(
+          "span",
+          { className: "note" },
+          t(" Note: some styles' tiles have CORS restrictions"),
+        ),
+        h(
+          "p",
+          {},
+          t("Export the map as a MapLibre style "),
+          h(
+            "details",
+            {},
+            h(
+              "summary",
+              {},
+              h("fa-icon", { icon: "triangle-exclamation" }),
+              t(" usage notes"),
+            ),
+            t("Ultra's support for "),
+            h(
+              "a",
+              {
+                href: "https://overpass-ultra.us/docs/style/#png-sprites-via-https",
+                target: "_blank",
+              },
+              "HTTPS PNG sprites",
+            ),
+            t(", "),
+            h(
+              "a",
+              {
+                href: "https://overpass-ultra.us/docs/style/#fallback-fontstack",
+                target: "_blank",
+              },
+              "Fallback glyphs",
+            ),
+            t(", and interactive popups"),
+            t(" are run-time features and aren't included in the generated "),
+            h("code", {}, "style.json"),
+            t(". You may experience issues with missing icons or text."),
+          ),
+        ),
+        styleDownloadButton,
+        t(" "),
+        styleCopyButton,
+        /*
+        h(
+          "p",
+          {},
+          t("Export an interactive map"),
+          h(
+            "details",
+            {},
+            h(
+              "summary",
+              {},
+              h("fa-icon", { icon: "triangle-exclamation" }),
+              t(" usage notes"),
+            ),
+            t(
+              "Ultra's interactive popups are not yet supported in exported HTML.",
+            ),
+          ),
+        ),
+        htmlDownloadButton,
+        t(" "),
+        htmlCopyButton,
+        */
+      ),
+      /*
+      h(
+        "div",
+        { className: "query" },
+        h("h3", {}, "Query"),
+        h("p", {}, "Export the Ultra query"),
+        queryDownloadButton,
+        t(" "),
+        queryCopyButton,
+      ),
+      */
+    );
+    const button = h(
+      "button-modal",
+      { text: "Export", icon: "file-export" },
+      div,
+    );
+    this.refs = {
+      button,
+      div,
+    };
+
+    shadow.appendChild(button);
+
+    this.update();
+  }
+
+  update() {
+    if (this.data) {
+      this.refs.div.querySelector(".data").style.display = "block";
+    } else {
+      this.refs.div.querySelector(".data").style.display = "none";
+    }
+    if (this.style) {
+      this.refs.button.refs.button.disabled = false;
+    } else {
+      this.refs.button.refs.button.disabled = true;
+    }
+  }
+
+  download(data, filename) {
+    const blob = new Blob([data], { type: "octet/stream" });
+    const url = window.URL.createObjectURL(blob);
+
+    const link = h("a", { download: filename, href: url });
+
+    // this is necessary as link.click() does not work on the latest firefox
+    link.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+      }),
+    );
+
+    setTimeout(() => {
+      // For Firefox it is necessary to delay revoking the ObjectURL
+      window.URL.revokeObjectURL(url);
+      link.remove();
+    }, 100);
+  }
+}

package/components/fontawesome-icon.js

@@ -10,6 +10,8 @@ import {
   faDownLeftAndUpRightToCenter,
   faPaintbrush,
   faPenToSquare,
+  faFileExport,
+  faTriangleExclamation,
 } from "@fortawesome/free-solid-svg-icons";
 
 import { h } from "../lib/dom.js";
@@ -27,6 +29,8 @@ library.add(faUpRightAndDownLeftFromCenter);
 library.add(faDownLeftAndUpRightToCenter);
 library.add(faPaintbrush);
 library.add(faPenToSquare);
+library.add(faFileExport);
+library.add(faTriangleExclamation);
 
 export const css = new CSSStyleSheet();
 css.replaceSync(`

package/components/share-modal.js

@@ -2,6 +2,7 @@ import { h, t } from "../lib/dom.js";
 import { style as buttonCSS } from "./button.js";
 import { normalizeCSS } from "../lib/normalize.js";
 import { toQueryParams } from "../lib/queryParams.js";
+import { parseSettings } from "../lib/settings.js";
 
 export class ShareModal extends HTMLElement {
   #center;
@@ -90,6 +91,9 @@ export class ShareModal extends HTMLElement {
         label {
           display: block;
         }
+        label:has(input:disabled) {
+          color: grey;
+        }
         `,
       ),
       h("h3", {}, "Query"),
@@ -128,6 +132,16 @@ export class ShareModal extends HTMLElement {
       opts.center = this.center;
       opts.zoom = this.zoom;
     }
+    let transform;
+    try {
+      ({ transform } = parseSettings(this.query));
+    } catch {}
+    if (transform) {
+      this.refs.autoRunCheckBox.checked = false;
+      this.refs.autoRunCheckBox.disabled = true;
+    } else {
+      this.refs.autoRunCheckBox.disabled = false;
+    }
     opts.autoRun = this.refs.autoRunCheckBox.checked;
     this.refs.queryInput.value = toQueryParams(opts);
     delete opts.autoRun;

package/components/ultra-ide.js

@@ -1,6 +1,7 @@
 import equal from "deep-equal";
 import bbox from "@turf/bbox";
 import pick from "lodash.pick";
+import { compressToEncodedURIComponent } from "lz-string";
 import { h } from "../lib/dom.js";
 import { setBaseStyle } from "../lib/style.js";
 import { setSetting, parseSettings } from "../lib/settings.js";
@@ -10,11 +11,7 @@ import {
   getQueryFromQueryParams,
   toQueryParams,
 } from "../lib/queryParams.js";
-import {
-  localStorage,
-  optionsFromStorage,
-  queryFromStorage,
-} from "../lib/localStorage.js";
+import { localStorage } from "../lib/localStorage.js";
 import { UltraMap } from "./ultra-map.js";
 import { HelpModal } from "./help-modal.js";
 import { StylePicker } from "./style-picker.js";
@@ -89,6 +86,10 @@ export class UltraIDE extends HTMLElement {
   settings = {};
   styles;
   help;
+  queryStorage = {
+    get: () => localStorage.getItem("query"),
+    set: (query) => localStorage.setItem("query", query),
+  };
 
   static MAP_INIT_SETTINGS = [
     "loadSettingsFromQueryParams",
@@ -114,7 +115,7 @@ export class UltraIDE extends HTMLElement {
     this.onExitFullscreen = this.onExitFullscreen.bind(this);
   }
 
-  connectedCallback() {
+  async connectedCallback() {
     // Create & populate Shadow DOM
     const shadow = this.attachShadow({ mode: "open" });
     shadow.adoptedStyleSheets.push(style);
@@ -144,7 +145,14 @@ export class UltraIDE extends HTMLElement {
     );
 
     // Get initial query and center&zoom
-    this.query = getQueryFromQueryParams() || queryFromStorage() || this.query;
+    try {
+      this.query =
+        (await Promise.resolve(getQueryFromQueryParams())) ||
+        this.queryStorage.get() ||
+        this.query;
+    } catch (e) {
+      alert(e.message);
+    }
     this.autoRun = getAutoRunFromQueryParams();
     this.settings = {
       persistState: true,
@@ -195,12 +203,14 @@ export class UltraIDE extends HTMLElement {
 
     // initialize share values
     this.refs.shareButton.query = this.query;
+    // this.refs.downloadButton.query = this.query;
 
     // set query when resolved if a promise
     if (this.query.then) {
       this.query.then((query) => {
         this.refs.codeEditor.source = query;
         this.refs.shareButton.query = this.query;
+        // this.refs.downloadButton.query = this.query;
         if (this.autoRun) {
           this.onClickRun();
         }
@@ -210,9 +220,36 @@ export class UltraIDE extends HTMLElement {
     }
   }
 
+  async updateHash() {
+    if (this.query === (await Promise.resolve(getQueryFromQueryParams())))
+      return;
+    // mostly cribbed from https://github.com/maplibre/maplibre-gl-js/blob/main/src/ui/hash.ts
+    // not using URlSearchParams because it URL-enodes / characters
+    const q = compressToEncodedURIComponent(this.query);
+    let found = false;
+    const parts = window.location.hash
+      .slice(1)
+      .split("&")
+      .map((part) => {
+        const key = part.split("=")[0];
+        if (key === "q" || key === "query") {
+          found = true;
+          return `q=${q}`;
+        }
+        return part;
+      })
+      .filter((a) => a);
+    if (!found) {
+      parts.push(`q=${q}`);
+    }
+    const hash = `#${parts.join("&")}`;
+    const location = window.location.href.replace(/(#.*)?$/, hash);
+    window.history.pushState(window.history.state, null, location);
+  }
   async onClickRun() {
     this.refs.runButton.loading = true; // Loading button state
     this.resetMap(); // clear settings from previous run
+    await this.updateHash();
     try {
       // basic query/option parsing
       const settings = {
@@ -228,10 +265,11 @@ export class UltraIDE extends HTMLElement {
       });
 
       this.refs.downloadButton.data = null;
+      this.refs.downloadButton.style = null;
       this.controller = new AbortController();
-      this.refs.downloadButton.data = await this.refs.ultraMap.run(
-        this.controller,
-      );
+      const { data, mapStyle } = await this.refs.ultraMap.run(this.controller);
+      this.refs.downloadButton.data = data;
+      this.refs.downloadButton.style = mapStyle;
       delete this.controller;
 
       this.refs.runButton.loading = false;
@@ -282,15 +320,18 @@ export class UltraIDE extends HTMLElement {
   onChangeCode() {
     this.query = this.refs.codeEditor.source;
     this.refs.shareButton.query = this.query;
-    localStorage.setItem("query", this.query);
+    // this.refs.downloadButton.query = this.query;
+    this.queryStorage.set(this.query);
   }
   onMoveEnd() {
     const zoom = this.refs.ultraMap.zoom;
     const center = this.refs.ultraMap.center.toArray();
     this.refs.shareButton.zoom = zoom;
     this.refs.shareButton.center = center;
+    this.refs.downloadButton.zoom = zoom;
+    this.refs.downloadButton.center = center;
   }
-  onChangeStyle(e) {
+  async onChangeStyle(e) {
     this.refs.codeEditor.source = setSetting(this.query, {
       style: e.detail.value,
     });
@@ -299,7 +340,8 @@ export class UltraIDE extends HTMLElement {
       settings.mapStyle,
       this.settings.mapStyle || UltraMap.defaults.mapStyle,
     );
-    this.refs.ultraMap.run();
+    const { mapStyle } = await this.refs.ultraMap.run();
+    this.refs.downloadButton.style = mapStyle;
   }
 
   onEnterFullscreen() {