@trailstash/ultra 3.6.0 → 3.7.1

package/Examples/add-a-title.ultra

@@ -0,0 +1,16 @@
+---
+title: Add a title to a map
+description: Use Ultra's HTMLControl to add a title to the map
+controls:
+  - type: HTMLControl
+    options:
+      html: >
+        <h1><center>A Titled Map!</center></h1>
+      css: >
+        h1 {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+        }
+---

package/Examples/add-an-info-modal.ultra

@@ -0,0 +1,66 @@
+---
+title: Add a custom modal control to the map
+description: This adds an info button that opens a modal clicked using Ultra's HTMLControl
+controls:
+  - type: NavigationControl
+  - type: HTMLControl
+    options:
+      html: >
+        <div class="maplibregl-ctrl maplibregl-ctrl-group">
+          <label for="info-modal">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z"/></svg>
+          </label>
+        </div>
+          <input type="checkbox" id="info-modal" checked></input>
+          <div class="info-modal">
+            <label for="info-modal" class="close">✕</label>
+            <h1>Information!</h1>
+            <p>
+              This is a simple way to add a information modal to your map.
+            </p>
+            <p>
+              To have it closed by default, remove the <code>checked</code> attribute from the checkbox <code>input</code>
+            </p>
+          </div>
+      css: >
+        .maplibregl-ctrl svg {
+          height: 16px;
+          width: 16px;
+          padding: 6.5px;
+          float: right;
+        }
+        .maplibregl-ctrl svg:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+        label[for=info-modal] {
+          cursor: pointer;
+        }
+        label[for=info-modal].close {
+          float: right;
+          text-align: center;
+          height: 20px;
+          width: 20px;
+          display: block;
+        }
+        #info-modal {
+          display: none;
+        }
+        .info-modal {
+          display: none;
+        }
+        #info-modal:checked + .info-modal {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          margin: 50px 20%;
+          padding: 20px;
+          background: white;
+          border-radius: 10px;
+          border: 1px solid grey;
+          pointer-events: initial;
+          box-shadow: 0 0 5px;
+        }
+style: https://demotiles.maplibre.org/style.json
+---

package/Examples/htmlcontrol-linkbutton.ultra

@@ -0,0 +1,25 @@
+---
+title: Use HTMLControl to add a link button to your map
+description: This adds an info button that opens a link in a new window when clicked using Ultra's HTMLControl
+controls:
+  - type: NavigationControl
+  - type: HTMLControl
+    options:
+      html: >
+        <div class="maplibregl-ctrl maplibregl-ctrl-group">
+          <a href="https://overpass-ultra.us/docs" target="_blank">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32l64 0c17.7 0 32 14.3 32 32l0 224 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 512c-17.7 0-32-14.3-32-32s14.3-32 32-32l32 0 0-192-32 0c-17.7 0-32-14.3-32-32z"/></svg>
+          </a>
+        </div>
+      css: >
+        .maplibregl-ctrl svg {
+          height: 16px;
+          width: 16px;
+          padding: 6.5px;
+          float: right;
+        }
+        .maplibregl-ctrl svg:hover {
+          background-color: rgba(0, 0, 0, 0.05);
+        }
+style: https://demotiles.maplibre.org/style.json
+---

package/components/html-control.js

@@ -0,0 +1,74 @@
+import DOMPurify from "dompurify";
+
+import { h } from "../lib/dom.js";
+import { normalizeCSS } from "../lib/normalize.js";
+import maplibreglStyle from "maplibre-gl/dist/maplibre-gl.css";
+
+const maplibreCSS = new CSSStyleSheet();
+maplibreCSS.replaceSync(`
+${maplibreglStyle}
+/* override inset(top/left/bottom/right) & position bc nestin in existing controlgroup corner */
+.maplibregl-ctrl-top-right,
+.maplibregl-ctrl-top-left,
+.maplibregl-ctrl-bottom-right,
+.maplibregl-ctrl-bottom-left {
+  inset: initial;
+  position: initial;
+}
+`);
+
+export class HTMLControl extends HTMLElement {
+  static observedAttributes = ["css", "html"];
+
+  get css() {
+    return this.getAttribute("css");
+  }
+  set css(value) {
+    return this.setAttribute("css", value);
+  }
+
+  get html() {
+    return this.getAttribute("html");
+  }
+  set html(value) {
+    return this.setAttribute("html", value);
+  }
+
+  constructor(options) {
+    super();
+    if (options) {
+      const { html, css } = options;
+      this.html = html;
+      this.css = css;
+    }
+  }
+  onAdd(map) {
+    this._map = map;
+    this._container = h("html-control");
+    if (this.html) this._container.html = this.html;
+    if (this.css) this._container.css = this.css;
+
+    return this._container;
+  }
+  onRemove() {
+    this.container.parentNode.removeChild(this.container);
+    this.map = undefined;
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+
+    // Add styles: Normalize, MapLibre, & User-specified
+    shadow.adoptedStyleSheets.push(normalizeCSS);
+    shadow.adoptedStyleSheets.push(maplibreCSS);
+    const style = new CSSStyleSheet();
+    style.replaceSync(this.css);
+    shadow.adoptedStyleSheets.push(style);
+
+    // Wrap in a div with the same className as parent so that control position CSS works
+    const container = h("div", { className: this.parentElement.className });
+    container.innerHTML = DOMPurify.sanitize(this.html);
+
+    shadow.appendChild(container);
+  }
+}

