@trailstash/ultra/index.js

A web based tool for making MapLibre GL maps with data from sources such as Overpass, GeoJSON, GPX, KML, TCX, etc

import DOMPurify from "dompurify";
import { Protocol } from "pmtiles";
import MapLibre from "@trailstash/maplibre-component";
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";
import { CodeEditor } from "./components/code-editor.js";
import { NavBar } from "./components/nav-bar.js";
import { RunButton } from "./components/run-button.js";
import { ExportModal as DownloadButton } from "./components/export-modal.js";
import { StylePicker } from "./components/style-picker.js";
import { ShareModal as ShareButton } from "./components/share-modal.js";
import { HelpModal } from "./components/help-modal.js";
import { FSButton } from "./components/fs-button.js";
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);

// maplibre plugins
const protocol = new Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);

maplibregl.setRTLTextPlugin("./mapbox-gl-rtl-text@0.2.3.js", true);

const fallbackGlyphsProtocol = new FallbackGlyphProtocol();
maplibregl.addProtocol(FallbackGlyphProtocol.name, fallbackGlyphsProtocol.tile);

// register element
customElements.define("code-editor", CodeEditor);
customElements.define("map-libre", MapLibre);
customElements.define("nav-bar", NavBar);
customElements.define("run-button", RunButton);
customElements.define("download-button", DownloadButton);
customElements.define("share-button", ShareButton);
customElements.define("help-modal", HelpModal);
customElements.define("style-picker", StylePicker);
customElements.define("fs-button", FSButton);
customElements.define("fa-icon", FontAwesomeIcon);
customElements.define("button-modal", ButtonModal);
customElements.define("map-popup", MapPopup);
customElements.define("html-control", HTMLControl);
customElements.define("ultra-map", UltraMap);
customElements.define("ultra-ide", UltraIDE);
customElements.define("ultra-loader", UltraLoader);

// reload on hash changes
addEventListener("hashchange", () => window.location.reload());