@trailstash/ultra 3.9.2 → 4.1.0

package/Examples/map=yes.ultra

@@ -0,0 +1,26 @@
+---
+title: map=yes
+description: A recreation of [Stamen Design's map=yes project](http://mapequalsyes.stamen.com/)
+options:
+  zoom: 12.79
+  center: [-77.4511, 37.5515]
+style:
+  version: 8
+  layers:
+    - type: background
+    - type: fill
+      filter: [==, [get, leisure], park]
+      fill-color: rgb(0, 102, 153)
+    - type: fill
+      filter: [has, building]
+      fill-color: white
+    - type: line
+      filter: [==, [geometry-type], LineString]
+      line-color: white
+---
+(
+  nwr[building][building!=no]({{bbox}});
+  nwr[leisure=park]({{bbox}});
+  way[highway=motorway_link]({{bbox}});
+);
+out geom;

package/Examples/replace-a-layer-with-overpass-data.ultra

@@ -0,0 +1,18 @@
+---
+title: Replace a basemap layer with query data
+description: This requires knowing the layer IDs in the style you want to replace. Use [Maputnik](https://maplibre.org/maputnik) to inspect styles.
+options:
+  zoom: 14
+  center: [-77.46829, 37.53255]
+style:
+  extends: https://styles.trailsta.sh/openmaptiles-osm.json
+  layers:
+    - id: water
+      visiblity: none
+    - type: fill
+      beforeLayerId: water
+      fill-color: lightblue
+---
+[bbox:{{bbox}}];
+nwr[natural=water];
+out geom;

package/MapLibre-Examples/globe-vector-tiles.ultra

@@ -0,0 +1,11 @@
+---
+title: Display a globe with a vector map
+description: Display a globe with a vector map.
+options:
+  zoom: 0
+  center: [137.9150899566626, 36.25956997955441]
+style:
+  extends: https://tiles.openfreemap.org/styles/liberty
+  projection:
+    type: globe
+---

package/build-examples-docs.js

@@ -98,7 +98,7 @@ function generateExamplesFolder(examplesFolder) {
 }
 
 // !!Main flow start here!!
-generateExamplesFolder(process.argv["2"] || "examples");
+generateExamplesFolder(process.argv["2"] || "Examples");
 console.log(
   "Docs generation completed, to see it in action run\n npm run start:docs",
 );

package/build-examples-images.js

@@ -35,7 +35,7 @@ async function createImage(exampleName) {
   // Wait for map to load, then wait two more seconds for images, etc. to load.
   try {
     //await page.waitForFunction('map.loaded()');
-    const waitTime = 5000;
+    const waitTime = 10000;
     console.log(`waiting for ${waitTime} ms`);
     await new Promise((resolve) => setTimeout(resolve, waitTime));
   } catch (err) {

package/cli/build.js

@@ -46,6 +46,7 @@ export const buildOptions = (config, watch = false) => ({
   },
   alias: {
     "ultra-config": config,
+    "node:events": "node-events", // esri-dump support
   },
   plugins: [
     copy({

package/components/style-picker.js

@@ -5,10 +5,25 @@ import { normalizeCSS } from "../lib/normalize.js";
 const style = `margin: 10px 0; display: block; width: 100%; text-align: left;`;
 
 const styles = [
+  [
+    "OpenFreeMap Liberty",
+    "https://tiles.openfreemap.org/styles/liberty",
+    `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
+  ],
+  [
+    "OpenFreeMap Bright",
+    "https://tiles.openfreemap.org/styles/bright",
+    `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
+  ],
+  [
+    "OpenFreeMap Positron",
+    "https://tiles.openfreemap.org/styles/positron",
+    `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
+  ],
   [
     "Natural Earth Vector",
     "https://trailstash.github.io/naturalearthtiles/maps/natural_earth.vector.json",
-    `<a href="https://github.com/trailstash/naturalearthtiles">TrailStash</a>`,
+    `<a href="https://github.com/trailstash/naturalearthtiles">Natural Earth</a>`,
   ],
   [
     "MapLibre Demo Tiles",

package/components/ultra-map.js

@@ -43,8 +43,7 @@ export class UltraMap extends HTMLElement {
     type: "auto",
     query: "",
     server: null,
-    mapStyle:
-      "https://trailstash.github.io/naturalearthtiles/maps/natural_earth.vector.json",
+    mapStyle: "https://tiles.openfreemap.org/styles/liberty",
     popupTemplate: null,
     popupOnHover: false,
     querySources: ["ultra"],

package/docs/resources.md

@@ -78,6 +78,12 @@ appropriate headers yourself.
 The [Overture foundation](https://overturemaps.org/) makes map data derived from various sources
 available. It needs to be processed and hosted before use with Ultra.
 
+### Esri
+
+mappingsupport.com maintains an excellent list of ArcGIS REST servers:
+
+https://mappingsupport.com/p/surf_gis/list-federal-state-county-city-GIS-servers.pdf
+
 ## Base Style resources
 
 ### TrailStash Style Server

package/index.js

@@ -22,6 +22,9 @@ import { FontAwesomeIcon } from "./components/fontawesome-icon.js";
 import { ButtonModal } from "./components/button-modal.js";
 import { MapPopup } from "./components/map-popup.js";
 
+// esri dump expects to be running in a node env, so add global process.env
+window.process = { env: {} };
+
 // Allow pages in new windows securely
 DOMPurify.addHook("afterSanitizeAttributes", function (node) {
   // set all elements owning target to target=_blank

package/lib/queryProviders/esri.js

@@ -0,0 +1,88 @@
+import EsriDump from "esri-dump";
+
+const layers = (source) => [
+  {
+    id: `${source}-geojson-fill`,
+    type: "fill",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    paint: {
+      "fill-color": "#555",
+      "fill-opacity": 0.3,
+    },
+  },
+  {
+    id: `${source}-geojson-fill-outline`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "Polygon"],
+    layout: { "line-cap": "round" },
+    paint: {
+      "line-color": "#555",
+      "line-width": 2,
+      "line-opacity": 1,
+    },
+  },
+  {
+    id: `${source}-geojson-line-2`,
+    type: "line",
+    source,
+    filter: ["==", ["geometry-type"], "LineString"],
+    layout: { "line-cap": "round" },
+    paint: {
+      "line-color": "#555",
+      "line-width": 2,
+      "line-opacity": 1,
+    },
+  },
+  {
+    id: `${source}-geojson-point`,
+    type: "circle",
+    source,
+    filter: ["==", ["geometry-type"], "Point"],
+    paint: {
+      "circle-stroke-width": 2,
+      "circle-stroke-color": "#555",
+      "circle-color": "rgba(85, 85, 85, 0.3)",
+    },
+  },
+];
+
+async function detect(query) {
+  return !!query.match(/\/(Map|Feature)Server\/\d+$/);
+}
+
+export default {
+  source: function geojson(query, controller) {
+    return new Promise((resolve, reject) => {
+      const esri = new EsriDump(query);
+
+      const data = {
+        type: "FeatureCollection",
+        features: [],
+      };
+
+      esri.fetch();
+
+      esri.on("type", (type) => {
+        //Emitted before any data events
+        //emits one of
+        // - `MapServer'
+        // - `FeatureServer'
+      });
+
+      esri.on("feature", (feature) => {
+        data.features.push(feature);
+      });
+
+      esri.on("done", () => {
+        resolve({ type: "geojson", data, generateId: true });
+      });
+
+      esri.on("error", reject);
+    });
+  },
+  fitBounds: true,
+  layers,
+  detect,
+};

package/lib/queryProviders/index.js

@@ -10,6 +10,7 @@ import kml from "./kml.js";
 import gpx from "./gpx.js";
 import tcx from "./tcx.js";
 import raw from "./raw.js";
+import esri from "./esri.js";
 
 export const all = {
   overpass,
@@ -21,6 +22,7 @@ export const all = {
   tcx,
   osmxml,
   osmjson,
+  esri,
   raster,
   vector,
   raw,

package/lib/style.js

@@ -169,7 +169,7 @@ export function ensureSourceAndLayers(style, source) {
       url: new URL("sprites/temaki", window.location).toString(),
     });
   }
-  if (source && !style.sources.ultra) {
+  if (source) {
     let foundAttribution = false;
     for (const sourceName in style.sources) {
       if (
@@ -182,7 +182,7 @@ export function ensureSourceAndLayers(style, source) {
       }
     }
     style.sources.ultra = source.source;
-    if (foundAttribution) {
+    if (foundAttribution && style.sources.ultra.attribution) {
       style.sources.ultra.attribution = "";
     }
   }

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.9.2",
+  "version": "4.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": {
@@ -64,12 +64,14 @@
     "dompurify": "^3.1.7",
     "esbuild": "^0.24.0",
     "esbuild-plugin-copy": "^2.1.1",
+    "esri-dump": "^5.4.0",
     "fast-deep-equal": "^3.1.3",
     "liquidjs": "^10.17.0",
     "lodash.pick": "^4.4.0",
     "lz-string": "^1.5.0",
-    "maplibre-gl": "^4.7.1",
+    "maplibre-gl": "^5.0.1",
     "marked": "^14.1.2",
+    "node-events": "^0.0.2",
     "normalize.css": "^8.0.1",
     "osmtogeojson": "^3.0.0-beta.5",
     "pmtiles": "^3.2.0",
@@ -77,7 +79,7 @@
     "yaml": "^2.5.1"
   },
   "peerDependencies": {
-    "@maplibre/maplibre-gl-style-spec": "20.x"
+    "@maplibre/maplibre-gl-style-spec": "*"
   },
   "bin": {
     "ultra": "./bin/run.js"