@trailstash/ultra 5.0.3 → 6.0.0

package/Examples/wikidata-photo.ultra

@@ -7,8 +7,8 @@ options:
 popupTemplate: >
   <h2>
     {{ type }}
-    <a href="https://openhistoricalmap.org/{{ type }}/{{ id }}" target="_blank">{{ id }}</a>
-    <a href="https://openhistoricalmap.org/edit?{{ type }}={{ id }}" target="_blank">✏️</a>
+    <a href="https://openstreetmap.org/{{ type }}/{{ id }}" target="_blank">{{ id }}</a>
+    <a href="https://openstreetmap.org/edit?{{ type }}={{ id }}" target="_blank">✏️</a>
   </h2>
   {% assign wikidata = tags["siren:model:wikidata"] ?? tags["model:wikidata"] %}
   {%- if wikidata %}

package/cli/build.js

@@ -47,6 +47,11 @@ export const buildOptions = (config, watch = false) => ({
   alias: {
     "ultra-config": config,
     "node:events": "node-events", // esri-dump support
+    events: "node-events", // osm2geojson-ultra support (i think)
+  },
+  define: {
+    // esri-dump & osm2geojson-ultra support
+    process: "{ 'env': {}, 'browser': true, 'version': '' }",
   },
   plugins: [
     copy({

package/components/help-modal.js

@@ -5,7 +5,7 @@ import { normalizeCSS } from "../lib/normalize.js";
 import { toQueryParams } from "../lib/queryParams.js";
 import { version } from "../package.json";
 import { version as maplibreVersion } from "maplibre-gl/package.json";
-import { version as osmtogeojsonVersion } from "osmtogeojson/package.json";
+import { version as osmtogeojsonVersion } from "osm2geojson-ultra/package.json";
 import { version as esridumpVersion } from "esri-dump/package.json";
 
 const help = `# Introduction
@@ -131,8 +131,8 @@ export class HelpModal extends HTMLElement {
                 this.queryProviders.osmxml
                   ? `<li>
                 Overpass &amp; OSM support powered by
-                <a target="_blank" href="https://github.com/tyrasd/osmtogeojson"
-                  >osmtogeojson</a
+                <a target="_blank" href="https://github.com/dschep/osm2geojson-ultra"
+                  >osm2geojson-ultra</a
                 > <code>${osmtogeojsonVersion}</code>
               </li>`
                   : ""

package/components/html-control.js

@@ -51,7 +51,7 @@ export class HTMLControl extends HTMLElement {
     return this._container;
   }
   onRemove() {
-    this.container.parentNode.removeChild(this.container);
+    this._container.parentNode.removeChild(this._container);
     this.map = undefined;
   }
 

package/components/map-popup.js

@@ -22,7 +22,12 @@ const defaultTemplate = `
     <br>
   {%- endfor %}
 `;
-const defaultContextBuilder = ({ properties }) => ({ properties });
+
+const defaultContextBuilder = ({ properties, geometry }) => {
+  const context = { properties: structuredClone(properties) };
+  if (geometry.type === "Point") context.geometry = geometry;
+  return context;
+};
 
 export class MapPopup extends HTMLElement {
   constructor() {

package/components/ultra-ide.js

@@ -15,6 +15,7 @@ import { localStorage } from "../lib/localStorage.js";
 import { UltraMap } from "./ultra-map.js";
 import { HelpModal } from "./help-modal.js";
 import { StylePicker } from "./style-picker.js";
+import { alertOnError } from "../lib/error.js";
 
 const style = new CSSStyleSheet();
 style.replaceSync(`
@@ -147,7 +148,9 @@ export class UltraIDE extends HTMLElement {
     // Get initial query and center&zoom
     try {
       this.query =
-        (await Promise.resolve(getQueryFromQueryParams())) ||
+        (await Promise.resolve(getQueryFromQueryParams()).catch(
+          alertOnError,
+        )) ||
         this.queryStorage.get() ||
         this.query;
     } catch (e) {
@@ -221,7 +224,10 @@ export class UltraIDE extends HTMLElement {
   }
 
   async updateHash() {
-    if (this.query === (await Promise.resolve(getQueryFromQueryParams())))
+    if (
+      this.query ===
+      (await Promise.resolve(getQueryFromQueryParams()).catch(alertOnError))
+    )
       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

package/components/ultra-map.js

@@ -15,12 +15,8 @@ import { handleStyleImageMissing } from "../lib/sprites.js";
 import { handleMouseClick, handleMouseMove } from "../lib/queryMap.js";
 import { localStorage, optionsFromStorage } from "../lib/localStorage.js";
 import { HTMLControl } from "./html-control.js";
-import makeSandbox from "../lib/sandbox.js";
-
-let sandbox;
-try {
-  sandbox = await makeSandbox();
-} catch {}
+import { sandbox } from "../lib/sandbox.js";
+import { alertOnError } from "../lib/error.js";
 
 const css = new CSSStyleSheet();
 css.replaceSync(`
@@ -39,7 +35,7 @@ css.replaceSync(`
     position: absolute;
     background: rgba(0,0,0,0.5);
     color: white;
-    z-index: 1000;
+    z-index: 1;
     padding: 1em;
     display: none;
   }
@@ -70,6 +66,8 @@ export class UltraMap extends HTMLElement {
 
   #autoProvider;
 
+  #extraControls = { HTMLControl };
+
   static defaults = {
     loadSettingsFromQueryParams: true,
     type: "auto",
@@ -170,8 +168,8 @@ export class UltraMap extends HTMLElement {
   set controls(value) {
     this.#controls = value.map
       ? value.map(({ type, options, position }) =>
-          type === "HTMLControl"
-            ? { type: new HTMLControl(options), position }
+          this.#extraControls[type]
+            ? { type: new this.#extraControls[type](options), position }
             : { type, options, position },
         )
       : value;
@@ -183,6 +181,7 @@ export class UltraMap extends HTMLElement {
 
     if (this.loadSettingsFromQueryParams) {
       return Promise.resolve(getQueryFromQueryParams() || this.query)
+        .catch(alertOnError)
         .then(async (query) => {
           const querySettings = parseSettings(query);
           const settings = {
@@ -203,7 +202,7 @@ export class UltraMap extends HTMLElement {
             mapStyle: setBaseStyle(settings.mapStyle, this.mapStyle),
           });
 
-          return this.#init(await getStyle(this.mapStyle));
+          return this.#init(await getStyle(this.mapStyle).catch(alertOnError));
         })
         .catch(alert);
     } else if (this.persistState) {
@@ -217,7 +216,7 @@ export class UltraMap extends HTMLElement {
     if (!this.mapStyle || typeof this.mapStyle === "string") {
       return this.#init(this.mapStyle);
     } else {
-      return getStyle(this.mapStyle).then(this.#init);
+      return getStyle(this.mapStyle).catch(alertOnError).then(this.#init);
     }
   }
 
@@ -298,7 +297,7 @@ export class UltraMap extends HTMLElement {
   }
 
   async run(controller) {
-    const mapStyle = await getStyle(this.mapStyle);
+    const mapStyle = await getStyle(this.mapStyle).catch(alertOnError);
     this.refs.mapLibre.mapStyle = mapStyle;
     const result = await this.#run(controller);
     if (this.#fitBounds) {
@@ -351,14 +350,16 @@ export class UltraMap extends HTMLElement {
         this.#cachedQuery = query;
         this.#cachedTransform = this.transform;
         this.#cachedType = this.type;
-        let source = await queryProvider.source(query, controller, {
-          server: this.server,
-          bounds: this.refs.mapLibre.bounds,
-        });
+        let source = await queryProvider
+          .source(query, controller, {
+            server: this.server,
+            bounds: this.refs.mapLibre.bounds,
+          })
+          .catch(alertOnError);
         if (this.transform) {
           if (sandbox) {
             source.data = await Promise.race([
-              sandbox(this.transform, source.data),
+              sandbox("default", this.transform, source.data),
               new Promise((resolve, reject) => {
                 controller.signal.onabort = () => {
                   this.#cachedTransform = null;
@@ -378,7 +379,7 @@ export class UltraMap extends HTMLElement {
         layers: queryProvider.layers
           ? await Promise.resolve(queryProvider.layers("ultra", query))
           : [],
-      });
+      }).catch(alertOnError);
       this.refs.mapLibre.mapStyle = mapStyle;
       return { data: this.#cachedSource.data, mapStyle };
     } finally {

package/docs/yaml.md

@@ -81,7 +81,7 @@ See each provider for how it is auto-detected
 
 An [Overpass QL](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL) query. Results
 converted into a [GeoJSON source](https://maplibre.org/maplibre-style-spec/sources/#geojson) with
-[`osmtogeojson`](https://github.com/tyrasd/osmtogeojson).
+[`osm2geojson-ultra`](https://github.com/dschep/osm2geojson-ultra).
 
 Detected if:
 
@@ -120,7 +120,7 @@ Detected if:
 
 An [OSM XML](https://wiki.openstreetmap.org/wiki/OSM_XML) document or a URL to one. Converted into
 a [GeoJSON source](https://maplibre.org/maplibre-style-spec/sources/#geojson) with
-[`osmtogeojson`](https://github.com/tyrasd/osmtogeojson).
+[`osm2geojson-ultra`](https://github.com/dschep/osm2geojson-ultra).
 
 Detected if:
 
@@ -132,7 +132,7 @@ Detected if:
 
 An [OSM JSON](https://wiki.openstreetmap.org/wiki/OSM_JSON) document or a URL to one. Converted
 into a [GeoJSON source](https://maplibre.org/maplibre-style-spec/sources/#geojson) with
-[`osmtogeojson`](https://github.com/tyrasd/osmtogeojson).
+[[`osm2geojson-ultra`](https://github.com/dschep/osm2geojson-ultra).
 
 Detected if:
 

package/index.html

@@ -29,8 +29,6 @@
     <meta name="robots" content="index,follow" />
 
     <script>
-      addEventListener("error", ({ error }) => alert(error));
-
       window.sa_event =
         window.sa_event ||
         function () {

package/index.js

@@ -22,9 +22,6 @@ import { FontAwesomeIcon } from "./components/fontawesome-icon.js";
 import { ButtonModal } from "./components/button-modal.js";
 import { MapPopup } from "./components/map-popup.js";
 
-// esri dump expects to be running in a node env, so add global process.env
-window.process = { env: {} };
-
 // Allow pages in new windows securely
 DOMPurify.addHook("afterSanitizeAttributes", function (node) {
   // set all elements owning target to target=_blank

package/lib/error.js

@@ -0,0 +1,4 @@
+export const alertOnError = (e) => {
+  alert(e);
+  throw e;
+};

package/lib/queryProviders/index.js

@@ -12,6 +12,7 @@ import gpx from "./gpx.js";
 import tcx from "./tcx.js";
 import raw from "./raw.js";
 import esri from "./esri.js";
+import javascript from "./javascript.js";
 
 export const all = {
   overpass,
@@ -33,6 +34,7 @@ export const all = {
   osmWebsite,
   osmWiki,
   taginfo,
+  javascript,
 };
 
 export default { auto: new AutoProvider(all), ...all };

package/lib/queryProviders/javascript.js

@@ -0,0 +1,104 @@
+import { sandbox } from "../sandbox.js";
+
+const layers = (source) => [
+  {
+    id: `${source}-js-geojson-fill`,
+    type: "fill",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    paint: {
+      "fill-color": ["coalesce", ["get", "fill"], "#555"],
+      "fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.3],
+    },
+  },
+  {
+    id: `${source}-js-geojson-fill-outline`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    layout: { "line-cap": "round" },
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], "#555"],
+      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1],
+    },
+  },
+  {
+    id: `${source}-js-geojson-line-2`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "LineString"],
+    layout: { "line-cap": "round" },
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], "#555"],
+      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1],
+    },
+  },
+  {
+    id: `${source}-js-geojson-point`,
+    type: "symbol",
+    source,
+    filter: ["==", ["geometry-type"], "Point"],
+    layout: {
+      "icon-overlap": "always",
+      "icon-size": [
+        "case",
+        ["==", ["get", "marker-size"], "large"],
+        1.5,
+        ["==", ["get", "marker-size"], "medium"],
+        1,
+        ["==", ["get", "marker-size"], "small"],
+        0.75,
+        1,
+      ],
+      "icon-anchor": [
+        "case",
+        ["!", ["has", "marker-symbol"]],
+        "bottom",
+        ["==", ["get", "marker-symbol"], "marker"],
+        "bottom",
+        ["==", ["get", "marker-symbol"], "marker-stroked"],
+        "bottom",
+        "center",
+      ],
+      "icon-image": [
+        "coalesce",
+        ["image", ["concat", "maki:", ["get", "marker-symbol"]]],
+        ["image", "maki:marker"],
+      ],
+    },
+    paint: {
+      "icon-color": ["coalesce", ["get", "marker-color"], "#555"],
+      "icon-halo-color": ["coalesce", ["get", "stroke-color"], "#fff"],
+      "icon-halo-width": [
+        "coalesce",
+        ["get", "stroke-width"],
+        [
+          "case",
+          ["==", ["get", "marker-size"], "large"],
+          3,
+          ["==", ["get", "marker-size"], "medium"],
+          1.5,
+          ["==", ["get", "marker-size"], "small"],
+          1,
+          1.5,
+        ],
+      ],
+    },
+  },
+];
+
+export default {
+  source: async function geojson(query, controller) {
+    return await Promise.race([
+      sandbox("source", query, {}),
+      new Promise((resolve, reject) => {
+        controller.signal.onabort = () => {
+          reject(new DOMException("", "AbortError"));
+        };
+      }),
+    ]);
+  },
+  layers,
+};

package/lib/queryProviders/ohsome.js

@@ -1,4 +1,3 @@
-import osmtogeojson from "osmtogeojson";
 import { setQueryBounds } from "../bounds.js";
 
 import { layers, popupTemplate } from "./osm.js";

package/lib/queryProviders/osm.js

@@ -1,22 +1,4 @@
-import osmtogeojson from "osmtogeojson";
-
-export const flattenProperties = (geoJSON) => {
-  geoJSON.features = geoJSON.features.map((x) => {
-    const properties = x.properties;
-    delete x.properties;
-    return {
-      properties: {
-        "@id": properties.id,
-        "@type": properties.type,
-        "@meta":
-          Object.keys(properties.meta).length > 0 ? properties.meta : undefined,
-        ...properties.tags,
-      },
-      ...x,
-    };
-  });
-  return geoJSON;
-};
+import osm2geojson from "osm2geojson-ultra";
 
 export const popupTemplate = `
   {%- if type and id %}
@@ -64,9 +46,18 @@ export const popupContextBuilder = ({ properties, geometry }) => {
   const templateContext = {
     id: properties["@id"],
     type: properties["@type"],
-    meta: JSON.parse(properties["@meta"] || null),
-    tags: { ...properties },
+    tags: Object.fromEntries(
+      Object.entries(properties).filter(([k]) => !k.startsWith("@")),
+    ),
   };
+  const meta = Object.fromEntries(
+    Object.entries(properties).filter(
+      ([k]) => k.startsWith("@") && !["@id", "@type"].includes(k),
+    ),
+  );
+  if (Object.keys(meta).length > 0) {
+    templateContext.meta = meta;
+  }
   delete templateContext.tags["@type"];
   delete templateContext.tags["@id"];
   delete templateContext.tags["@meta"];
@@ -118,14 +109,17 @@ export const layers = (source) => [
 ];
 
 async function osmxmlSource(query, controller) {
-  let doc = new window.DOMParser().parseFromString(query, "text/xml");
+  let text = query;
+  const doc = new window.DOMParser().parseFromString(text, "text/xml");
   if (doc.querySelector("parsererror")) {
     const resp = await fetch(query, { signal: controller.signal });
-    doc = new window.DOMParser().parseFromString(await resp.text(), "text/xml");
+    text = await resp.text();
   }
-  const data = flattenProperties(
-    osmtogeojson(doc, { verbose: true, flatProperties: false }),
-  );
+  const data = osm2geojson(text, {
+    completeFeature: true,
+    renderTagged: true,
+    excludeWay: false,
+  });
   return { type: "geojson", data, generateId: true };
 }
 
@@ -137,9 +131,11 @@ async function osmjsonSource(query, controller) {
     const resp = await fetch(query, { signal: controller.signal });
     json = await resp.json();
   }
-  const data = flattenProperties(
-    osmtogeojson(json, { verbose: true, flatProperties: false }),
-  );
+  const data = osm2geojson(json, {
+    completeFeature: true,
+    renderTagged: true,
+    excludeWay: false,
+  });
   return {
     type: "geojson",
     data,

package/lib/queryProviders/overpass.js

@@ -1,12 +1,7 @@
-import osmtogeojson from "osmtogeojson";
+import osm2geojson from "osm2geojson-ultra";
 import { setQueryBounds } from "../bounds.js";
 
-import {
-  flattenProperties,
-  layers,
-  popupTemplate,
-  popupContextBuilder,
-} from "./osm.js";
+import { layers, popupTemplate, popupContextBuilder } from "./osm.js";
 
 // Overpass queries are detected from common strings found in queries written in OverpassQL
 const overpassQLRegexes = [
@@ -87,25 +82,31 @@ export async function callInterpreter(
   ) {
     let geoJSON;
     if (resp.headers.get("content-type") == "application/osm3s+xml") {
-      const dom = new window.DOMParser().parseFromString(
-        await resp.text(),
-        "text/xml",
-      );
+      const text = await resp.text();
+      const dom = new window.DOMParser().parseFromString(text, "text/xml");
       if (dom.querySelector("remark")) {
         alert(dom.querySelector("remark").textContent);
         return { type: "FeatureCollection", features: [] };
       }
-      geoJSON = osmtogeojson(dom, { flatProperties: false });
+      geoJSON = osm2geojson(text, {
+        completeFeature: true,
+        renderTagged: true,
+        excludeWay: false,
+      });
     } else {
       const json = await resp.json();
       if (json.remark) {
         alert(json.remark);
         return { type: "FeatureCollection", features: [] };
       }
-      geoJSON = osmtogeojson(json, { flatProperties: false });
+      geoJSON = osm2geojson(json, {
+        completeFeature: true,
+        renderTagged: true,
+        excludeWay: false,
+      });
     }
 
-    return flattenProperties(geoJSON);
+    return geoJSON;
   } else {
     const dom = new window.DOMParser().parseFromString(
       await resp.text(),

package/lib/queryProviders/postpass.js

@@ -1,4 +1,3 @@
-import osmtogeojson from "osmtogeojson";
 import { setQueryBounds } from "../bounds.js";
 
 import { layers, popupTemplate, popupContextBuilder } from "./osm.js";

package/lib/sandbox.js

@@ -11,12 +11,14 @@ const sandboxInit = async (sandboxId, p) => {
           id = msg.id;
           console.debug("parsed message", msg);
 
-          const { default: transform } = await import(msg.transform);
+          const module = await import(
+            `data:text/javascript;base64,${btoa(msg.module)}`
+          );
 
-          const o = await Promise.resolve(transform(msg.data));
-          self.postMessage(JSON.stringify({ id: msg.id, data: o }));
+          const data = await Promise.resolve(module[msg.exportName](msg.data));
+          self.postMessage(JSON.stringify({ id, data }));
         } catch (e) {
-          self.postMessage(JSON.stringify({ id: id, error: e.toString() }));
+          self.postMessage(JSON.stringify({ id, error: e.toString() }));
         }
       },
       false,
@@ -94,7 +96,7 @@ const makeSandbox = () => {
   );
   iframe.src = URL.createObjectURL(sandboxBlob);
 
-  const run = (transform, data) => {
+  const run = (exportName, module, data) => {
     const messageID = crypto.randomUUID();
     return new Promise((resolve, reject) => {
       const listener = (event) => {
@@ -120,7 +122,8 @@ const makeSandbox = () => {
       iframe.contentWindow.postMessage(
         JSON.stringify({
           id: messageID,
-          transform: `data:text/javascript;base64,${btoa(transform)}`,
+          exportName,
+          module,
           data,
         }),
         "*",
@@ -150,3 +153,10 @@ const makeSandbox = () => {
   });
 };
 export default makeSandbox;
+
+let sandbox;
+try {
+  sandbox = await makeSandbox();
+} catch {}
+
+export { sandbox };

package/lib/sprites.js

@@ -16,10 +16,9 @@ export const handleStyleImageMissing = async (ev) => {
     }
   }
   if (builtin) {
-    ev.target.addImage(
-      ev.id,
-      ev.target.getImage(builtin.slice(1, 3).join(":")).data,
-      { sdf: true },
+    const { data, pixelRatio, sdf } = ev.target.getImage(
+      builtin.slice(1, 3).join(":"),
     );
+    ev.target.addImage(ev.id, data, { data, pixelRatio, sdf });
   }
 };

package/lib/style.js

@@ -91,11 +91,15 @@ export async function getStyle(style, source) {
     } else if (typeof style.sprite === "string") {
       style.sprite = [{ id: "default", url: style.sprite }];
     }
+    const spritesheets = style.sprite.map(({ id }) => id);
     const extendedStyle = {
       ...parentStyle,
       ...style,
       sources: { ...parentStyle.sources, ...(style.sources || {}) },
-      sprite: [...parentStyle.sprite, ...style.sprite],
+      sprite: [
+        ...parentStyle.sprite.filter(({ id }) => !spritesheets.includes(id)),
+        ...style.sprite,
+      ],
       layers,
     };
     return ensureSourceAndLayers(extendedStyle, source);

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.0.3",
+  "version": "6.0.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": {
@@ -75,7 +75,7 @@
     "marked": "^14.1.2",
     "node-events": "^0.0.2",
     "normalize.css": "^8.0.1",
-    "osmtogeojson": "^3.0.0-beta.5",
+    "osm2geojson-ultra": "^4.0.0",
     "pmtiles": "^3.2.0",
     "wkt": "^0.1.1",
     "yaml": "^2.5.1"
@@ -93,8 +93,12 @@
     "topicSeparator": " "
   },
   "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!osm2geojson-ultra)"
+    ],
     "transform": {
-      "^.+\\.js$": "esbuild-jest"
+      "^.+\\.js$": "esbuild-jest",
+      "node_modules/.+\\.js$": "esbuild-jest"
     }
   }
 }