@trailstash/ultra 3.0.0-dev

package/lib/queryProviders/osm.js

@@ -0,0 +1,199 @@
+import osmtogeojson from "osmtogeojson";
+
+export const flattenProperties = (geoJSON) => {
+  geoJSON.features = geoJSON.features.map((x) => {
+    const properties = x.properties;
+    delete x.properties;
+    return {
+      properties: {
+        "@id": properties.id,
+        "@type": properties.type,
+        "@meta":
+          Object.keys(properties.meta).length > 0 ? properties.meta : undefined,
+        ...properties.tags,
+      },
+      ...x,
+    };
+  });
+  return geoJSON;
+};
+
+export const popupTemplate = `
+  <h2>
+    {{ type }}
+    <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>
+  {%- 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://openstreetmap.org/changeset/{{ tag[1] }}" target="_blank">{{ tag[1] }}</a></code>
+      {%- elsif tag[0] == "user" %}
+        <code>{{ tag[0] }} = <a href="https://openstreetmap.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 %}
+`;
+export const popupContextBuilder = ({ properties, geometry }) => {
+  const templateContext = {
+    id: properties["@id"],
+    type: properties["@type"],
+    meta: JSON.parse(properties["@meta"] || null),
+    tags: { ...properties },
+  };
+  delete templateContext.tags["@type"];
+  delete templateContext.tags["@id"];
+  delete templateContext.tags["@meta"];
+  if (properties["@type"] === "node") {
+    templateContext.coordinates = geometry.coordinates;
+  }
+  return templateContext;
+};
+export const layers = (source) => [
+  {
+    id: `${source}-polygons`,
+    type: "fill",
+    source,
+    filter: ["all", ["==", ["geometry-type"], "Polygon"]],
+    paint: {
+      "fill-color": "rgba(255, 204, 0, .5)",
+    },
+  },
+  {
+    id: `${source}-polygons-stroke`,
+    type: "line",
+    source,
+    filter: ["all", ["==", ["geometry-type"], "Polygon"]],
+    layout: { "line-join": "round", "line-cap": "round" },
+    paint: { "line-width": 2, "line-color": "rgba(0, 51, 255, 0.6)" },
+  },
+  {
+    id: `${source}-lines`,
+    type: "line",
+    source,
+    filter: ["all", ["==", ["geometry-type"], "LineString"]],
+    paint: {
+      "line-width": 5,
+      "line-color": "rgba(0, 51, 255, 0.6)",
+    },
+    layout: { "line-join": "round", "line-cap": "round" },
+  },
+  {
+    id: `${source}-points`,
+    type: "circle",
+    source,
+    filter: ["all", ["==", ["geometry-type"], "Point"]],
+    paint: {
+      "circle-stroke-width": 2,
+      "circle-stroke-color": "rgba(0, 51, 255, 0.6)",
+      "circle-color": "rgba(255, 204, 0, 0.6)",
+    },
+  },
+];
+
+async function osmxmlSource(query, controller) {
+  let doc = new window.DOMParser().parseFromString(query, "text/xml");
+  if (doc.querySelector("parsererror")) {
+    const resp = await fetch(query, { signal: controller.signal });
+    doc = new window.DOMParser().parseFromString(await resp.text(), "text/xml");
+  }
+  const data = flattenProperties(
+    osmtogeojson(doc, { verbose: true, flatProperties: false }),
+  );
+  return { type: "geojson", data, generateId: true };
+}
+
+async function osmjsonSource(query, controller) {
+  let json;
+  try {
+    json = JSON.parse(query);
+  } catch {
+    const resp = await fetch(query, { signal: controller.signal });
+    json = await resp.json();
+  }
+  const data = flattenProperties(
+    osmtogeojson(json, { verbose: true, flatProperties: false }),
+  );
+  return {
+    type: "geojson",
+    data,
+    generateId: true,
+  };
+}
+
+// OSM XML & JSON are detected in 2 ways:
+// URLs - they look like /api/0.6 URLs with node, way/full, or relation/full
+// Local XML document with a top-level `osm` node
+// Local JSON document with a top-level `version` key with a value of `0.6`
+const osmApiRegex =
+  /^\/api\/0.6\/(node\/(\d+)|way\/(\d+)\/full|relation\/(\d+)\/full)(\.json)?/;
+const detectXML = (query) => {
+  const doc = new window.DOMParser().parseFromString(query, "text/xml");
+  if (
+    !doc.querySelector("parsererror") &&
+    doc.childNodes[0].nodeName === "osm"
+  ) {
+    return query;
+  }
+  try {
+    const url = new URL(query);
+    const match = url.pathname.match(osmApiRegex);
+    if (match && !match.slice(-1)[0]) {
+      return query;
+    }
+  } catch {}
+};
+const detectJSON = (query) => {
+  try {
+    const json = JSON.parse(query);
+    if (json.version === "0.6") {
+      return query;
+    }
+  } catch {}
+  try {
+    const url = new URL(query);
+    const match = url.pathname.match(osmApiRegex);
+    if (match && match.slice(-1)[0]) {
+      return query;
+    }
+  } catch {}
+};
+
+export const osmxml = {
+  source: osmxmlSource,
+  fitBounds: true,
+  layers,
+  popupTemplate,
+  popupContextBuilder,
+  detect: detectXML,
+};
+export const osmjson = {
+  source: osmjsonSource,
+  fitBounds: true,
+  layers,
+  popupTemplate,
+  popupContextBuilder,
+  detect: detectJSON,
+};

