@trailstash/ultra 3.0.1 → 3.1.0-beta2

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/help-modal.js

@@ -3,6 +3,7 @@ import { h, t } from "../lib/dom.js";
 import { style as buttonCSS } from "./button.js";
 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 readme from "../README.md";
@@ -66,6 +67,12 @@ export class HelpModal extends HTMLElement {
             </ul>
             <h4>Software &amp; Libraries</h4>
             <ul>
+              <li>
+                IDE powered by
+                <a target="_blank" href="https://gitlab.com/trailstash/ultra"
+                  >@trailstash/ultra</a
+                > <code>${version}</code>
+              </li>
               <li>
                 Map powered by
                 <a target="_blank" href="https://maplibre.org/projects/maplibre-gl-js/"

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

@@ -3,8 +3,8 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.0.1",
-  "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-beta2",
+  "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",
@@ -14,9 +14,9 @@
     "build:maplibre-examples-docs": "node ./build-examples-docs.js MapLibre-Examples",
     "build:docs": "mkdocs build",
     "start:docs": "mkdocs serve",
-    "build:pages": "mkdir -p public && cp -Lr static/* public/.",
+    "build:pages": "mkdir -p public && cp -Lr dist/* public/.",
     "start": "node ./bin/run.js serve",
-    "format": "prettier --print-width=80 --write '**/*.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",
@@ -38,11 +38,12 @@
   },
   "homepage": "https://overpass-ultra.us/",
   "devDependencies": {
-    "@types/node": "^22.5.4",
+    "@types/node": "^22.6.1",
     "@unvt/sprite-one": "^0.1.1",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.0",
+    "esbuild-plugin-copy": "^2.1.1",
     "prettier": "^3.3.3",
-    "puppeteer": "^23.3.0",
+    "puppeteer": "^23.4.0",
     "svg2png": "^4.1.1",
     "ts-node": "^10.9.2"
   },
@@ -50,19 +51,19 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@oclif/core": "^4.0.20",
+    "@oclif/core": "^4.0.23",
     "@tmcw/togeojson": "^5.8.1",
     "@trailstash/maplibre-component": "^1.0.1",
     "@turf/bbox": "^7.1.0",
     "deep-equal": "^2.2.3",
-    "liquidjs": "^10.16.7",
+    "liquidjs": "^10.17.0",
     "lodash.pick": "^4.4.0",
     "lz-string": "^1.5.0",
-    "maplibre-gl": "^4.7.0",
-    "marked": "^14.1.1",
+    "maplibre-gl": "^4.7.1",
+    "marked": "^14.1.2",
     "normalize.css": "^8.0.1",
     "osmtogeojson": "^3.0.0-beta.5",
-    "pmtiles": "^3.0.7",
+    "pmtiles": "^3.2.0",
     "yaml": "^2.5.1"
   },
   "peerDependencies": {

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": {} }
-  }
-}