@trailstash/ultra 6.0.0 → 6.1.0

package/.gitlab-ci.yml

@@ -1,13 +1,13 @@
 test:
   image: node:20
   script:
-    - npm ci
+    - npm i
     - npm test
 pages:
   image: node:20
   script:
     - apt update && apt install -y mkdocs-material jq moreutils
-    - npm ci
+    - npm i
     # Update version
     - jq ".version = \"$(git describe --tags --dirty | sed -e 's/^v//')\"" package.json | sponge package.json
     - mv pages-config.mjs config.mjs

package/cli/build.js

@@ -26,7 +26,7 @@ export const buildConfigFromQuery = async (config, query) => {
   };
   const newConfig = `export const defaultMode = "map";
 export const modes = {map: {settings: ${JSON.stringify(settings, null, 2)}}};`;
-  return `data:text/javascript;base64,${btoa(newConfig)}`;
+  return `data:text/javascript;base64,${Buffer.from(newConfig).toString("base64")}`;
 };
 
 export const ultraRoot = path.dirname(

package/components/help-modal.js

@@ -7,6 +7,7 @@ import { version } from "../package.json";
 import { version as maplibreVersion } from "maplibre-gl/package.json";
 import { version as osmtogeojsonVersion } from "osm2geojson-ultra/package.json";
 import { version as esridumpVersion } from "esri-dump/package.json";
+import { version as csv2geojsonVersion } from "csv2geojson/package.json";
 
 const help = `# Introduction
 
@@ -161,6 +162,17 @@ export class HelpModal extends HTMLElement {
               </li>`
                   : ""
               }
+
+              ${
+                this.queryProviders.dsv
+                  ? `<li>
+                CSV/TSV/DSV support powered by
+                <a target="_blank" href="https://github.com/mapbox/csv2geojson"
+                  >csv2geojson</a
+                > <code>${csv2geojsonVersion}</code>
+              </li>`
+                  : ""
+              }
             </ul>
           </div>
       `,

package/components/ultra-map.js

@@ -350,12 +350,12 @@ export class UltraMap extends HTMLElement {
         this.#cachedQuery = query;
         this.#cachedTransform = this.transform;
         this.#cachedType = this.type;
-        let source = await queryProvider
-          .source(query, controller, {
+        let source = await Promise.resolve(
+          queryProvider.source(query, controller, {
             server: this.server,
             bounds: this.refs.mapLibre.bounds,
-          })
-          .catch(alertOnError);
+          }),
+        ).catch(alertOnError);
         if (this.transform) {
           if (sandbox) {
             source.data = await Promise.race([

package/docs/yaml.md

@@ -74,6 +74,7 @@ Automatically detects and chooses the right query provider out of the following:
 - `osmWebsite`
 - `osmWiki`
 - `taginfo`
+- `dsv`
 
 See each provider for how it is auto-detected
 
@@ -249,6 +250,12 @@ Detected if
 
 - A JSON document or URL to a JSON document containing a `tilejson` key and a `format` key equal to `pbf`.
 
+### `dsv`
+
+`,`, `\t`, `;`, or `|` delimited values. Can only represent points. Header must include columns
+matching the the regexes `/(lat)(itude)?/` and `/l(on|ng)(gitude)?`. The delmiter is automatically
+detected.
+
 ### `postpass`
 
 An SQL query to be executed on a [Postpass](https://github.com/woodpeck/postpass) server. Server

package/index.js

@@ -56,10 +56,10 @@ customElements.define("fs-button", FSButton);
 customElements.define("fa-icon", FontAwesomeIcon);
 customElements.define("button-modal", ButtonModal);
 customElements.define("map-popup", MapPopup);
+customElements.define("html-control", HTMLControl);
 customElements.define("ultra-map", UltraMap);
 customElements.define("ultra-ide", UltraIDE);
 customElements.define("ultra-loader", UltraLoader);
-customElements.define("html-control", HTMLControl);
 
 // reload on hash changes
 addEventListener("hashchange", () => window.location.reload());

package/lib/queryProviders/dsv.js

@@ -0,0 +1,71 @@
+import { fetchIfHTTP } from "./util.js";
+import { csv2geojson } from "csv2geojson";
+
+const layers = (source) => [
+  {
+    id: `${source}-dsv-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 (query) {
+    query = await fetchIfHTTP(query);
+    const data = await new Promise((resolve, reject) =>
+      csv2geojson(query, { delimiter: "auto" }, (error, result) =>
+        error ? reject(error.message) : resolve(result),
+      ),
+    );
+    return { type: "geojson", data, generateId: true };
+  },
+  layers,
+  fitBounds: true,
+};

