@trailstash/ultra 3.7.1 → 3.8.0

package/Examples/qlever.ultra

@@ -0,0 +1,14 @@
+---
+title: Query OSM using QLever
+description: Load OSM data from the QLever osm-planet dataset. The sparql provider uses https://qlever.cs.uni-freiburg.de/api/osm-planet by default.
+type: sparql
+options:
+  zoom: -0.1
+  center: [0, 30]
+---
+PREFIX geo: <http://www.opengis.net/ont/geosparql#>
+PREFIX osmkey: <https://www.openstreetmap.org/wiki/Key:>
+SELECT * WHERE {
+  ?osm_id osmkey:amenity "bicycle_repair_station" .
+  ?osm_id geo:hasGeometry/geo:asWKT ?geometry
+}

package/Examples/viewing-features-at-low-zooms.ultra

@@ -0,0 +1,13 @@
+---
+title: Viewing features at low zoom levels
+description: >
+    Because of how MapLibre handles GeoJSON sources with
+    [geojson-vt](https://github.com/mapbox/geojson-vt), Ultra cannot implement a feature similar to
+    overpass turbo's "show small features as points" feature. To work around this, query for the
+    center of features instead of their full geometry.
+options:
+  zoom: 0
+  center: [-100, 40]
+---
+nwr[sport=water_ski][water];
+out center;

package/Examples/wikidata-sparql.ultra

@@ -0,0 +1,13 @@
+---
+title: Query Wikidata
+description: Load Wikidata data from the Wikidata Query Service.
+type: sparql
+server: https://query.wikidata.org/sparql
+options:
+  zoom: -0.1
+  center: [0, 30]
+---
+SELECT DISTINCT * WHERE {
+  ?item wdt:P31/wdt:P279* wd:Q16917;
+        wdt:P625 ?geo .
+}

package/build-examples-docs.js

@@ -75,7 +75,7 @@ function generateExamplesFolder(examplesFolder) {
     indexArray.push({
       title: config.title,
       mdFileName,
-      description: config.title,
+      description: config.description,
       queryContent,
     });
     const exampleMarkdown = generateMarkdownForExample(

package/components/ultra-map.js

@@ -293,7 +293,9 @@ export class UltraMap extends HTMLElement {
     this.refs.mapLibre.mapStyle = await getStyle(this.mapStyle, {
       // Don't love this...
       source: this.#cachedSource,
-      layers: queryProvider.layers ? queryProvider.layers("ultra") : [],
+      layers: queryProvider.layers
+        ? await Promise.resolve(queryProvider.layers("ultra", query))
+        : [],
     });
     return this.#cachedSource.data;
   }

package/docs/resources.md

@@ -50,6 +50,11 @@ The [`kml` provider](./yaml.md#kml) can directly load Google My Maps URLs.
 [Natural Earth Data](https://www.naturalearthdata.com/) data is available as GeoJSON from the
 [geojson.xyz CDN](https://geojson.xyz)
 
+### US Census Bureau
+
+State boundaries from the [US Census Bureau](https://www.census.gov/geographies/mapping-files/time-series/geo/carto-boundary-file.html)
+data is available as GeoJSON from [github.com/glynnbird/usstatesgeojson](https://github.com/glynnbird/usstatesgeojson)
+
 ### Wilderness.net
 
 [Wilderness.net](https://wilderness.net) provides GIS data for Wildernes Areas in the USA. The data

package/docs/yaml.md

@@ -51,15 +51,18 @@ Specify the type of source in the query.
 Automatically detects and chooses the right query provider out of the following:
 
 - `overpass`
-- `osmWebsite`
-- `osmWiki`
 - `geojson`
-- `osmxml`
-- `osmjson`
 - `kml`
 - `gpx`
 - `tcx`
+- `vector`
+- `raster`
 - `raw`
+- `osmxml`
+- `osmjson`
+- `osmWebsite`
+- `osmWiki`
+- `taginfo`
 
 See each provider for how it is auto-detected
 
@@ -92,6 +95,16 @@ Detected if:
 
 - A URL to the OSM wiki starting with `Tag:` or `Key:`
 
+
+### `taginfo`
+
+Perform an Overpass query using `nwr` and `out geom;` for an taginfo URL for keys or tags.
+
+Detected if:
+
+- A URL starting with http://taginfo.openstreetmap.org or http://taginfo.geofabrik.de and with a
+  path ending in `/keys/:key` or `/tags/:key=:value`.
+
 ### `osmxml`
 
 An [OSM XML](https://wiki.openstreetmap.org/wiki/OSM_XML) document or a URL to one. Converted into
@@ -116,6 +129,16 @@ Detected if:
 - Parses as a URL and the path matches that of an `node/:id`, `way/:id/full`, or
   `relation/:id/full` OSM API route
 
+### `sparql`
+
+Make a [GeoSPARQL](https://www.ogc.org/publications/standard/geosparql/) query to load data. By
+default, uses the [Qlever osm-planet](https://qlever.cs.uni-freiburg.de/osm-planet) server.
+
+Examples:
+
+ * [Qlever](./Examples/qlever.md)
+ * [Wikidata Query Service](./Examples/wikidata-sparql.md)
+
 ### `ohsome`
 
 An [ohsome API](https://api.ohsome.org/) [filter](https://docs.ohsome.org/ohsome-api/v1/filter.html).
@@ -171,12 +194,21 @@ A line delimited list of [tile URLs](https://maplibre.org/maplibre-style-spec/so
 a [raster source](https://maplibre.org/maplibre-style-spec/sources/#raster) or a [TileJSON
 url](https://maplibre.org/maplibre-style-spec/sources/#url_1)
 
+Detected if
+
+- tile URLs ending in `.png`, `.jpg`, `.jpeg`, or `.webp`.
+- A JSON document or URL to a JSON document containing a `tilejson` key and a `format` key equal to `png`, `jpg`, or `webp`.
+
 ### `vector`
 
 A line delimited list of [tile URLs](https://maplibre.org/maplibre-style-spec/sources/#tiles_2) for
 a [vector source](https://maplibre.org/maplibre-style-spec/sources/#vector) or a [TileJSON
 url](https://maplibre.org/maplibre-style-spec/sources/#url_2)
 
+Detected if
+
+- A JSON document or URL to a JSON document containing a `tilejson` key and a `format` key equal to `pbf`.
+
 ## `options`
 
 When an Ultra query is run in "interactive map" mode, you can specify the

package/lib/queryProviders/index.js

@@ -1,6 +1,7 @@
 import AutoProvider from "./auto.js";
-import overpass, { osmWebsite, osmWiki } from "./overpass.js";
+import overpass, { osmWebsite, osmWiki, taginfo } from "./overpass.js";
 import ohsome from "./ohsome.js";
+import sparql from "./sparql.js";
 import geojson from "./geojson.js";
 import raster from "./raster.js";
 import vector from "./vector.js";
@@ -11,19 +12,21 @@ import tcx from "./tcx.js";
 import raw from "./raw.js";
 
 export const all = {
-  raw,
-  raster,
-  vector,
   overpass,
-  osmWebsite,
-  osmWiki,
-  osmxml,
-  osmjson,
+  ohsome,
+  sparql,
   geojson,
   kml,
   gpx,
   tcx,
-  ohsome,
+  osmxml,
+  osmjson,
+  raster,
+  vector,
+  raw,
+  osmWebsite,
+  osmWiki,
+  taginfo,
 };
 
 export default { auto: new AutoProvider(all), ...all };

package/lib/queryProviders/ohsome.js

@@ -27,7 +27,7 @@ const popupContextBuilder = ({ properties, geometry }) => {
   return templateContext;
 };
 
-const overpass = {
+const ohsome = {
   source: async function (query, controller, { server, bounds }) {
     if (!server) {
       server = "https://api.ohsome.org/v1";
@@ -60,4 +60,4 @@ const overpass = {
   popupContextBuilder,
   invalidateCacheOnBBox: true,
 };
-export default overpass;
+export default ohsome;

package/lib/queryProviders/overpass.js

@@ -129,6 +129,43 @@ export const osmWebsite = {
   invalidateCacheOnBBox: true,
 };
 
+export const taginfo = {
+  ...overpass,
+  source: async function (query, controller, { server, bounds }) {
+    let [type, val] = new URL(query).pathname.split("/").slice(-2);
+    let overpassQuery;
+    switch (type) {
+      case "keys":
+        overpassQuery = setQueryBounds(
+          `[bbox:{{bbox}}]; nwr["${val}"]; out geom;`,
+          bounds,
+        );
+        break;
+      case "tags":
+        let key;
+        [key, val] = val.split("=");
+        overpassQuery = setQueryBounds(
+          `[bbox:{{bbox}}]; nwr["${key}"="${val}"]; out geom;`,
+          bounds,
+        );
+        break;
+    }
+    if (!overpassQuery) {
+      throw new Error(`Don't know how to load ${query}`);
+    }
+
+    return overpass.source(overpassQuery, controller, { server });
+  },
+  detect: function (query) {
+    return (
+      query.startsWith("https://taginfo.openstreetmap.org") ||
+      query.startsWith("https://taginfo.geofabrik.de")
+    );
+  },
+  fitBounds: true,
+  invalidateCacheOnBBox: true,
+};
+
 export const osmWiki = {
   ...overpass,
   source: async function (query, controller, { server, bounds }) {

package/lib/queryProviders/raster.js

@@ -5,19 +5,35 @@ const layers = (source) => [
     source,
   },
 ];
+const IMAGE_FORMATS = new Set(["webp", "png", "jpg"]);
+const detect = async (query) => {
+  query = query.trim();
+  if (query.includes("{bbox-epsg-3857}")) {
+    return true;
+  }
+  if (query.match(/{(x|y|z)}.*\.(png|webp|jpe?g)$/)) {
+    return true;
+  }
+  query = await fetchIfHTTPS(query);
+  try {
+    const json = JSON.parse(query);
+    return json.tilejson && IMAGE_FORMATS.has(json.formati);
+  } catch {}
+};
 export default {
   source: (query) => {
     const source = {
       type: "raster",
-      tileSize: 256,
       layers,
     };
     if (query.match(/{(x|y|z|bbox-epsg-3857)}/)) {
       source.tiles = query.split("\n").filter((x) => !!x);
+      source.tileSize = 256;
     } else {
       source.url = query.trim();
     }
     return source;
   },
   layers,
+  detect,
 };

package/lib/queryProviders/sparql.js

@@ -0,0 +1,57 @@
+import { layers } from "./osm.js";
+
+import sparql2geojson from "../sparql2geojson.js";
+
+export const popupTemplate = `
+  <h3>columns</h3>
+  {%- for prop in properties %}
+    {%- if prop[0] startswith "https://" %}
+      <code>{{ prop[0] }} = <a href="{{ prop[1] }}" target="_blank">{{ prop[1] }}</a></code>
+    {%- else %}
+      <code>{{ prop[0] }} = {{ prop[1] }}</code>
+    {%- endif %}
+    <br>
+  {%- endfor %}
+`;
+
+const OSM_SERVERS = new Set([
+  "https://qlever.cs.uni-freiburg.de/api/osm-planet",
+  "https://sophox.org/sparql",
+]);
+
+const source = async function (query, controller, { server, bounds }) {
+  if (!server) {
+    server = "https://qlever.cs.uni-freiburg.de/api/osm-planet";
+  }
+  const resp = await fetch(server, {
+    method: "POST",
+    body: query,
+    signal: controller.signal,
+    headers: {
+      "Content-Type": "application/sparql-query",
+      Accept: "application/sparql-results+json",
+    },
+  });
+  if (!resp.ok) {
+    throw new Error(`SparQL API returned ${resp.status}: ${await resp.text()}`);
+  }
+  const data = sparql2geojson(await resp.json());
+  let attribution = "";
+  if (OSM_SERVERS.has(server)) {
+    attribution =
+      '\u003Ca href="https://www.openstreetmap.org/copyright" target="_blank"\u003E© OpenStreetMap contributors\u003C/a\u003E';
+  }
+  return {
+    type: "geojson",
+    data,
+    attribution,
+    generateId: true,
+  };
+};
+
+const sparql = {
+  source,
+  layers,
+  popupTemplate,
+};
+export default sparql;

package/lib/queryProviders/vector.js

@@ -1,3 +1,22 @@
+import { fetchIfHTTPS } from "./util.js";
+import { PMTiles } from "pmtiles";
+
+// Created with https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
+const colors = [
+  "#8dd3c7",
+  "#ffffb3",
+  "#bebada",
+  "#fb8072",
+  "#80b1d3",
+  "#fdb462",
+  "#b3de69",
+  "#fccde5",
+  "#d9d9d9",
+  "#bc80bd",
+  "#ccebc5",
+  "#ffed6f",
+];
+
 export default {
   source: (query) => {
     const source = {
@@ -10,4 +29,67 @@ export default {
     }
     return source;
   },
+  layers: async (source, query) => {
+    const layers = [];
+    if (!query.match(/{[xyz]}/)) {
+      let tileJSON;
+      if (query.startsWith("pmtiles://")) {
+        const pmtiles = new PMTiles(query.slice("pmtiles://".length));
+        tileJSON = await pmtiles.getTileJson();
+      } else {
+        const resp = await fetch(query);
+        if (!resp.ok) {
+          return layers;
+        }
+        tileJSON = await resp.json();
+      }
+      for (const i in tileJSON.vector_layers) {
+        const { id } = tileJSON.vector_layers[i];
+        layers.push({
+          id: `${source}-vector-${i}-fill`,
+          source,
+          "source-layer": id,
+          type: "fill",
+          filter: ["==", ["geometry-type"], "Polygon"],
+          paint: {
+            "fill-opacity": 0.5,
+            "fill-color": colors[i % colors.length],
+          },
+        });
+        layers.push({
+          id: `${source}-vector-${i}-line`,
+          source,
+          "source-layer": id,
+          type: "line",
+          filter: ["==", ["geometry-type"], "LineString"],
+          paint: {
+            "line-color": colors[i % colors.length],
+          },
+          layout: {
+            "line-join": "round",
+            "line-cap": "round",
+          },
+        });
+        layers.push({
+          id: `${source}-vector-${i}-point`,
+          source,
+          "source-layer": id,
+          type: "circle",
+          filter: ["==", ["geometry-type"], "Point"],
+          paint: {
+            "circle-color": colors[i % colors.length],
+            "circle-radius": 2,
+          },
+        });
+      }
+    }
+    return layers;
+  },
+  detect: async (query) => {
+    query = await fetchIfHTTPS(query);
+    try {
+      const json = JSON.parse(query);
+      return json.tilejson && json.format === "pbf";
+    } catch {}
+  },
 };

package/lib/sparql2geojson.js

@@ -0,0 +1,28 @@
+import wkt from "wkt";
+
+const wktDataTypes = new Set([
+  "http://www.opengis.net/ont/geosparql#wktLiteral",
+  "http://www.openlinksw.com/schemas/virtrdf#Geometry",
+]);
+
+export default function (sparqlJSON) {
+  return {
+    type: "FeatureCollection",
+    features: sparqlJSON.results.bindings.map((record) => {
+      const properties = {};
+      let geometry;
+      for (const [key, { datatype, value }] of Object.entries(record)) {
+        if (wktDataTypes.has(datatype)) {
+          geometry = wkt.parse(value);
+        } else {
+          properties[key] = value;
+        }
+      }
+      return {
+        type: "Feature",
+        geometry,
+        properties,
+      };
+    }),
+  };
+}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "3.7.1",
+  "version": "3.8.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": {
@@ -69,6 +69,7 @@
     "normalize.css": "^8.0.1",
     "osmtogeojson": "^3.0.0-beta.5",
     "pmtiles": "^3.2.0",
+    "wkt": "^0.1.1",
     "yaml": "^2.5.1"
   },
   "peerDependencies": {