@trailstash/ultra 3.0.0-dev

package/lib/queryParams.js

@@ -0,0 +1,142 @@
+import {
+  compressToEncodedURIComponent,
+  decompressFromEncodedURIComponent,
+} from "lz-string";
+import { setSetting } from "./settings.js";
+
+export const getModeFromQueryParams = () => {
+  const params = new URLSearchParams(window.location.hash.slice(1));
+  let mode;
+  if (params.has("map")) {
+    mode = "map";
+  }
+  return mode;
+};
+
+export const getConfigFromQueryParams = async () => {
+  const params = new URLSearchParams(window.location.hash.slice(1));
+  if (params.has("config")) {
+    const config = params.get("config");
+    if (config.endsWith(".js")) {
+      return import(new URL(config, window.location));
+    } else {
+      return (await fetch(new URL(config, window.location))).json();
+    }
+  }
+};
+
+const fetchGist = async (query) => {
+  let [gistID, filename] = query.slice("gist:".length).split("/", 2);
+  let resp = await fetch(`https://api.github.com/gists/${gistID}`);
+  if (!resp.ok) {
+    throw new Error(
+      `Failed to fetch ${resp.url}: ${resp.status} ${await resp.text()}`,
+    );
+  }
+  const gist = await resp.json();
+  if (!filename) {
+    for (filename in gist.files) break;
+  }
+  if (!gist.files[filename].truncated) {
+    return gist.files[filename].content;
+  }
+  resp = await fetch(gist.files[filename].raw_url);
+  return resp.text();
+};
+const fetchURL = async (url) => {
+  const resp = await fetch(url);
+  if (!resp.ok) {
+    throw new Error(
+      `Failed to fetch ${resp.url}: ${resp.status} ${await resp.text()}`,
+    );
+  }
+  return await resp.text();
+};
+
+export const getQueryFromQueryParams = () => {
+  const params = new URLSearchParams(window.location.hash.slice(1));
+
+  let query;
+
+  // query
+  if (params.has("q")) {
+    query = decompressFromEncodedURIComponent(params.get("q"));
+  } else if (params.has("query")) {
+    query = params.get("query");
+    if (query.startsWith("gist:")) {
+      query = fetchGist(query);
+    } else if (query.startsWith("url:")) {
+      const url = query.slice("url:".length);
+      query = fetchURL(url);
+    }
+  }
+
+  // override style & server if provided
+  // fetched configs can't be overwritten via style&server params
+  if (!query?.then) {
+    if (params.has("style")) {
+      query = setSetting(query || "", {
+        style: params.get("style"),
+      });
+    }
+    if (params.has("server")) {
+      query = setSetting(query || "", {
+        server: params.get("server"),
+      });
+    }
+  }
+
+  return query;
+};
+
+export const getOptionsFromQueryParams = () => {
+  const params = new URLSearchParams(window.location.hash.slice(1));
+
+  const options = {};
+
+  // mapview params
+  if (params.has("m")) {
+    const m = params.get("m");
+    if (m.includes(",")) {
+      options.bounds = m.split(",").map(parseFloat);
+    } else {
+      const [zoom, lat, lng] = m.split("/").map(parseFloat);
+      options.zoom = zoom;
+      options.center = [lng, lat];
+    }
+  }
+
+  return options;
+};
+
+export const getAutoRunFromQueryParams = () => {
+  return new URLSearchParams(window.location.hash.slice(1)).has("run");
+};
+
+export const toQueryParams = ({
+  query,
+  center,
+  zoom,
+  autoRun = false,
+  mode,
+}) => {
+  const root = window.location.origin + window.location.pathname;
+  const q = compressToEncodedURIComponent(query);
+  let hash = "#";
+  if (autoRun) {
+    hash += "run&";
+  }
+  if (mode === "map") {
+    hash += "map&";
+  }
+  if (center && zoom) {
+    const zyx = [
+      zoom.toFixed(2),
+      center[1].toFixed(4),
+      center[0].toFixed(4),
+    ].join("/");
+    hash += `m=${zyx}&`;
+  }
+  hash += `q=${q}`;
+  return `${root}${hash}`;
+};

package/lib/queryProviders/auto.js

