@trailstash/ultra 3.4.5 → 3.5.0

package/Examples/alt-bbox-format.ultra

@@ -1,9 +1,9 @@
 ---
 title: Load GeoJSON with custom BBOX format
-description: Load GeoJSON from the Bunting Labs API using the east/west/south/north shortcuts.
+description: Load GeoJSON from the ohsome API using the east/west/south/north shortcuts.
 type: geojson
 options:
   center: [-122.6847, 45.5112]
   zoom: 15
 ---
-https://osm.buntinglabs.com/v1/osm/extract?bbox={{west}},{{south}},{{east}},{{north}}&tags=amenity%3Dbicycle_repair_station&api_key=4WBfyRaP9pGv
+https://api.ohsome.org/v1/elements/geometry?bboxes={{west}},{{south}},{{east}},{{north}}&filter=amenity%3Dbicycle_repair_station

package/components/help-modal.js

@@ -10,22 +10,11 @@ import { version as osmtogeojsonVersion } from "osmtogeojson/package.json";
 const help = `# Introduction
 
 Ultra (née Overpass Ultra) is a web-application made to simplify making maps with [MapLibre GL
-JS](https://maplibre.org).
-
-It can easily visualize the following file/query types:
-
- * [GeoJSON](https://geojson.org/)
- * [KML](https://developers.google.com/kml/documentation/kml_tut)
- * [GPX](https://www.topografix.com/gpx.asp)
- * [TCX](https://en.wikipedia.org/wiki/Training_Center_XML)
- * [OverpassQL](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL)
- * [Overpass XML](https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide)
- * [OSM XML](https://wiki.openstreetmap.org/wiki/OSM_XML)
- * [OSM JSON](https://wiki.openstreetmap.org/wiki/OSM_JSON)
+JS](https://maplibre.org) with data from various file/query types such as Overpass, GeoJSON, GPX, and more.
 
 ## Documentation
 
-Full documentation for Ultra is available at ${window.location.origin}/docs
+Full documentation for Ultra is available at ${new URL("docs", window.location).toString()}
 
 ## Configuration
 
@@ -76,6 +65,7 @@ export class HelpModal extends HTMLElement {
     super();
     this.help = HelpModal.defaults.help;
     this.styles = [];
+    this.queryProviders = {};
   }
 
   connectedCallback() {
@@ -105,6 +95,14 @@ export class HelpModal extends HTMLElement {
       { style: "padding: 0 8px 8px;max-width:800px;", slot: "modal-content" },
       `
           ${helpHTML}
+          <div>
+            <h4>Installed Query Providers</h4>
+            <ul>
+              ${Object.entries(this.queryProviders)
+                .map(([name]) => `<li><code>${name}</code></li>`)
+                .join("\n")}
+            </ul>
+          </div>
           ${stylesHTML}
           <div>
             <h4>Software &amp; Libraries</h4>