package/lib/queryProviders/geojson.js

@@ -24,7 +24,7 @@ const layers = (source) => [
     },
   },
   {
-    id: `${source}-geojson-line-2`,
+    id: `${source}-geojson-line`,
     type: "line",
     source,
     filter: ["==", ["geometry-type"], "LineString"],

package/lib/queryProviders/index.js

@@ -13,6 +13,7 @@ import tcx from "./tcx.js";
 import raw from "./raw.js";
 import esri from "./esri.js";
 import javascript from "./javascript.js";
+import dsv from "./dsv.js";
 
 export const all = {
   overpass,
@@ -35,6 +36,7 @@ export const all = {
   osmWiki,
   taginfo,
   javascript,
+  dsv,
 };
 
 export default { auto: new AutoProvider(all), ...all };

package/lib/queryProviders/kml.js

@@ -3,7 +3,7 @@ import { kml } from "@tmcw/togeojson";
 
 const layers = (source) => [
   {
-    id: `${source}-geojson-fill`,
+    id: `${source}-kml-fill`,
     type: "fill",
     source,
     filter: ["==", ["geometry-type"], "Polygon"],
@@ -13,7 +13,7 @@ const layers = (source) => [
     },
   },
   {
-    id: `${source}-geojson-fill-outline`,
+    id: `${source}-kml-fill-outline`,
     type: "line",
     source,
     filter: ["==", ["geometry-type"], "Polygon"],
@@ -28,7 +28,7 @@ const layers = (source) => [
     },
   },
   {
-    id: `${source}-geojson-line-2`,
+    id: `${source}-kml-line`,
     type: "line",
     source,
     filter: ["==", ["geometry-type"], "LineString"],
@@ -43,7 +43,7 @@ const layers = (source) => [
     },
   },
   {
-    id: `${source}-geojson-point`,
+    id: `${source}-kml-point`,
     type: "symbol",
     source,
     filter: ["==", ["geometry-type"], "Point"],

package/lib/queryProviders/osm.js

@@ -68,7 +68,7 @@ export const popupContextBuilder = ({ properties, geometry }) => {
 };
 export const layers = (source) => [
   {
-    id: `${source}-polygons`,
+    id: `${source}-osm-polygons`,
     type: "fill",
     source,
     filter: ["all", ["==", ["geometry-type"], "Polygon"]],
@@ -77,7 +77,7 @@ export const layers = (source) => [
     },
   },
   {
-    id: `${source}-polygons-stroke`,
+    id: `${source}-osm-polygons-stroke`,
     type: "line",
     source,
     filter: ["all", ["==", ["geometry-type"], "Polygon"]],
@@ -85,7 +85,7 @@ export const layers = (source) => [
     paint: { "line-width": 2, "line-color": "rgba(0, 51, 255, 0.6)" },
   },
   {
-    id: `${source}-lines`,
+    id: `${source}-osm-lines`,
     type: "line",
     source,
     filter: ["all", ["==", ["geometry-type"], "LineString"]],
@@ -96,7 +96,7 @@ export const layers = (source) => [
     layout: { "line-join": "round", "line-cap": "round" },
   },
   {
-    id: `${source}-points`,
+    id: `${source}-osm-points`,
     type: "circle",
     source,
     filter: ["all", ["==", ["geometry-type"], "Point"]],

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "6.0.0",
+  "version": "6.1.0",
   "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": {
@@ -62,6 +62,8 @@
     "@tmcw/togeojson": "^5.8.1",
     "@trailstash/maplibre-component": "^1.0.1",
     "@turf/bbox": "^7.1.0",
+    "buffer": "^6.0.3",
+    "csv2geojson": "^5.1.2",
     "deep-equal": "^2.2.3",
     "dompurify": "^3.1.7",
     "esbuild": "^0.24.0",