@trailstash/ultra 4.2.5 → 4.2.6

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/package.json

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