@@ -0,0 +1,47 @@
+export default class AutoProvider {
+  #fitBounds;
+  #layers;
+  #popupContextBuilder;
+  #popupTemplate;
+  #providers;
+
+  constructor(providers = {}) {
+    //super();
+    this.#providers = providers;
+  }
+
+  async source(query, controller, { server, bounds }) {
+    console.log(Array.from(Object.keys(this.#providers)));
+    for (const [type, provider] of Object.entries(this.#providers)) {
+      if (!provider.detect) {
+        continue;
+      }
+      console.log("trying", type);
+      if (await Promise.resolve(provider.detect(query, bounds))) {
+        console.log("detected", type);
+        this.#fitBounds = provider.fitBounds;
+        this.#layers = provider.layers;
+        this.#popupContextBuilder = provider.popupContextBuilder;
+        this.#popupTemplate = provider.popupTemplate;
+        return provider.source(query, controller, { server, bounds });
+      }
+    }
+    throw new Error("Could not determine query type!");
+  }
+
+  get fitBounds() {
+    return this.#fitBounds;
+  }
+
+  get layers() {
+    return this.#layers;
+  }
+
+  get popupContextBuilder() {
+    return this.#popupContextBuilder;
+  }
+
+  get popupTemplate() {
+    return this.#popupTemplate;
+  }
+}

package/lib/queryProviders/geojson.js

@@ -0,0 +1,134 @@
+const layers = (source) => [
+  {
+    id: `${source}-geojson-fill`,
+    type: "fill",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    paint: {
+      "fill-color": ["coalesce", ["get", "fill"], "#555"],
+      "fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.3],
+    },
+  },
+  {
+    id: `${source}-geojson-fill-outline`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    layout: { "line-cap": "round" },
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], "#555"],
+      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1],
+    },
+  },
+  {
+    id: `${source}-geojson-line-2`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "LineString"],
+    layout: { "line-cap": "round" },
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], "#555"],
+      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1],
+    },
+  },
+  {
+    id: `${source}-geojson-point`,
+    type: "symbol",
+    source,
+    filter: ["==", ["geometry-type"], "Point"],
+    layout: {
+      "icon-overlap": "always",
+      "icon-size": [
+        "case",
+        ["==", ["get", "marker-size"], "large"],
+        1.5,
+        ["==", ["get", "marker-size"], "medium"],
+        1,
+        ["==", ["get", "marker-size"], "small"],
+        0.75,
+        1,
+      ],
+      "icon-anchor": [
+        "case",
+        ["!", ["has", "marker-symbol"]],
+        "bottom",
+        ["==", ["get", "marker-symbol"], "marker"],
+        "bottom",
+        ["==", ["get", "marker-symbol"], "marker-stroked"],
+        "bottom",
+        "center",
+      ],
+      "icon-image": [
+        "coalesce",
+        ["image", ["concat", "maki:", ["get", "marker-symbol"]]],
+        ["image", "maki:marker"],
+      ],
+    },
+    paint: {
+      "icon-color": ["coalesce", ["get", "marker-color"], "#555"],
+      "icon-halo-color": ["coalesce", ["get", "stroke-color"], "#fff"],
+      "icon-halo-width": [
+        "coalesce",
+        ["get", "stroke-width"],
+        [
+          "case",
+          ["==", ["get", "marker-size"], "large"],
+          3,
+          ["==", ["get", "marker-size"], "medium"],
+          1.5,
+          ["==", ["get", "marker-size"], "small"],
+          1,
+          1.5,
+        ],
+      ],
+    },
+  },
+];
+
+export default {
+  source: async function geojson(query, controller) {
+    let data;
+    try {
+      data = JSON.parse(query);
+    } catch {
+      const resp = await fetch(query, { signal: controller.signal });
+      data = await resp.json();
+    }
+    return { type: "geojson", data, generateId: true };
+  },
+  layers,
+  fitBounds: true,
+  detect,
+};
+
+// Local and Remote GeoJSON are detected by checking for valid GeoJSON types in a JSON document
+const geoJsonTypes = [
+  "Feature",
+  "FeatureCollection",
+  "Geometry",
+  "GeometryCollection",
+  "Point",
+  "MultiPoint",
+  "LineString",
+  "MultiLineString",
+  "Polygon",
+  "MultiPolygon",
+];
+async function detect(query) {
+  try {
+    if (query.startsWith("https://")) {
+      const resp = await fetch(query, { cors: true });
+      if (resp.ok) {
+        query = await resp.text();
+      }
+    }
+  } catch {}
+  try {
+    const json = JSON.parse(query);
+    if (geoJsonTypes.includes(json.type)) {
+      return query;
+    }
+  } catch {}
+}