package/components/ultra-map.js

@@ -14,6 +14,7 @@ import { getStyle } from "../lib/style.js";
 import { handleStyleImageMissing } from "../lib/sprites.js";
 import { handleMouseClick, handleMouseMove } from "../lib/queryMap.js";
 import { localStorage, optionsFromStorage } from "../lib/localStorage.js";
+import { HTMLControl } from "./html-control.js";
 
 const css = new CSSStyleSheet();
 css.replaceSync(`
@@ -65,7 +66,7 @@ export class UltraMap extends HTMLElement {
   querySources = UltraMap.defaults.querySources;
 
   options = UltraMap.defaults.options;
-  controls = UltraMap.defaults.controls;
+  #controls = UltraMap.defaults.controls;
 
   fitBounds = UltraMap.defaults.fitBounds;
 
@@ -119,6 +120,18 @@ export class UltraMap extends HTMLElement {
   get center() {
     return this.refs?.mapLibre?.center;
   }
+  get controls() {
+    return this.#controls;
+  }
+  set controls(value) {
+    this.#controls = value.map
+      ? value.map(({ type, options, position }) =>
+          type === "HTMLControl"
+            ? { type: new HTMLControl(options), position }
+            : { type, options, position },
+        )
+      : value;
+  }
 
   connectedCallback() {
     this.#shadow = this.attachShadow({ mode: "open" });

package/docs/index.md

@@ -43,8 +43,8 @@ style:
 }
 ```
 
-For more examples, see the [Examples](./Examples) and [MapLibre Examples](./MapLibre-Examples)
-sections.
+For more examples, see the [Examples](./Examples/index.md) and [MapLibre
+Examples](./MapLibre-Examples/index.md) sections.
 
 ## Configuration
 

package/docs/resources.md

@@ -0,0 +1,123 @@
+# Mapping Resources
+
+## Query Data
+
+There are many sources of query data for use with Ultra.
+
+### OpenStreetMap
+
+Ultra was initially made to visualize OSM data via [Overpass](#overpass) queries.  OSM continues to
+be an excellent source of data for Ultra, and can be consumed in more ways than one.
+
+#### Overpass
+
+[OverpassQL](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL) or [Overpass
+XML](https://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide) queries are supported by the
+[`overpass` query provider](./yaml.md#overpass).
+
+#### Ohsome
+
+The [ohsome API](https://api.ohsome.org) can be used via the [`ohsome` query
+provider](./yaml.md#ohsome) to loader quanties of OSM data with a simpler [filtering
+syntax](https://docs.ohsome.org/ohsome-api/v1/filter.html) than Overpass.
+
+#### Bunting Labs
+Using [separate N/S/E/W bbox
+placeholders](./query-shortcuts.md#other-formats), the [`geojson`
+provider](./yaml.md#geojson) can load data from the [Bunting Labs
+API](https://buntinglabs.com/solutions/openstreetmap-extracts)
+
+#### OSM API
+The [`osmxml`](./yaml.md#osmxml) and [`osmjson`](./yaml.md#osmjson) providers can load data
+directly from the [OSM API](https://wiki.openstreetmap.org/wiki/API_v0.6).
+
+#### Tiles
+There are a variety of providers of tiled OSM data.
+
+##### OpenStreetMap US Tileserver 
+
+Née the [OSM Americana](https://americanamap.org/) Community Vector Tile Server, [OSM
+US](https://openstreetmap.us) hosts [OpenMapTiles](https://openmaptiles.org) on
+[tile.ourmap.us](https://tile.ourmap.us). For usage, see their
+[policy](https://tile.ourmap.us/usage.html).
+
+### Google My Maps
+
+The [`kml` provider](./yaml.md#kml) can directly load Google My Maps URLs.
+
+### Natural Earth
+
+[Natural Earth Data](https://www.naturalearthdata.com/) data is available as GeoJSON from the
+[geojson.xyz CDN](https://geojson.xyz)
+
+### Wilderness.net
+
+[Wilderness.net](https://wilderness.net) provides GIS data for Wildernes Areas in the USA. The data
+files need to be downloaded, converted to tiles or GeoJSON, and hosted before using them with Ultra
+
+ * [Downloads Page](https://wilderness.net/visit-wilderness/gis-gps.php)
+ * [Shapefile](https://www.wilderness.net/GIS/Wilderness_Areas.zip)
+ * [state KMZs](https://wilderness.net/visit-wilderness/google-earth.php)
+
+### All The Places
+
+[All The Places](https://alltheplaces.xyz) provides GeoJSON files for a many retail establishments,
+scraped from their websites.
+
+ATP doesn't serve the files with [CORS
+headers](https://developer.mozilla.org/en-US/docs/Glossary/CORS), so you must re-host them with the
+appropriate headers yourself.
+
+### Overture Maps
+
+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.
+
+## Base Style resources
+
+### TrailStash Style Server
+
+Most of the styles made available in the **Style Picker** menu on
+[overpass-ultra.us](https://overpass-ultra.us) are hosted on
+[styles.trailsta.sh](https://styles.trailsta.sh).
+
+#### OpenMapTiles Styles
+
+Most of the [OpenMapTiles Styles](https://openmaptiles.org/styles/) are available, with fonts and
+sprites hosted along-side the style, and tiles hosted by the [OSM US Tile
+Server](#openstreetmap-us-tileserver).
+
+#### Protomaps
+
+The light, dark, white, grey, black variants and the community "contrast" varaint of the Protomaps
+styles are available, with fonts and sprites hosted by the [protomaps basemaps assets
+repo](https://github.com/protomaps/basemaps-assets) and tiles hosted by the [Protomaps
+API](https://protomaps.com)
+
+#### Esri Satellite
+
+A style using [Esri World
+Imagery](https://www.arcgis.com/home/item.html?id=10df2279f9684e4a9f6a7f08febac2a9) is available.
+
+### Natural Earth
+
+The [TrailStash fork](https://trailstash.github.io/naturalearthtiles/) of [Lukas Martinelli's
+Natural Earth Tiles](https://github.com/lukasmartinelli/naturalearthtiles) includes a MapLibre
+vector style.
+
+### Versatiles
+
+[Versatiles](https://versatiles.org/intro.html) provides a few styles based on the [Shortbread
+Schema](https://shortbread-tiles.org/), free for use anywhere.
+
+### OpenFreeMap
+
+[OpenFreeMap](https://openfreemap.org/quick_start/) provides a few styles based on the [OpenMapTile
+schema](https://openmaptiles.org/schema/) free for use
+anywhere.
+
+### Commercial Providers
+
+Any MapLibre style provider can be used with Ultra. See [Awesome
+MapLibre](https://github.com/maplibre/awesome-maplibre?tab=readme-ov-file#maptile-providers) for a
+more comprehensive list of MapLibre style providers.

package/index.js

@@ -1,3 +1,4 @@
+import DOMPurify from "dompurify";
 import { Protocol } from "pmtiles";
 import MapLibre from "@trailstash/maplibre-component";
 import maplibregl from "maplibre-gl";
@@ -5,6 +6,7 @@ import maplibregl from "maplibre-gl";
 import { normalizeCSS } from "./lib/normalize.js";
 import FallbackGlyphProtocol from "./lib/glyphFallback.js";
 
+import { HTMLControl } from "./components/html-control.js";
 import { UltraLoader } from "./components/ultra-loader.js";
 import { UltraMap } from "./components/ultra-map.js";
 import { UltraIDE } from "./components/ultra-ide.js";
@@ -20,6 +22,15 @@ import { FontAwesomeIcon } from "./components/fontawesome-icon.js";
 import { ButtonModal } from "./components/button-modal.js";
 import { MapPopup } from "./components/map-popup.js";
 
+// Allow pages in new windows securely
+DOMPurify.addHook("afterSanitizeAttributes", function (node) {
+  // set all elements owning target to target=_blank
+  if ("target" in node) {
+    node.setAttribute("target", "_blank");
+    node.setAttribute("rel", "noopener");
+  }
+});
+
 // style
 document.adoptedStyleSheets.push(normalizeCSS);
 
@@ -48,6 +59,7 @@ customElements.define("map-popup", MapPopup);
 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/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.6.0",
+  "version": "3.7.1",
   "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": {