package/lib/queryProviders/overpass.js

@@ -0,0 +1,162 @@
+import osmtogeojson from "osmtogeojson";
+import { setQueryBounds } from "../bounds.js";
+
+import {
+  flattenProperties,
+  layers,
+  popupTemplate,
+  popupContextBuilder,
+} from "./osm.js";
+
+// Overpass queries are detected from common strings found in queries written in OverpassQL
+const overpassQLRegexes = [
+  /\[bbox:{{bbox}}\]/,
+  /\({{bbox}}\)/,
+  /\[out:json\]/,
+  /\[out:xml\]/,
+  /node\[[^]\]/,
+  /way\[[^]\]/,
+  /relation\[[^]\]/,
+  /nwr\[[^]\]/,
+  /nw\[[^]\]/,
+  /nr\[[^]\]/,
+  /wr\[[^]\]/,
+  /area\[[^]\]/,
+  /node\([^)]\)/,
+  /way\([^)]\)/,
+  /relation\([^)]\)/,
+  /nwr\([^)]\)/,
+  /nw\([^)]\)/,
+  /nr\([^)]\)/,
+  /wr\([^)]\)/,
+  /area\([^)]\)/,
+  /out( geom| center| skel)?;/,
+];
+function detect(query) {
+  for (const re of overpassQLRegexes) {
+    if (query.match(re)) {
+      return query;
+    }
+  }
+}
+
+const overpass = {
+  source: async function (query, controller, { server }) {
+    if (!server) {
+      server = "https://overpass-api.de/api";
+    }
+    return {
+      type: "geojson",
+      data: await callInterpreter(query, controller, server),
+      attribution:
+        '\u003Ca href="https://www.openstreetmap.org/copyright" target="_blank"\u003E© OpenStreetMap contributors\u003C/a\u003E',
+      generateId: true,
+    };
+  },
+  layers,
+  popupTemplate,
+  popupContextBuilder,
+  detect,
+};
+export default overpass;
+
+export async function callInterpreter(
+  query,
+  controller,
+  apiRoot = "https://overpass-api.de/api",
+) {
+  const resp = await fetch(apiRoot + "/interpreter", {
+    body: query,
+    method: "POST",
+    mode: "cors",
+    signal: controller.signal,
+  });
+  if (
+    resp.status == 200 &&
+    !resp.headers.get("content-type").startsWith("text/html")
+  ) {
+    let geoJSON;
+    if (resp.headers.get("content-type") == "application/osm3s+xml") {
+      geoJSON = osmtogeojson(
+        new window.DOMParser().parseFromString(await resp.text(), "text/xml"),
+        { flatProperties: false },
+      );
+    } else {
+      geoJSON = osmtogeojson(await resp.json(), { flatProperties: false });
+    }
+
+    return flattenProperties(geoJSON);
+  } else {
+    const dom = new window.DOMParser().parseFromString(
+      await resp.text(),
+      "text/xml",
+    );
+    alert(
+      Array.from(dom.body.querySelectorAll("p"))
+        .slice(1)
+        .map((p) => p.textContent)
+        .join("\n"),
+    );
+    return { type: "FeatureCollection", features: [] };
+  }
+}
+
+const osmUrlRe = /^https:\/\/www.openstreetmap.org\/(node|way|relation)\/(\d+)/;
+export const osmWebsite = {
+  ...overpass,
+  source: async function (query, controller, { server, bounds }) {
+    const urlMatch = query.match(osmUrlRe);
+    if (urlMatch) {
+      const [type, id] = urlMatch.slice(1);
+      return overpass.source(`${type}(${id});out geom;`, controller, {
+        server,
+        bounds,
+      });
+    } else {
+      throw new Error(`Don't know how to load ${query}`);
+    }
+  },
+  detect: function (query) {
+    return !!query.match(osmUrlRe);
+  },
+  fitBounds: true,
+};
+
+export const osmWiki = {
+  ...overpass,
+  source: async function (query, controller, { server, bounds }) {
+    const url = new URL(query);
+    const page = decodeURIComponent(url.pathname.slice(6));
+    let overpassQuery;
+    if (page.split(":")[0] === "Tag") {
+      const [key, value] = page.split(":")[1].split("=");
+      overpassQuery = setQueryBounds(
+        `[bbox:{{bbox}}];
+nwr["${key}"="${value}"];
+out geom;`,
+        bounds,
+      );
+    } else if (page.split(":")[0] === "Key") {
+      overpassQuery = setQueryBounds(
+        `[bbox:{{bbox}}];
+nwr["${page.split(":")[1]}"];
+out geom;`,
+        bounds,
+      );
+    }
+
+    if (!overpassQuery) {
+      throw new Error(`Don't know how to load ${query}`);
+    }
+
+    return overpass.source(query, controller, { server, bounds });
+  },
+  detect: function (query, bounds) {
+    if (!query.startsWith("https://wiki.openstreetmap.org/wiki/")) {
+      return;
+    }
+    const url = new URL(query);
+    const page = decodeURIComponent(url.pathname.slice(6));
+    return page.split(":")[0] === "Tag" || page.split(":")[0] === "Key";
+  },
+};

