@trailstash/ultra 4.2.4 → 4.2.6

package/Examples/postpass.ultra

@@ -6,6 +6,7 @@ options:
   zoom: 15
 type: postpass
 ---
-SELECT osm_id, way, tags FROM planet_osm_point
-WHERE amenity = 'bicycle_repair_station'
-  AND way && ST_MakeEnvelope({{wsen}}, 4326)
+SELECT osm_id, osm_type, tags, geom
+FROM postpass_point
+WHERE tags->>'amenity'='fast_food'
+  AND geom && ST_MakeEnvelope({{wsen}},4326)

package/build-examples-images.js

@@ -1,22 +1,29 @@
 import path from "path";
 import fs from "fs";
 import puppeteer from "puppeteer";
+import minimist from "minimist";
 
-const exampleName = process.argv[2];
-const useLocalhost = process.argv.length > 3 && process.argv[3] === "serve";
+const {
+  _: [exampleName],
+  useLocalhost,
+  height,
+  width,
+  waitTime,
+  output,
+} = minimist(process.argv.slice(2))
 
 const browser = await puppeteer.launch({ headless: true });
 
 const page = await browser.newPage();
 // set viewport and double deviceScaleFactor to get a closer shot of the map
 await page.setViewport({
-  width: 600,
-  height: 250,
+  width: width || 600,
+  height: height || 250,
   deviceScaleFactor: 2,
 });
 
 async function createImage(exampleName) {
-  if (!fs.existsSync(`./docs/assets/${path.dirname(exampleName)}`)) {
+  if (!output && !fs.existsSync(`./docs/assets/${path.dirname(exampleName)}`)) {
     fs.mkdirSync(`./docs/assets/${path.dirname(exampleName)}`);
   }
 
@@ -35,31 +42,28 @@ async function createImage(exampleName) {
   // Wait for map to load, then wait two more seconds for images, etc. to load.
   try {
     //await page.waitForFunction('map.loaded()');
-    const waitTime = 10000;
-    console.log(`waiting for ${waitTime} ms`);
-    await new Promise((resolve) => setTimeout(resolve, waitTime));
+    console.log(`waiting for ${waitTime || 4000} ms`);
+    await new Promise((resolve) => setTimeout(resolve, waitTime || 4000));
   } catch (err) {
     // map.loaded() does not evaluate to true within 3 seconds, it's probably an animated example.
     // In this case we take the screenshot immediately.
     console.log(`Timed out waiting for map load on ${exampleName}.`);
   }
 
+  const filename = output || `./docs/assets/${exampleName.replace(".ultra", ".png")}`;
+
   await page
     .screenshot({
-      path: `./docs/assets/${exampleName.replace(".ultra", ".png")}`,
+      path: filename,
       type: "png",
       clip: {
         x: 0,
         y: 0,
-        width: 600,
-        height: 250,
+        width: width || 600,
+        height: height || 250,
       },
     })
-    .then(() =>
-      console.log(
-        `Created ./docs/assets/${exampleName.replace(".ultra", ".png")}`,
-      ),
-    )
+    .then(() => console.log(`Created ${filename}`))
     .catch((err) => {
       console.log(err);
     });

package/components/style-picker.js

@@ -2,31 +2,54 @@ import { h, t } from "../lib/dom.js";
 import { style as buttonCSS } from "./button.js";
 import { normalizeCSS } from "../lib/normalize.js";
 
-const style = `margin: 10px 0; display: block; width: 100%; text-align: left;`;
+const css = new CSSStyleSheet();
+css.replaceSync(`
+h3 {
+  margin: .5em 0 0;
+}
+h3 a {
+  color: black;
+  text-decoration: none;
+}
+button {
+  margin: 0.25em;
+  display: inline-block;
+}
+button img {
+  height: 125px;
+  width: 125px;
+}
+h3 img {
+  height: 2em;
+  width: 2em;
+  vertical-align: middle;
+  object-fit: contain;
+}
+`);
 
 const styles = [
   [
-    "OpenFreeMap Liberty",
+    "Liberty",
     "https://tiles.openfreemap.org/styles/liberty",
     `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
   ],
   [
-    "OpenFreeMap Bright",
+    "Bright",
     "https://tiles.openfreemap.org/styles/bright",
     `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
   ],
   [
-    "OpenFreeMap Positron",
+    "Positron",
     "https://tiles.openfreemap.org/styles/positron",
     `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
   ],
   [
-    "Natural Earth Vector",
+    "Vectortiles",
     "https://trailstash.github.io/naturalearthtiles/maps/natural_earth.vector.json",
     `<a href="https://github.com/trailstash/naturalearthtiles">Natural Earth</a>`,
   ],
   [
-    "MapLibre Demo Tiles",
+    "Demo Tiles",
     "https://demotiles.maplibre.org/style.json",
     `<a href="https://github.com/maplibre/demotiles">MapLibre</a>`,
   ],
@@ -47,7 +70,7 @@ export class StylePicker extends HTMLElement {
       return;
     }
 
-    const div = h("div", { slot: "modal-content" });
+    const div = h("div", { slot: "modal-content", style: "max-width: 1055px;" });
     const button = h(
       "button-modal",
       { text: "Pick Style", icon: "paintbrush" },
@@ -55,23 +78,34 @@ export class StylePicker extends HTMLElement {
     );
     this.refs = { button, div };
 
-    for (const [name, value, tiles] of this.styles) {
-      const styleButton = h(
-        "button",
-        { style },
-        t(name),
-        // h("br"),
-        // h("small", {}, `Tiles: ${tiles}`),
-      );
-      styleButton.addEventListener("click", (e) => {
-        button.toggle();
-        this.dispatchEvent(
-          new CustomEvent("change", { detail: { value: value } }),
+    const stylesByProvider = {};
+    for (const [name, value, provider] of this.styles) {
+      if (!stylesByProvider[provider]) {
+        stylesByProvider[provider] = [];
+      }
+      stylesByProvider[provider].push({name, value});
+    }
+    for (const [provider, styles] of Object.entries(stylesByProvider)) {
+      const div2 = h("div", {style:"display:inline-block;margin-right:1.25em;"});
+      div.appendChild(div2);
+      div2.appendChild(h("h3", {}, provider));
+      for (const {name, value} of styles) {
+        const styleButton = h(
+          "button",
+          {},
+          name,
         );
-      });
-      div.appendChild(styleButton);
+        styleButton.addEventListener("click", (e) => {
+          button.toggle();
+          this.dispatchEvent(
+            new CustomEvent("change", { detail: { value: value } }),
+          );
+        });
+        div2.appendChild(styleButton);
+      }
     }
 
+    shadow.adoptedStyleSheets.push(css);
     shadow.appendChild(button);
   }
 }

package/docs/yaml.md

@@ -254,6 +254,13 @@ Detected if
 An SQL query to be executed on a [Postpass](https://github.com/woodpeck/postpass) server. Server
 results are modified to have the same structure as [overpass](#overpass)
 
+!!! warning
+
+    Postpass is in very early stages of development, so Ultra may lag behind as new versions of the
+    API are released. This provider defaults to the version 0.2 of the [GeoFabrik Postpass
+    API](https://github.com/woodpeck/postpass-ops) &
+    [Schema](https://github.com/woodpeck/postpass-ops/blob/main/SCHEMA.md)
+
 ## `options`
 
 When an Ultra query is run in "interactive map" mode, you can specify the

package/lib/queryProviders/postpass.js

@@ -3,14 +3,6 @@ import { setQueryBounds } from "../bounds.js";
 
 import { layers, popupTemplate, popupContextBuilder } from "./osm.js";
 
-const nonTags = {
-  osm_id: true,
-  tags: true,
-  // yes... these are not tags... but they are useful! so we're keeping them.
-  // way_area: true,
-  // z_order: true,
-};
-
 const flattenPropertiesAndInferIdAndType = (geoJSON) => {
   // prety major assumption basked into this as Postpass executes arbitrary SQL so the returned
   // data could be anything. This assumes that the query returns un-renamed columns.
@@ -18,12 +10,7 @@ const flattenPropertiesAndInferIdAndType = (geoJSON) => {
     const properties = {};
     if (f.properties.osm_id) {
       properties["@id"] = f.properties.osm_id;
-      if (properties["@id"] < 0) {
-        properties["@id"] = -properties["@id"];
-        properties["@type"] = "relation";
-      } else {
-        properties["@type"] = f.geometry.type === "Point" ? "node" : "way";
-      }
+      properties["@type"] = f.properties.osm_type;
     }
     if (f.properties.tags) {
       for (const [k, v] of Object.entries(f.properties.tags)) {
@@ -31,9 +18,7 @@ const flattenPropertiesAndInferIdAndType = (geoJSON) => {
       }
     }
     for (const [k, v] of Object.entries(f.properties)) {
-      if (!nonTags[k]) {
-        properties[k] = v;
-      }
+      properties[k] = v;
     }
     return {
       ...f,
@@ -46,7 +31,7 @@ const flattenPropertiesAndInferIdAndType = (geoJSON) => {
 const postpass = {
   source: async function (query, controller, { server, bounds }) {
     if (!server) {
-      server = "https://postpass.geofabrik.de/api/0.1/interpreter";
+      server = "https://postpass.geofabrik.de/api/0.2/interpreter";
     }
     const resp = await fetch(server, {
       method: "POST",

package/mkdocs.yml

@@ -24,3 +24,7 @@ extra:
 extra:
   analytics:
     provider: custom
+markdown_extensions:
+  - admonition
+  - pymdownx.details
+  - pymdownx.superfences

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "4.2.4",
+  "version": "4.2.6",
   "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": {
@@ -47,6 +47,7 @@
     "esbuild-jest": "^0.5.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "minimist": "^1.2.8",
     "prettier": "^3.3.3",
     "puppeteer": "^23.4.0",
     "svg2png": "^4.1.1",