@trailstash/ultra
Version:
A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc
236 lines (205 loc) • 8.74 kB
JavaScript
import { marked } from "marked";
import { h, t } from "../lib/dom.js";
import { normalizeCSS } from "../lib/normalize.js";
import { toQueryParams } from "../lib/queryParams.js";
import { version } from "../package.json";
import { version as duckDbVersion } from "../lib/queryProviders/duckdb.js";
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";
import { version as pinheadVersion } from "@waysidemapping/pinhead/package.json";
import { version as makiVersion } from "@mapbox/maki/package.json";
import { version as temakiVersion } from "@rapideditor/temaki/package.json";
import { version as emojiVersion } from "emoji-datasource-google/package.json";
const help = `# Introduction
Ultra (née Overpass Ultra) is a web-application made to simplify making maps with [MapLibre GL
JS](https://maplibre.org) with data from various file/query types such as Overpass, GeoJSON, GPX, and more.
## Documentation
Full documentation for Ultra is available at ${new URL("docs", window.location).toString()}
## Configuration
Various aspects of Ultra, such as styling, can be
configured via [YAML front-matter](/docs/yaml).
## Styling
Ultra supports styling using an extended version of the the
[MapLibre Style Spec](https://maplibre.org/maplibre-style-spec/).
See the [Styling](/docs/style) section for more information.
## Overpass Queries
The Overpass API allows you to query for OSM data by your own search criteria. For this purpose, it
has a specifically crafted query language: [Overpass
QL](https://wiki.openstreetmap.org/wiki/Overpass_API/Overpass_QL)
In addition to regular Overpass API queries one can use \`{{bbox}}\` to specify the bounding box
coordinates of the current map view.
## About
Ultra is built by Daniel Schep.
You can contact me on [Mastodon](https://mapstodon.space/@trailstash).
## Feedback, Bug Reports, Feature Requests
While Ultra has been in development for a while, it should still be considered
experimental.
If you would like to report a bug or provide other feedback, please do so in the project's
[Issue Tracker](https://gitlab.com/trailstash/ultra/-/issues).
## Source Code</h4>
The [source code](https://gitlab.com/trailstash/ultra) of this application is released under the
[MIT license](https://gitlab.com/trailstash/ultra/-/blob/main/LICENSE).
`;
export class HelpModal extends HTMLElement {
type;
minimal = false;
static defaults = {
help,
};
constructor() {
super();
this.help = HelpModal.defaults.help;
this.styles = [];
this.queryProviders = {};
}
connectedCallback() {
const shadow = this.attachShadow({ mode: "open" });
const helpHTML = marked
.parse(this.help)
.replace(/<\/h3>/g, "</h5>")
.replace(/<h3>/g, "<h5>")
.replace(/<\/h2>/g, "</h4>")
.replace(/<h2>/g, "<h4>")
.replace(/<\/h1>/g, "</h3>")
.replace(/<h1>/g, "<h3>");
let stylesHTML = "";
if (this.styles.length > 0) {
stylesHTML = `<div><h4>Style & Tile Providers</h4><ul>`;
const styles = new Set(this.styles.map((style) => style[2]));
for (const style of styles) {
stylesHTML += `<li>${style}</li>`;
}
stylesHTML += `</ul></div>`;
}
const div = h(
"div",
{ style: "padding: 0 8px 8px;max-width:800px;", slot: "modal-content" },
this.minimal
? helpHTML
: `
${helpHTML}
<div>
<h4>Installed Query Providers</h4>
<ul>
${Object.entries(this.queryProviders)
.map(
([name, { detect }]) =>
`<li><code>${name}${name == this.type ? "+" : ""}${"auto" in this.queryProviders && detect ? "*" : ""}</code></li>`,
)
.join("\n")}
</ul>
<code>+</code> default provider.
${"auto" in this.queryProviders && Object.values(this.queryProviders).some(({ detect }) => !!detect) ? "<br><code>*</code> detected by <code>auto</code> provider." : ""}
</div>
${stylesHTML}
<div>
<h4>Software & Libraries</h4>
<ul>
<li>
<a target="_blank" href="https://gitlab.com/trailstash/ultra"
>@trailstash/ultra</a
> <code>${version}</code>
</li>
<li>
Map powered by
<a target="_blank" href="https://github.com/maplibre/maplibre-gl-js/"
>maplibre-gl</a
> <code>${maplibreVersion}</code>
</li>
${
this.queryProviders.overpass ||
this.queryProviders.osmjson ||
this.queryProviders.osmxml
? `<li>
Overpass & OSM support powered by
<a target="_blank" href="https://github.com/dschep/osm2geojson-ultra"
>osm2geojson-ultra</a
> <code>${osmtogeojsonVersion}</code>
</li>`
: ""
}
${
this.queryProviders.gpx ||
this.queryProviders.tcx ||
this.queryProviders.kml
? `<li>
KML/GPX/TCX support powered by
<a target="_blank" href="https://github.com/placemark/togeojson"
>@tmcw/togeojson</a
>
</li>`
: ""
}
${
this.queryProviders.esri
? `<li>
Esri support powered by
<a target="_blank" href="https://github.com/openaddresses/esri-dump"
>esri-dump</a
> <code>${esridumpVersion}</code>
</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>`
: ""
}
${
this.queryProviders.duckdb
? `<li>
DuckDB support powered by
<a target="_blank" href="https://github.com/duckdb/duckdb-wasm"
>duckdb-wasm</a
> <code>${duckDbVersion}</code>
</li>`
: ""
}
</ul>
<h4>Bundled Icons</h4>
<ul>
<li>
Emoji
<a target="_blank" href="https://github.com/iamcal/emoji-data"
>emoji-data</a
> <code>${emojiVersion}</code>
(<a target="_blank" href="https://trailstash.gitlab.io/maplibre-sprite-previewer/#sprite=${encodeURI(new URL(`sprites/emoji`, window.location).toString())}">preview</a>)
</li>
<li>
Pinhead
<a target="_blank" href="https://github.com/waysidemapping/pinhead"
>@waysidemapping/pinhead</a
> <code>${pinheadVersion}</code>
(<a target="_blank" href="https://trailstash.gitlab.io/maplibre-sprite-previewer/#sprite=${encodeURI(new URL(`sprites/pinhead`, window.location).toString())}">preview</a>)
</li>
<li>
Maki
<a target="_blank" href="https://github.com/mapbox/maki"
>@mapbox/maki</a
> <code>${makiVersion}</code>
(<a target="_blank" href="https://trailstash.gitlab.io/maplibre-sprite-previewer/#sprite=${encodeURI(new URL(`sprites/maki`, window.location).toString())}">preview</a>)
</li>
<li>
Temaki
<a target="_blank" href="https://github.com/rapideditor/temaki"
>@rapideditor/temaki</a
> <code>${temakiVersion}</code>
(<a target="_blank" href="https://trailstash.gitlab.io/maplibre-sprite-previewer/#sprite=${encodeURI(new URL(`sprites/temaki`, window.location).toString())}">preview</a>)
</li>
</ul>
</div>
`,
);
div.addEventListener("click", (e) => e.stopPropagation());
const button = h("button-modal", { text: "Help", icon: "question" }, div);
this.refs = { button, div };
shadow.appendChild(button);
}
}