package/lib/queryProviders/raster.js

@@ -0,0 +1,23 @@
+const layers = (source) => [
+  {
+    id: `${source}-raster`,
+    type: "raster",
+    source,
+  },
+];
+export default {
+  source: (query) => {
+    const source = {
+      type: "raster",
+      tileSize: 256,
+      layers,
+    };
+    if (query.match(/{(x|y|z|bbox-epsg-3857)}/)) {
+      source.tiles = query.split("\n").filter((x) => !!x);
+    } else {
+      source.url = query.trim();
+    }
+    return source;
+  },
+  layers,
+};

package/lib/queryProviders/tcx.js

@@ -0,0 +1,105 @@
+import { tcx } from "@tmcw/togeojson";
+
+const layers = (source) => [
+  {
+    id: "ultra-tcx-line-casing",
+    type: "line",
+    source: "ultra",
+    layout: {
+      "line-cap": "round",
+      "line-join": "round",
+    },
+    paint: {
+      "line-color": "rgb(164, 112, 179)",
+      "line-opacity": 0.8,
+      "line-width": 2,
+      "line-gap-width": 5,
+    },
+  },
+  {
+    id: "ultra-tcx-line",
+    type: "line",
+    source: "ultra",
+    layout: {
+      "line-cap": "round",
+      "line-join": "round",
+    },
+    paint: {
+      "line-color": "rgb(226, 126, 255)",
+      "line-opacity": 0.5,
+      "line-width": 5,
+    },
+  },
+  {
+    id: `${source}-tcx-dir`,
+    type: "symbol",
+    source,
+    filter: ["==", ["geometry-type"], "LineString"],
+    layout: {
+      "symbol-placement": "line",
+      "symbol-spacing": 50,
+      "icon-image": "maki:triangle",
+      "icon-rotate": 90,
+      "icon-size": 0.3,
+    },
+    paint: {
+      "icon-color": "rgb(164, 112, 179)",
+      "icon-halo-color": "rgb(226, 126, 255)",
+      "icon-halo-width": 1,
+    },
+  },
+  /*
+  {
+    id: `${source}-tcx-poi`,
+    type: "symbol",
+    source,
+    filter: ["==", ["geometry-type"], "Point"],
+    layout: {
+      "icon-overlap": "always",
+      "icon-size": 0.5,
+      "icon-anchor": "bottom",
+      "icon-image": ["concat", "https://corsproxy.io/?", ["get", "icon"]],
+    },
+  },
+  */
+];
+
+const detect = async (query) => {
+  try {
+    if (query.startsWith("https://")) {
+      const resp = await fetch(query, { cors: true });
+      if (resp.ok) {
+        query = await resp.text();
+      }
+    }
+  } catch {}
+  const doc = new window.DOMParser().parseFromString(query, "text/xml");
+  if (
+    !doc.querySelector("parsererror") &&
+    doc.childNodes[0].nodeName === "TrainingCenterDatabase"
+  ) {
+    return query;
+  }
+};
+
+export default {
+  source: async function (query, controller) {
+    let doc = new window.DOMParser().parseFromString(query, "text/xml");
+    if (doc.querySelector("parsererror")) {
+      const resp = await fetch(query.trim(), { signal: controller.signal });
+      doc = new window.DOMParser().parseFromString(
+        await resp.text(),
+        "text/xml",
+      );
+    }
+    const data = tcx(doc);
+    return { type: "geojson", data, generateId: true };
+  },
+  layers,
+  popupTemplate: `
+<h2>{{properties.name}}</h2>
+<p>{{properties.description}}</p>
+  `,
+  detect,
+  fitBounds: true,
+};

