@trailstash/ultra/components/style-picker.js

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

import { h, t } from "../lib/dom.js";
import { style as buttonCSS } from "./button.js";
import { normalizeCSS } from "../lib/normalize.js";

const css = new CSSStyleSheet();
css.replaceSync(`
h3 {
  margin: .5em 0 0;
}
h3 a {
  color: black;
  text-decoration: none;
}
button {
  margin: 0.25em;
  display: inline-block;
}
button img {
  height: 125px;
  width: 125px;
}
h3 img {
  height: 2em;
  width: 2em;
  vertical-align: middle;
  object-fit: contain;
}
`);

const styles = [
  [
    "Liberty",
    "https://tiles.openfreemap.org/styles/liberty",
    `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
  ],
  [
    "Bright",
    "https://tiles.openfreemap.org/styles/bright",
    `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
  ],
  [
    "Positron",
    "https://tiles.openfreemap.org/styles/positron",
    `<a href="https://openfreemap.org/">OpenFreeMap</a>`,
  ],
  [
    "Vectortiles",
    "https://trailstash.github.io/naturalearthtiles/maps/natural_earth.vector.json",
    `<a href="https://github.com/trailstash/naturalearthtiles">Natural Earth</a>`,
  ],
  [
    "Demo Tiles",
    "https://demotiles.maplibre.org/style.json",
    `<a href="https://github.com/maplibre/demotiles">MapLibre</a>`,
  ],
];

export class StylePicker extends HTMLElement {
  static defaults = { styles };

  constructor() {
    super();
    this.styles = StylePicker.defaults.styles;
  }

  connectedCallback() {
    const shadow = this.attachShadow({ mode: "open" });

    if (!this.styles || this.styles.length === 0) {
      return;
    }

    const div = h("div", {
      slot: "modal-content",
      style: "max-width: 1055px;",
    });
    const button = h(
      "button-modal",
      { text: "Pick Style", icon: "paintbrush" },
      div,
    );
    this.refs = { button, div };

    const stylesByProvider = {};
    for (const [name, value, provider] of this.styles) {
      if (!stylesByProvider[provider]) {
        stylesByProvider[provider] = [];
      }
      stylesByProvider[provider].push({ name, value });
    }
    for (const [provider, styles] of Object.entries(stylesByProvider)) {
      const div2 = h("div", {
        style: "display:inline-block;margin-right:1.25em;",
      });
      div.appendChild(div2);
      div2.appendChild(h("h3", {}, provider));
      for (const { name, value } of styles) {
        const styleButton = h("button", {}, name);
        styleButton.addEventListener("click", (e) => {
          button.toggle();
          this.dispatchEvent(
            new CustomEvent("change", { detail: { value: value } }),
          );
        });
        div2.appendChild(styleButton);
      }
    }

    shadow.adoptedStyleSheets.push(css);
    shadow.appendChild(button);
  }
}