@trailstash/ultra/components/html-control.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 { 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);
  }
}