package/lib/queryProviders/vector.js

@@ -0,0 +1,13 @@
+export default {
+  source: (query) => {
+    const source = {
+      type: "vector",
+    };
+    if (query.match(/{[xyz]}/)) {
+      source.tiles = query.split("\n").filter((x) => !!x);
+    } else {
+      source.url = query.trim();
+    }
+    return source;
+  },
+};

package/lib/settings.js

@@ -0,0 +1,72 @@
+import YAML from "yaml";
+
+const extractFrontMatter = (content) => {
+  if (!content) {
+    return { query: "", frontmatter: "" };
+  }
+  const result = /(^---\n((?<frontmatter>.*)\n)?---(\n|$))?(?<query>.*)?/s.exec(
+    content,
+  );
+  if (result) {
+    return {
+      query: result.groups.query?.trim() || "",
+      frontmatter: result.groups.frontmatter || "",
+    };
+  }
+  return { query: content?.trim() };
+};
+
+export const parseSettings = (query) => {
+  let frontmatter;
+  ({ frontmatter, query } = extractFrontMatter(query));
+  let settings = {};
+  if (frontmatter) {
+    settings = YAML.parse(frontmatter, { merge: true }) || {};
+    const doc = YAML.parseDocument(frontmatter, undefined, {
+      merge: true,
+    });
+    if (doc.warnings.length > 0) {
+      alert(
+        "Warnings when parsing frontmatter:\n\n" +
+          doc.warnings.map(({ message }) => message).join("\n"),
+      );
+    }
+  }
+  if (query.trim()) {
+    settings.query = query.trim();
+  }
+  settings.mapStyle = settings.style;
+  delete settings.style;
+  return settings;
+};
+
+export const setSetting = (query, { style, server }) => {
+  let frontmatter;
+  ({ frontmatter, query } = extractFrontMatter(query));
+  let settingsStr = "";
+  if (style) {
+    settingsStr += `style: ${style}\n`;
+  }
+  if (server) {
+    settingsStr += `server: ${server}\n`;
+  }
+  if (frontmatter && frontmatter.trim()) {
+    const settings = YAML.parseDocument(frontmatter, undefined, {
+      merge: true,
+    });
+    if (style) {
+      const queryStyle = settings.get("style");
+      if (!queryStyle || typeof queryStyle === "string") {
+        settings.set("style", style);
+      } else {
+        queryStyle.set("extends", style);
+      }
+    }
+    if (server) {
+      settings.set("server", server);
+    }
+    settingsStr = YAML.stringify(settings);
+  }
+
+  return `---\n${settingsStr}---\n${query}`;
+};

package/lib/sprites.js

@@ -0,0 +1,18 @@
+const fetchedImages = {};
+export const handleStyleImageMissing = async (ev) => {
+  const builtin = ev.id.match(/\/icons\/(maki|temaki)\/(.*)\.png/);
+  if (ev.id.startsWith("https://") || ev.id.startsWith("data:")) {
+    if (!fetchedImages[ev.id]) {
+      fetchedImages[ev.id] = true;
+      const image = await ev.target.loadImage(ev.id);
+      ev.target.addImage(ev.id, image.data);
+    }
+  }
+  if (builtin) {
+    ev.target.addImage(
+      ev.id,
+      ev.target.getImage(builtin.slice(1, 3).join(":")).data,
+      { sdf: true },
+    );
+  }
+};