@trailstash/ultra 3.0.0 → 3.1.0-beta0

package/cli/build.js

@@ -3,15 +3,26 @@ import path from "path";
 import process from "process";
 import { build } from "esbuild";
 import { Command, Flags } from "@oclif/core";
+import { copy } from "esbuild-plugin-copy";
+import { Liquid } from "liquidjs";
+
+const engine = new Liquid();
+export const getHTMLContext = async (configFile) => {
+  const config = await import(configFile);
+  const {
+    settings: { title, description, url, mastodon },
+  } = config.modes[config.defaultMode];
+  return { title, description, url, mastodon };
+};
 
 export const ultraRoot = path.dirname(
   path.dirname(new URL(import.meta.url).pathname),
 );
-export const buildOptions = (config) => ({
+export const buildOptions = (config, watch = false) => ({
   entryPoints: [path.join(ultraRoot, "index.js")],
   bundle: true,
   format: "esm",
-  outdir: path.join(ultraRoot, "static/dist"),
+  outdir: "dist",
   loader: {
     ".md": "text",
     ".css": "text",
@@ -22,6 +33,15 @@ export const buildOptions = (config) => ({
   alias: {
     "ultra-config": config,
   },
+  plugins: [
+    copy({
+      assets: {
+        from: [path.join(ultraRoot, "static/*")],
+        to: [path.join(process.cwd(), "./dist")],
+      },
+      watch,
+    }),
+  ],
 });
 
 export default class Build extends Command {
@@ -29,7 +49,7 @@ export default class Build extends Command {
     config: Flags.string({
       char: "c",
       description: "configuration to use",
-      default: path.join(ultraRoot, "configs/overpass-ultra.js"),
+      default: path.join(process.cwd(), "/config.js"),
     }),
   };
 
@@ -40,14 +60,13 @@ export default class Build extends Command {
       flags: { config },
     } = await this.parse(Build);
 
-    await build(buildOptions(config));
+    const html = engine.parseAndRenderSync(
+      fs.readFileSync(path.join(ultraRoot, "index.html")),
+      await getHTMLContext(config),
+    );
+    fs.mkdirSync("dist", { recursive: true});
+    fs.writeFileSync("dist/index.html", html);
 
-    if (ultraRoot !== process.cwd()) {
-      fs.cpSync(
-        path.join(ultraRoot, "static"),
-        path.join(process.cwd(), "static"),
-        { recursive: true },
-      );
-    }
+    await build(buildOptions(config));
   }
 }

package/cli/serve.js

@@ -1,7 +1,11 @@
+import fs from "fs";
 import path from "path";
 import { context } from "esbuild";
 import { Command, Flags } from "@oclif/core";
-import Build, { buildOptions, ultraRoot } from "./build.js";
+import Build, { buildOptions, getHTMLContext, ultraRoot } from "./build.js";
+import { Liquid } from "liquidjs";
+
+const engine = new Liquid();
 
 export default class Serve extends Command {
   static flags = {
@@ -27,8 +31,15 @@ export default class Serve extends Command {
       flags: { config, host, port },
     } = await this.parse(Serve);
 
-    const ctx = await context(buildOptions(config));
+    const html = engine.parseAndRenderSync(
+      fs.readFileSync(path.join(ultraRoot, "index.html")),
+      await getHTMLContext(config),
+    );
+    fs.mkdirSync("dist", { recursive: true});
+    fs.writeFileSync("dist/index.html", html);
+
+    const ctx = await context(buildOptions(config, true));
     console.log(`Starting dev server on http://${host}:${port}`);
-    await ctx.serve({ host, port, servedir: path.join(ultraRoot, "static") });
+    await ctx.serve({ host, port, servedir: "dist" });
   }
 }

package/components/code-editor.js

@@ -54,10 +54,10 @@ export class CodeEditor extends HTMLElement {
     textarea.addEventListener("drop", async (e) => {
       e.preventDefault();
       const item = e.dataTransfer.items[0];
-      if (item.kind === "file"){
+      if (item.kind === "file") {
         this.source = await item.getAsFile().text();
       } else {
-        this.source = e.dataTransfer.getData('text/plain');
+        this.source = e.dataTransfer.getData("text/plain");
       }
     });
     textarea.addEventListener("keydown", (e) => {

package/docs/further-reading.md

@@ -1,4 +1,4 @@
-Here are some more resources on Overpass Ultra:
+Here are some more resources on Ultra:
 
 ## OSM Wiki
 

package/docs/index.md

@@ -2,17 +2,15 @@
 
 <img alt="powered by Overpass API" style="float: right" src="https://wiki.openstreetmap.org/w/images/b/b3/Powered_by_Overpass_API.png">
 
-[Overpass Ultra](https://overpass-ultra.us) is a web-application made to simplify making maps with [MapLibre GL
-JS](https://maplibre.org) and [OpenStreetMap](https://openstreetmap.org) data, powered by the
-[Overpass API](https://overpass-api.de/) and
-[`osmtogeojson`](https://github.com/tyrasd/osmtogeojson)
+[Ultra](https://overpass-ultra.us) is a web-application made to simplify making maps with [MapLibre GL
+JS](https://maplibre.org) and [OpenStreetMap](https://openstreetmap.org) data.
 
 The customization of the map complies with an [extended](https://overpass-ultra.us/docs/style#ultra-maplibre-styles) version
 of the the [MapLibre Style Spec](https://maplibre.org/maplibre-style-spec/).
 
 ## Documentation
 
-The documentation for Overpass Ultra is available at <a target="_blank" href="https://overpass-ultra.us/docs/">overpass-ultra.us/docs</a>
+The documentation for Ultra is available at <a target="_blank" href="https://overpass-ultra.us/docs/">overpass-ultra.us/docs</a>
 
 ## Overpass Queries
 
@@ -25,25 +23,25 @@ coordinates of the current map view.
 
 ## Configuration
 
-Various aspects of Overpass Ultra, such as styling and the Overpass API server to use, can be
+Various aspects of Ultra, such as styling and the Overpass API server to use, can be
 configured via [YAML front-matter](https://overpass-ultra.us/docs/yaml).
 
 ## Styling
 
-Overpass Ultra supports styling using the [MapLibre Style
+Ultra supports styling using the [MapLibre Style
 Specification](https://maplibre.org/maplibre-style-spec/).
 
 See the [Styling](https://overpass-ultra.us/docs/style) section for more information.
 
 ## About
 
-Overpass Ultra is built by Daniel Schep.
+Ultra is built by Daniel Schep.
 
 You can contact me on [Mastodon](https://mapstodon.space/@trailstash).
 
 ## Feedback, Bug Reports, Feature Requests
 
-While Overpass Ultra has been in development for a while, it should still be considered
+While Ultra has been in development for a while, it should still be considered
 experimental.
 
 If you would like to report a bug or provide other feedback, please do so in the project's

package/docs/style.md

@@ -18,11 +18,11 @@ The value of the style: key can contain:
 
 ## Ultra MapLibre styles
 
-In order to simplify the use of MapLibre styles, Overpass Ultra implements a number of features.
+In order to simplify the use of MapLibre styles, Ultra implements a number of features.
 
 ### Query result styling
 
-In order to allow for easy styling of the query results, Overpass Ultra allows you to specify a
+In order to allow for easy styling of the query results, Ultra allows you to specify a
 style with only the layer for your query results.
 
 For example, to render query results with a purple MapLibre
@@ -66,7 +66,7 @@ source containting the query results.
 ### Automatic `paint` and `layer` keys
 In order to reduce the mental overhead of remember what keys are
 [`paint`](https://maplibre.org/maplibre-style-spec/layers/#paint) options and which are
-[`layout`](https://maplibre.org/maplibre-style-spec/layers/#layout) options, Overpass Ultra will
+[`layout`](https://maplibre.org/maplibre-style-spec/layers/#layout) options, Ultra will
 automatically move them from the layer object into the appropriate options object.
 
 For example, the above purple circle layer can be implemented as:
@@ -89,13 +89,13 @@ In order to place your layers below existing style layers, you can use the `befo
 ## PNG sprites via HTTPS
 In order to facilitate adding icons to the map that don't exist in the basemap's
 [sprites](),
-if `icon-image` is set to an HTTPS URL to a PNG image, Overpass Ultra will automatically download
+if `icon-image` is set to an HTTPS URL to a PNG image, Ultra will automatically download
 it and add it to the Map's images.
 
 [Example](./MapLibre-Examples/add-image.md)
 
 ## Bundled Sprites
-In order to simplify the creation of POI maps, Overpass Ultra bundles the
+In order to simplify the creation of POI maps, Ultra bundles the
 [Maki](https://github.com/mapbox/maki) and [Temaki](https://github.com/rapideditor/temaki) sprites
 and adds them to your style as [SDFs](https://docs.mapbox.com/help/troubleshooting/using-recolorable-images-in-mapbox-maps/)
 allowing for easy styling of icons.
@@ -116,5 +116,5 @@ style:
 
 ## Fallback fontstack
 Since not all MapLibre styles have the same
-[glyphs](https://maplibre.org/maplibre-style-spec/glyphs/), Overpass Ultra will default to using
+[glyphs](https://maplibre.org/maplibre-style-spec/glyphs/), Ultra will default to using
 Noto Sans Regular if the speficied(or default) fontstack is not available.

package/docs/url-parameters.md

@@ -1,6 +1,6 @@
 # URL Hash Parameters
 
-You use the following query string parameters as a hash to instruct Overpass Ultra to set certain properties on startup (such as the query or the map location).
+You use the following query string parameters as a hash to instruct Ultra to set certain properties on startup (such as the query or the map location).
 
 ## `query` <small>(URL-encoded string)</small>
 

package/docs/yaml.md

@@ -1,11 +1,11 @@
 # YAML front-matter config
 
-The real power of Overpass Ultra lies in it's easy configuration of MapLibre with the a query's
+The real power of Ultra lies in it's easy configuration of MapLibre with the a query's
 [YAML front-matter](https://jekyllrb.com/docs/front-matter/).
 
 ## `style`
 
-Customize the MapLibre style. See [Styling](./Style.md) for more information.
+Customize the MapLibre style. See [Styling](./style.md) for more information.
 
 Example: 
 ```
@@ -74,7 +74,7 @@ url](https://maplibre.org/maplibre-style-spec/sources/#url_2)
 
 ## `options`
 
-When an Overpass Ultra query is run in "interactive map" mode, you can specify the
+When an Ultra query is run in "interactive map" mode, you can specify the
 [`MapOptions`](https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapOptions/)
 that are passed to the MapLibre constructor.
 
@@ -89,7 +89,7 @@ options:
 ```
 
 ## `controls`
-When an Overpass Ultra query is run in "interactive map" mode, you can specify controls to be added to the map with the `controls` key
+When an Ultra query is run in "interactive map" mode, you can specify controls to be added to the map with the `controls` key
 in the YAML-front matter. The key should contain a list of objects. Each object must specify a `type` key containing the 
 name of a control present in MapLibre. It can optionally contain an `options` key who's contents are passed to the
 control's constructor and a `position` key that is passed to

package/{static/index.html → index.html}

@@ -4,15 +4,19 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" href="./logo.png" />
-    <link rel="me" href="https://mapstodon.space/@trailstash" />
+    {% if mastodon %}
+    <link rel="me" href="{{ mastodon }}" />
+    {% endif %}
 
-    <title>Ultra</title>
+    <title>{{ title | default: "Ultra"}}</title>
 
     <!-- Meta tags for SEO and social sharing -->
-    <link rel="canonical" href="https://overpass-ultra.us/" />
+    {% if url %}
+    <link rel="canonical" href="{{ url }}" />
+    {% endif %}
     <meta
       name="description"
-      content="A web based data visualization tool for OpenStreetMap which runs spatial OverpassQL queries and shows the results on an interactive map"
+      content="{{ description | default: "A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc" }}"
     />
     <meta name="robots" content="index,follow" />
 
@@ -28,7 +32,7 @@
             : (window.sa_event.q = [a]);
         };
     </script>
-    <script src="./dist/index.js" type="module"></script>
+    <script src="./index.js" type="module"></script>
   </head>
   <body>
     <ultra-loader></ultra-loader>

package/lib/queryProviders/gpx.js

@@ -76,7 +76,7 @@ const detect = async (query) => {
   const doc = new window.DOMParser().parseFromString(query, "text/xml");
   if (
     !doc.querySelector("parsererror") &&
-    doc.childNodes[0].nodeName === "gpx"
+    Array.from(doc.childNodes).some((x) => x.nodeName === "gpx")
   ) {
     return query;
   }

package/lib/queryProviders/kml.js

@@ -91,7 +91,8 @@ const detect = async (query) => {
   }
   const doc = new window.DOMParser().parseFromString(query, "text/xml");
   return (
-    !doc.querySelector("parsererror") && doc.childNodes[0].nodeName === "kml"
+    !doc.querySelector("parsererror") &&
+    Array.from(doc.childNodes).some((x) => x.nodeName === "kml")
   );
 };
 

package/lib/queryProviders/osm.js

@@ -153,7 +153,7 @@ const detectXML = (query) => {
   const doc = new window.DOMParser().parseFromString(query, "text/xml");
   if (
     !doc.querySelector("parsererror") &&
-    doc.childNodes[0].nodeName === "osm"
+    Array.from(doc.childNodes).some((x) => x.nodeName === "osm")
   ) {
     return query;
   }

package/package.json

@@ -3,8 +3,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.0.0",
-  "description": "A web based tool for making MapLibre GL maps with data from souces such as Overpass, GeoJSON, GPX, KML, TCX, etc",
+  "version": "3.1.0-beta0",
+  "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": {
     "build": "node ./bin/run.js build",
@@ -16,7 +16,7 @@
     "start:docs": "mkdocs serve",
     "build:pages": "mkdir -p public && cp -Lr static/* public/.",
     "start": "node ./bin/run.js serve",
-    "format": "prettier --print-width=80 --write '**/*@trailstash/ultru.js' '**/*.json' README.md static/index.html '**/*.css'",
+    "format": "prettier --print-width=80 --write '**/*.js' '**/*.json' README.md '**/*.css'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "type": "module",
@@ -41,6 +41,7 @@
     "@types/node": "^22.5.4",
     "@unvt/sprite-one": "^0.1.1",
     "esbuild": "^0.23.1",
+    "esbuild-plugin-copy": "^2.1.1",
     "prettier": "^3.3.3",
     "puppeteer": "^23.3.0",
     "svg2png": "^4.1.1",

package/configs/overpass-ultra.js

@@ -1,181 +0,0 @@
-import help from "../docs/index.md";
-
-const queryUrl = () => {
-  const params = new URLSearchParams(window.location.hash.slice(1));
-  params.delete("map");
-  return new URL("#" + params.toString(), window.location).toString();
-};
-
-let mapStyle = "https://styles.trailsta.sh/openmaptiles-osm.json";
-let server = "https://overpass-api.de/api";
-let query = `/*
-This is an example Overpass query.
-Try it out by pressing the Run button above!
-*/
-[bbox:{{bbox}}];
-(
-way[highway=path];
-way[highway=footway];
-way[highway=cycleway];
-way[highway=steps];
-);
-out geom;`;
-let popupTemplate;
-
-let styles = [
-  [
-    "OSM OpenMapTiles",
-    "https://styles.trailsta.sh/openmaptiles-osm.json",
-    "OpenMapTiles",
-  ],
-  [
-    "OSM Liberty",
-    "https://styles.trailsta.sh/osm-liberty.json",
-    "OpenMapTiles",
-  ],
-  ["OSM Bright", "https://styles.trailsta.sh/osm-bright.json", "OpenMapTiles"],
-  ["Positron", "https://styles.trailsta.sh/positron.json", "OpenMapTiles"],
-  [
-    "Dark Matter",
-    "https://styles.trailsta.sh/dark-matter.json",
-    "OpenMapTiles",
-  ],
-  [
-    "MapTiler Basic",
-    "https://styles.trailsta.sh/maptiler-basic.json",
-    "OpenMapTiles",
-  ],
-  [
-    "Fiord Color",
-    "https://styles.trailsta.sh/fiord-color.json",
-    "OpenMapTiles",
-  ],
-  [
-    "Protomaps Light",
-    "https://styles.trailsta.sh/protomaps-light.json",
-    "Protomaps",
-  ],
-  [
-    "Protomaps Dark",
-    "https://styles.trailsta.sh/protomaps-dark.json",
-    "Protomaps",
-  ],
-  [
-    "Protomaps Data Viz (white)",
-    "https://styles.trailsta.sh/protomaps-white.json",
-    "Protomaps",
-  ],
-  [
-    "Protomaps Data Viz (grayscale)",
-    "https://styles.trailsta.sh/protomaps-grayscale.json",
-    "Protomaps",
-  ],
-  [
-    "Protomaps Data Viz (black)",
-    "https://styles.trailsta.sh/protomaps-black.json",
-    "Protomaps",
-  ],
-  ["Basic", "https://styles.trailsta.sh/protomaps-contrast.json", "Protomaps"],
-  ["OpenTrailStash", "https://open.trailsta.sh/style.json", "OpenTrailStash"],
-];
-
-if (window.location.host === "ohm.overpass-ultra.us") {
-  // TODO: customize help
-  styles = [];
-  query = `/*
-This is an example Overpass query.
-Try it out by pressing the Run button above!
-*/
-nwr["amenity"="theatre"]["start_date"](if:
-  t["start_date"] < "1976" &&
-  (!is_tag("end_date") || t["end_date"] >= "1975"));
-
-out geom;`;
-  server = "https://overpass-api.openhistoricalmap.org/api/";
-  mapStyle = "https://www.openhistoricalmap.org/map-styles/main/main.json";
-  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>
-  </h2>
-  <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>
-    {%- elsif tag[0] contains "wikidata" %}
-      <code>{{ tag[0] }} = <a href="https://wikidata.org/wiki/{{ tag[1] }}" target="_blank">{{ tag[1] }}</a></code>
-    {%- elsif tag[0] contains "wikipedia" %}
-      {% assign lang = tag[1] | split: ":" | first %}
-      <code>{{ tag[0] }} = <a href="https://{{ lang }}.wikipedia.org/wiki/{{ tag[1] | replace_first: lang, "" | replace_first: ":", "" }}" target="_blank">{{ tag[1] }}</a></code>
-    {%- else %}
-      <code>{{ tag[0] }} = {{ tag[1] }}</code>
-    {%- endif %}
-    <br>
-  {%- endfor %}
-  {%- if meta %}
-    <h3>Meta</h3>
-    {%- for tag in meta %}
-      {%- if tag[0] == "changeset" %}
-        <code>{{ tag[0] }} = <a href="https://openhistoricalmap.org/changeset/{{ tag[1] }}" target="_blank">{{ tag[1] }}</a></code>
-      {%- elsif tag[0] == "user" %}
-        <code>{{ tag[0] }} = <a href="https://openhistoricalmap.org/user/{{ tag[1] }}" target="_blank">{{ tag[1] }}</a></code>
-      {%- else %}
-        <code>{{ tag[0] }} = {{ tag[1] }}</code>
-      {%- endif %}
-        <br>
-    {%- endfor %}
-  {%- endif %}
-  {%- if coordinates %}
-    <h3>Coordinates</h3>
-    <a href="geo://{{coordinates[1]}},{{coordinates[0]}}">{{coordinates[1] | round: 6 }} / {{coordinates[0] | round: 6 }}</a> <small>(lat/lon)</small>
-  {%- endif %}
-`;
-}
-
-const settings = {
-  type: "overpass",
-  server,
-  mapStyle,
-  popupTemplate,
-  options: {},
-  controls: [],
-};
-
-export const defaultMode = "ide";
-export const modes = {
-  ide: {
-    query,
-    styles,
-    help,
-    title: "Overpass Ultra",
-    icon: "/logo.png",
-    settings: {
-      ...settings,
-      zoom: 16,
-      center: [-77.4515, 37.5287],
-      options: {
-        attributionControl: {
-          customAttribution: "",
-        },
-        maxBounds: [
-          [-179.999999999, -85.051129],
-          [179.999999999, 85.051129],
-        ],
-      },
-    },
-  },
-  map: {
-    settings: {
-      ...settings,
-      loadSettingsFromQueryParams: true,
-      options: {
-        attributionControl: {
-          compact: true,
-          customAttribution: `<a href=".">Overpass Ultra</a>
-            (<a href="${queryUrl()}">View Query</a>)`,
-        },
-      },
-    },
-  },
-};

package/static/minimal.js

@@ -1,9 +0,0 @@
-export const defaultMode = "ide";
-export const modes = {
-  ide: {
-    settings: {},
-  },
-  map: {
-    settings: {},
-  },
-};

package/static/minimal.json

@@ -1,7 +0,0 @@
-{
-  "defaultMode": "ide",
-  "modes": {
-    "ide": { "settings": {} },
-    "map": { "settings": {} }
-  }
-}