package/lib/queryProviders/gpx.js

@@ -0,0 +1,101 @@
+import { gpx } from "@tmcw/togeojson";
+
+const layers = (source) => [
+  {
+    id: "ultra-gpx-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-gpx-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}-gpx-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}-gpx-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 === "gpx"
+  ) {
+    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 = gpx(doc);
+    return { type: "geojson", data, generateId: true };
+  },
+  layers,
+  detect,
+  fitBounds: true,
+};

package/lib/queryProviders/index.js

@@ -0,0 +1,22 @@
+import overpass, { osmWebsite, osmWiki } from "./overpass.js";
+import geojson from "./geojson.js";
+import raster from "./raster.js";
+import vector from "./vector.js";
+import { osmxml, osmjson } from "./osm.js";
+import kml from "./kml.js";
+import gpx from "./gpx.js";
+import tcx from "./tcx.js";
+
+export default {
+  overpass,
+  osmWebsite,
+  osmWiki,
+  geojson,
+  osmxml,
+  osmjson,
+  kml,
+  gpx,
+  tcx,
+  raster,
+  vector,
+};

package/lib/queryProviders/kml.js

@@ -0,0 +1,132 @@
+import { kml } from "@tmcw/togeojson";
+
+const layers = (source) => [
+  {
+    id: `${source}-geojson-fill`,
+    type: "fill",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    paint: {
+      "fill-color": ["coalesce", ["get", "fill"], "#555"],
+      "fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.3],
+    },
+  },
+  {
+    id: `${source}-geojson-fill-outline`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], "#555"],
+      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1],
+    },
+    layout: {
+      "line-join": "round",
+      "line-cap": "round",
+    },
+  },
+  {
+    id: `${source}-geojson-line-2`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "LineString"],
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], "#555"],
+      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1],
+    },
+    layout: {
+      "line-join": "round",
+      "line-cap": "round",
+    },
+  },
+  {
+    id: `${source}-geojson-point`,
+    type: "symbol",
+    source,
+    filter: ["==", ["geometry-type"], "Point"],
+    layout: {
+      "icon-overlap": "always",
+      "icon-size": ["coalesce", ["get", "icon-scale"], 1],
+      "icon-anchor": "bottom",
+      "icon-image": "maki:marker",
+    },
+    paint: {
+      "icon-color": ["coalesce", ["get", "icon-color"], "#555"],
+      "icon-halo-color": ["coalesce", ["get", "stroke-color"], "#fff"],
+      "icon-halo-width": [
+        "coalesce",
+        ["get", "stroke-width"],
+        [
+          "case",
+          ["==", ["get", "marker-size"], "large"],
+          3,
+          ["==", ["get", "marker-size"], "medium"],
+          1.5,
+          ["==", ["get", "marker-size"], "small"],
+          1,
+          1.5,
+        ],
+      ],
+    },
+  },
+];
+
+const detect = async (query) => {
+  if (query.startsWith("https://www.google.com/maps/d/")) {
+    return true;
+  }
+  if (query.startsWith("https://")) {
+    try {
+      const resp = await fetch(query, { cors: true });
+      if (resp.ok) {
+        query = await resp.text();
+      } else {
+        return false;
+      }
+    } catch {
+      return false;
+    }
+  }
+  const doc = new window.DOMParser().parseFromString(query, "text/xml");
+  return (
+    !doc.querySelector("parsererror") && doc.childNodes[0].nodeName === "kml"
+  );
+};
+
+export default {
+  source: async function (query, controller) {
+    if (query.startsWith("https://www.google.com/maps/d/")) {
+      const url = new URL(query);
+      const mid = url.searchParams.get("mid");
+      if (mid) {
+        query = `https://www.google.com/maps/d/kml?mid=${mid}&forcekml=1`;
+      }
+    }
+    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 = kml(doc);
+    return { type: "geojson", data, generateId: true };
+  },
+  layers,
+  popupTemplate: `
+<h2>{{properties.name}}</h2>
+<p>{{properties.description}}</p>
+<details>
+  <summary>Properties</summary>
+  {%- for prop in properties %}
+    <code>{{ prop[0] }} = {{ prop[1] }}</code>
+    <br>
+  {%- endfor %}
+</details>
+  `,
+  detect,
+  fitBounds: true,
+};