@@ -120,18 +118,31 @@ export class HelpModal extends HTMLElement {
                   >maplibre-gl</a
                 > <code>${maplibreVersion}</code>
               </li>
-              <li>
+              ${
+                this.queryProviders.overpass ||
+                this.queryProviders.osmjson ||
+                this.queryProviders.osmxml
+                  ? `<li>
                 OSM to GeoJSON conversion powered by
                 <a target="_blank" href="https://github.com/tyrasd/osmtogeojson"
                   >osmtogeojson</a
                 > <code>${osmtogeojsonVersion}</code>
-              </li>
-              <li>
+              </li>`
+                  : ""
+              }
+
+              ${
+                this.queryProviders.gpx ||
+                this.queryProviders.tcx ||
+                this.queryProviders.kml
+                  ? `<li>
                 KML/GPX/TCX to GeoJSON conversion powered by
                 <a target="_blank" href="https://github.com/placemark/togeojson"
                   >@tmcw/togeojson</a
                 >
-              </li>
+              </li>`
+                  : ""
+              }
             </ul>
           </div>
       `,

package/components/ultra-ide.js

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

package/components/ultra-map.js

@@ -47,7 +47,7 @@ export class UltraMap extends HTMLElement {
     querySources: ["ultra"],
     options: {},
     controls: [],
-    fitBounds: false,
+    fitBounds: undefined,
     queryProviders,
     persistState: false,
   };
@@ -281,11 +281,15 @@ export class UltraMap extends HTMLElement {
   }
 
   get #fitBounds() {
-    if (this.fitBounds) {
+    if (this.fitBounds !== undefined) {
       return this.fitBounds;
     }
     const queryProvider = this.queryProviders[this.type];
-    if (queryProvider && queryProvider.fitBounds) {
+    if (
+      queryProvider &&
+      queryProvider.fitBounds &&
+      setQueryBounds(this.query, this.refs.mapLibre.bounds) === this.query
+    ) {
       return queryProvider.fitBounds;
     }
     return this.fitBounds;

package/docs/index.md

@@ -1,21 +1,10 @@
 # Introduction
 
 Ultra (née Overpass Ultra) is a web-application made to simplify making maps with [MapLibre GL
-JS](https://maplibre.org).
+JS](https://maplibre.org) with data from various file/query types such as Overpass, GeoJSON, GPX, and more.
 
 ![](./assets/screenshot.png)
 
-It can easily visualize the following file/query types:
-
- * [GeoJSON](https://geojson.org/)
- * [KML](https://developers.google.com/kml/documentation/kml_tut)
- * [GPX](https://www.topografix.com/gpx.asp)
- * [TCX](https://en.wikipedia.org/wiki/Training_Center_XML)
- * [OverpassQL](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL)
- * [Overpass XML](https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide)
- * [OSM XML](https://wiki.openstreetmap.org/wiki/OSM_XML)
- * [OSM JSON](https://wiki.openstreetmap.org/wiki/OSM_JSON)
-
 ## Getting Started
 All Ultra maps defined by a document containing an optional configuration and optional query. For
 example, to query bicycle repair stations using the [Overpass API](https://overpass-api.de), you

package/docs/yaml.md

@@ -115,6 +115,15 @@ Detected if:
 - Parses as a URL and the path matches that of an `node/:id`, `way/:id/full`, or
   `relation/:id/full` OSM API route
 
+### `ohsome`
+
+An [ohsome API](https://api.ohsome.org/) [filter](https://docs.ohsome.org/ohsome-api/v1/filter.html).
+
+Automatically adds the current bbox with the [`bboxes` param](https://docs.ohsome.org/ohsome-api/v1/boundaries.html#bboxes) and `properties=tags,metadata` using the [extracts endpoint](https://docs.ohsome.org/ohsome-api/v1/endpoints.html#elements-extraction).
+
+For more complex ohsome API usage, make a request using the [`geojson`](#geojson) provider with [a
+custom BBOX format](./Examples/alt-bbox-format.md).
+
 ### `geojson`
 
 A JSON-encoded GeoJSON object or a URL to a GeoJSON file.

package/lib/queryProviders/index.js

@@ -1,5 +1,6 @@
 import AutoProvider from "./auto.js";
 import overpass, { osmWebsite, osmWiki } from "./overpass.js";
+import ohsome from "./ohsome.js";
 import geojson from "./geojson.js";
 import raster from "./raster.js";
 import vector from "./vector.js";
@@ -12,6 +13,7 @@ export const all = {
   overpass,
   osmWebsite,
   osmWiki,
+  ohsome,
   geojson,
   osmxml,
   osmjson,

package/lib/queryProviders/ohsome.js

@@ -0,0 +1,62 @@
+import osmtogeojson from "osmtogeojson";
+import { setQueryBounds } from "../bounds.js";
+
+import { layers, popupTemplate } from "./osm.js";
+
+const popupContextBuilder = ({ properties, geometry }) => {
+  const templateContext = {
+    id: properties["@osmId"].split("/")[1],
+    type: properties["@osmType"],
+    meta: {
+      changeset: properties["@changesetId"],
+      version: properties["@version"],
+      lastEdit: properties["@lastEdit"],
+      snapshotTimestamp: properties["@snapshotTimestamp"],
+    },
+    tags: { ...properties },
+  };
+  delete templateContext.tags["@osmId"];
+  delete templateContext.tags["@osmType"];
+  delete templateContext.tags["@changesetId"];
+  delete templateContext.tags["@version"];
+  delete templateContext.tags["@lastEdit"];
+  delete templateContext.tags["@snapshotTimestamp"];
+  if (properties["@type"] === "node") {
+    templateContext.coordinates = geometry.coordinates;
+  }
+  return templateContext;
+};
+
+const overpass = {
+  source: async function (query, controller, { server, bounds }) {
+    if (!server) {
+      server = "https://api.ohsome.org/v1";
+    }
+    const body = new FormData();
+    body.append(
+      "bboxes",
+      `${bounds.getWest()},${bounds.getSouth()},${bounds.getEast()},${bounds.getNorth()}`,
+    );
+    body.append("filter", query);
+    body.append("properties", "tags,metadata");
+    const resp = await fetch(`${server}/elements/geometry`, {
+      method: "POST",
+      body,
+    });
+    if (!resp.ok) {
+      throw new Error(`Ohsome API returned ${resp.status}`);
+    }
+    const data = await resp.json();
+    return {
+      type: "geojson",
+      data,
+      attribution:
+        '\u003Ca href="https://www.openstreetmap.org/copyright" target="_blank"\u003E© OpenStreetMap contributors\u003C/a\u003E',
+      generateId: true,
+    };
+  },
+  layers,
+  popupTemplate,
+  popupContextBuilder,
+};
+export default overpass;

package/lib/queryProviders/osm.js

@@ -24,7 +24,7 @@ export const popupTemplate = `
     <a href="https://openstreetmap.org/{{ type }}/{{ id }}" target="_blank">{{ id }}</a>
     <a href="https://openstreetmap.org/edit?{{ type }}={{ id }}" target="_blank">✏️</a>
   </h2>
-  <h3>Properties</h3>
+  <h3>Tags</h3>
   {%- for tag in tags %}
     {%- if tag[0] contains "website" %}
       <code>{{ tag[0] }} = <a href="{{ tag[1] }}" target="_blank">{{ tag[1] }}</a></code>

package/lib/style.js

@@ -160,13 +160,13 @@ export function ensureSourceAndLayers(style, source) {
   if (!spritesheets.includes("maki")) {
     style.sprite.push({
       id: "maki",
-      url: window.location.origin + "/sprites/maki",
+      url: new URL("sprites/maki", window.location).toString(),
     });
   }
   if (!spritesheets.includes("temaki")) {
     style.sprite.push({
       id: "temaki",
-      url: window.location.origin + "/sprites/temaki",
+      url: new URL("sprites/temaki", window.location).toString(),
     });
   }
   if (source && !style.sources.ultra) {

package/package.json

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