@trailstash/ultra 3.9.1 → 4.0.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/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/lib/queryMap.js

@@ -45,7 +45,7 @@ export const handleMouseClick = (
   for (const f of features) {
     distinctFeatures[f.id] = f;
   }
-  if (equal(currentFeatures, distinctFeatures) && currentPopup) {
+  if (equal(currentFeatures, distinctFeatures) && currentPopup && e.type !== "click") {
     currentPopup.setLngLat(e.lngLat);
     return;
   }

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.1",
+  "version": "4.0.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": {
@@ -68,7 +68,7 @@
     "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",
     "normalize.css": "^8.0.1",
     "osmtogeojson": "^3.0.0-beta.5",
@@ -77,7 +77,7 @@
     "yaml": "^2.5.1"
   },
   "peerDependencies": {
-    "@maplibre/maplibre-gl-style-spec": "20.x"
+    "@maplibre/maplibre-gl-style-spec": "*"
   },
   "bin": {
     "ultra": "./bin/run.js"