maplibre-gl-layer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Kazuki Sato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# maplibre-gl-layer
+
+A layer control for [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/).
+
+## Installation
+
+```sh
+npm install maplibre-gl-layer
+```
+
+## Usage
+
+```js
+import { Map } from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import { LayerControl } from "maplibre-gl-layer";
+
+const map = new Map({
+  /* YOUR_MAP_OPTIONS */
+});
+
+map.addControl(new LayerControl({
+  layers: [
+    {
+      name: 'light',
+      style: 'https://api.protomaps.com/styles/v4/white/ja.json',
+    },
+    {
+      name: 'dark',
+      style: 'https://api.protomaps.com/styles/v4/black/ja.json',
+    }
+  ]
+}))
+```
+
+## License
+
+This project is licensed under the terms of the [MIT license](./LICENSE).

package/dist/components/LayerDialog.d.ts

@@ -0,0 +1,12 @@
+import { ControlPosition } from 'maplibre-gl';
+import { LayerControlOptions, Layer } from '../maplibre-gl-layer';
+export declare class LayerDialog {
+    private dialog;
+    private options;
+    private layerChangeCallback;
+    constructor(options: LayerControlOptions, defaultLayer: Layer);
+    open(button: HTMLButtonElement, position?: ControlPosition | null): void;
+    close(): void;
+    on(type: string, callback: (layer: Layer) => void): void;
+    private setPosition;
+}

package/dist/layers.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000"><path d="M480-118 120-398l66-50 294 228 294-228 66 50-360 280Zm0-202L120-600l360-280 360 280-360 280Zm0-280Zm0 178 230-178-230-178-230 178 230 178Z"/></svg>

package/dist/maplibre-gl-layer.css

@@ -0,0 +1 @@
+.maplibregl-ctrl button.maplibregl-ctrl-layers .maplibregl-ctrl-icon{background-image:url(./layers.svg)}.maplibregl-ctrl-layers-dialog{position:absolute;margin:0;padding:0;background-color:transparent;border:none;box-shadow:0 0 0 2px #0000001a;border-radius:5px}.maplibregl-ctrl-layers-dialog .maplibregl-ctrl-layers-dialog-content{padding:6px 14px;background-color:#fff}.maplibregl-ctrl-layers-dialog::backdrop{background:#fff3}.maplibregl-ctrl-layers-dialog-item{margin:6px 0}.maplibregl-ctrl-layers-dialog-item label{display:flex;align-items:center;font-size:14px;color:#333}.maplibregl-ctrl-layers-dialog-item input{margin:0 8px 0 0}

package/dist/maplibre-gl-layer.d.ts

@@ -0,0 +1,24 @@
+import { Map, IControl } from 'maplibre-gl';
+export type Layer = {
+    name: string;
+    style: string;
+};
+export type LayerControlOptions = {
+    layers: Layer[];
+};
+export declare class LayerControl implements IControl {
+    private map;
+    private options;
+    private container;
+    private currentLayer;
+    private currentInitStyle;
+    private addedSources;
+    private addedLayers;
+    private layerDialog;
+    constructor(options: LayerControlOptions);
+    onAdd(map: Map): HTMLElement;
+    onRemove(): void;
+    private getPosition;
+    private createButton;
+    private changeLayer;
+}

package/dist/maplibre-gl-layer.js

@@ -0,0 +1,116 @@
+var u = Object.defineProperty;
+var g = (c, e, t) => e in c ? u(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
+var a = (c, e, t) => g(c, typeof e != "symbol" ? e + "" : e, t);
+class m {
+  constructor(e, t) {
+    a(this, "dialog");
+    a(this, "options");
+    a(this, "layerChangeCallback", () => {
+    });
+    this.options = e, this.dialog = document.createElement("dialog"), this.dialog.classList.add("maplibregl-ctrl-layers-dialog"), document.body.appendChild(this.dialog), this.dialog.addEventListener("click", () => {
+      this.dialog.close();
+    });
+    const i = document.createElement("div");
+    i.classList.add("maplibregl-ctrl-layers-dialog-content"), i.addEventListener("click", (s) => {
+      s.stopPropagation();
+    }), this.dialog.appendChild(i), this.options.layers.forEach((s) => {
+      const l = document.createElement("div");
+      l.classList.add("maplibregl-ctrl-layers-dialog-item");
+      const d = document.createElement("label");
+      l.appendChild(d);
+      const n = document.createElement("input");
+      n.setAttribute("type", "radio"), n.setAttribute("name", "layer"), t.name === s.name && n.setAttribute("checked", "checked"), n.addEventListener("change", () => {
+        var p;
+        (p = this.layerChangeCallback) == null || p.call(this, s);
+      }), d.appendChild(n);
+      const h = document.createElement("span");
+      h.textContent = s.name, d.appendChild(h), i.appendChild(l);
+    });
+  }
+  open(e, t = null) {
+    this.dialog.showModal(), this.setPosition(e, t);
+  }
+  close() {
+    this.dialog.close();
+  }
+  on(e, t) {
+    e === "layerchange" && (this.layerChangeCallback = t);
+  }
+  setPosition(e, t) {
+    const i = e.getBoundingClientRect();
+    let s = "", l = "";
+    t === "top-right" ? (s = `${i.y}px`, l = `${i.x - this.dialog.clientWidth - 12}px`) : t === "top-left" ? (s = `${i.y}px`, l = `${i.x + i.width + 12}px`) : t === "bottom-right" ? (s = `${i.y - this.dialog.clientHeight + i.height}px`, l = `${i.x - this.dialog.clientWidth - 12}px`) : t === "bottom-left" && (s = `${i.y - this.dialog.clientHeight + i.height}px`, l = `${i.x + i.width + 12}px`), this.dialog.style.setProperty("top", s), this.dialog.style.setProperty("left", l);
+  }
+}
+class f {
+  constructor(e) {
+    a(this, "map", null);
+    a(this, "options");
+    a(this, "container");
+    a(this, "currentLayer");
+    a(this, "currentInitStyle", null);
+    a(this, "addedSources", {});
+    a(this, "addedLayers", []);
+    a(this, "layerDialog");
+    this.options = e, this.container = document.createElement("div"), this.container.classList.add("maplibregl-ctrl", "maplibregl-ctrl-group"), this.currentLayer = e.layers[0], this.layerDialog = new m(this.options, this.currentLayer), this.layerDialog.on("layerchange", (t) => {
+      this.changeLayer(t), this.layerDialog.close();
+    });
+  }
+  onAdd(e) {
+    this.map = e, this.map.setStyle(this.currentLayer.style), this.map.once("style.load", () => {
+      this.map && (this.currentInitStyle = this.map.getStyle());
+    });
+    const t = this.createButton();
+    return t.addEventListener("click", () => {
+      this.layerDialog.open(t, this.getPosition());
+    }), this.container.appendChild(t), this.container;
+  }
+  onRemove() {
+    var e;
+    (e = this.container.parentNode) == null || e.removeChild(this.container);
+  }
+  getPosition() {
+    if (!this.map) return null;
+    const e = this.map._controlPositions;
+    return e["top-left"].querySelector(".maplibregl-ctrl-layers") ? "top-left" : e["top-right"].querySelector(".maplibregl-ctrl-layers") ? "top-right" : e["bottom-left"].querySelector(".maplibregl-ctrl-layers") ? "bottom-left" : e["bottom-right"].querySelector(".maplibregl-ctrl-layers") ? "bottom-right" : null;
+  }
+  createButton() {
+    const e = document.createElement("button");
+    e.classList.add("maplibregl-ctrl-layers"), e.setAttribute("title", "Change map style"), e.setAttribute("aria-label", "Change map style");
+    const t = document.createElement("i");
+    return t.classList.add("maplibregl-ctrl-icon"), e.appendChild(t), e;
+  }
+  changeLayer(e) {
+    if (!this.map) return;
+    const t = this.currentInitStyle.layers, i = this.map.getStyle().layers, s = i.filter(
+      (r) => !t.some((o) => o.id === r.id)
+    );
+    this.addedLayers = [...this.addedLayers, ...s];
+    const l = t.filter(
+      (r) => !i.some((o) => o.id === r.id)
+    );
+    this.addedLayers = this.addedLayers.filter(
+      (r) => !l.some((o) => o.id === r.id)
+    );
+    const d = this.currentInitStyle.sources, n = this.map.getStyle().sources, h = {};
+    Object.entries(n).forEach(([r, o]) => {
+      Object.keys(d).includes(r) || (h[r] = o);
+    }), this.addedSources = { ...this.addedSources, ...h }, Object.keys(d).filter(
+      (r) => !Object.keys(n).includes(r)
+    ).forEach((r) => {
+      delete this.addedSources[r];
+    }), this.map.setStyle(e.style, {
+      transformStyle: (r, o) => {
+        const y = {
+          ...o,
+          sources: { ...o.sources, ...this.addedSources },
+          layers: o.layers.concat(this.addedLayers)
+        };
+        return this.currentInitStyle = y, y;
+      }
+    });
+  }
+}
+export {
+  f as LayerControl
+};

package/dist/maplibre-gl-layer.umd.cjs

@@ -0,0 +1 @@
+(function(a,s){typeof exports=="object"&&typeof module<"u"?s(exports):typeof define=="function"&&define.amd?define(["exports"],s):(a=typeof globalThis<"u"?globalThis:a||self,s(a["maplibre-gl-layer"]={}))})(this,function(a){"use strict";var f=Object.defineProperty;var b=(a,s,h)=>s in a?f(a,s,{enumerable:!0,configurable:!0,writable:!0,value:h}):a[s]=h;var o=(a,s,h)=>b(a,typeof s!="symbol"?s+"":s,h);class s{constructor(e,t){o(this,"dialog");o(this,"options");o(this,"layerChangeCallback",()=>{});this.options=e,this.dialog=document.createElement("dialog"),this.dialog.classList.add("maplibregl-ctrl-layers-dialog"),document.body.appendChild(this.dialog),this.dialog.addEventListener("click",()=>{this.dialog.close()});const i=document.createElement("div");i.classList.add("maplibregl-ctrl-layers-dialog-content"),i.addEventListener("click",r=>{r.stopPropagation()}),this.dialog.appendChild(i),this.options.layers.forEach(r=>{const n=document.createElement("div");n.classList.add("maplibregl-ctrl-layers-dialog-item");const p=document.createElement("label");n.appendChild(p);const c=document.createElement("input");c.setAttribute("type","radio"),c.setAttribute("name","layer"),t.name===r.name&&c.setAttribute("checked","checked"),c.addEventListener("change",()=>{var y;(y=this.layerChangeCallback)==null||y.call(this,r)}),p.appendChild(c);const u=document.createElement("span");u.textContent=r.name,p.appendChild(u),i.appendChild(n)})}open(e,t=null){this.dialog.showModal(),this.setPosition(e,t)}close(){this.dialog.close()}on(e,t){e==="layerchange"&&(this.layerChangeCallback=t)}setPosition(e,t){const i=e.getBoundingClientRect();let r="",n="";t==="top-right"?(r=`${i.y}px`,n=`${i.x-this.dialog.clientWidth-12}px`):t==="top-left"?(r=`${i.y}px`,n=`${i.x+i.width+12}px`):t==="bottom-right"?(r=`${i.y-this.dialog.clientHeight+i.height}px`,n=`${i.x-this.dialog.clientWidth-12}px`):t==="bottom-left"&&(r=`${i.y-this.dialog.clientHeight+i.height}px`,n=`${i.x+i.width+12}px`),this.dialog.style.setProperty("top",r),this.dialog.style.setProperty("left",n)}}class h{constructor(e){o(this,"map",null);o(this,"options");o(this,"container");o(this,"currentLayer");o(this,"currentInitStyle",null);o(this,"addedSources",{});o(this,"addedLayers",[]);o(this,"layerDialog");this.options=e,this.container=document.createElement("div"),this.container.classList.add("maplibregl-ctrl","maplibregl-ctrl-group"),this.currentLayer=e.layers[0],this.layerDialog=new s(this.options,this.currentLayer),this.layerDialog.on("layerchange",t=>{this.changeLayer(t),this.layerDialog.close()})}onAdd(e){this.map=e,this.map.setStyle(this.currentLayer.style),this.map.once("style.load",()=>{this.map&&(this.currentInitStyle=this.map.getStyle())});const t=this.createButton();return t.addEventListener("click",()=>{this.layerDialog.open(t,this.getPosition())}),this.container.appendChild(t),this.container}onRemove(){var e;(e=this.container.parentNode)==null||e.removeChild(this.container)}getPosition(){if(!this.map)return null;const e=this.map._controlPositions;return e["top-left"].querySelector(".maplibregl-ctrl-layers")?"top-left":e["top-right"].querySelector(".maplibregl-ctrl-layers")?"top-right":e["bottom-left"].querySelector(".maplibregl-ctrl-layers")?"bottom-left":e["bottom-right"].querySelector(".maplibregl-ctrl-layers")?"bottom-right":null}createButton(){const e=document.createElement("button");e.classList.add("maplibregl-ctrl-layers"),e.setAttribute("title","Change map style"),e.setAttribute("aria-label","Change map style");const t=document.createElement("i");return t.classList.add("maplibregl-ctrl-icon"),e.appendChild(t),e}changeLayer(e){if(!this.map)return;const t=this.currentInitStyle.layers,i=this.map.getStyle().layers,r=i.filter(l=>!t.some(d=>d.id===l.id));this.addedLayers=[...this.addedLayers,...r];const n=t.filter(l=>!i.some(d=>d.id===l.id));this.addedLayers=this.addedLayers.filter(l=>!n.some(d=>d.id===l.id));const p=this.currentInitStyle.sources,c=this.map.getStyle().sources,u={};Object.entries(c).forEach(([l,d])=>{Object.keys(p).includes(l)||(u[l]=d)}),this.addedSources={...this.addedSources,...u},Object.keys(p).filter(l=>!Object.keys(c).includes(l)).forEach(l=>{delete this.addedSources[l]}),this.map.setStyle(e.style,{transformStyle:(l,d)=>{const g={...d,sources:{...d.sources,...this.addedSources},layers:d.layers.concat(this.addedLayers)};return this.currentInitStyle=g,g}})}}a.LayerControl=h,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "maplibre-gl-layer",
+  "version": "0.1.0",
+  "description": "A layer control for MapLibre GL JS",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/maplibre-gl-layer.umd.cjs",
+  "module": "./dist/maplibre-gl-layer.js",
+  "types": "./dist/maplibre-gl-layer.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/maplibre-gl-layer.js",
+      "require": "./dist/maplibre-gl-layer.umd.cjs"
+    },
+    "./style.css": "./dist/maplibre-gl-layer.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build --config vite.config.js",
+    "preview": "vite preview",
+    "lint": "eslint src/*.ts src/**/*.ts",
+    "lint:fix": "npm run lint -- --fix"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.16.0",
+    "eslint": "^9.16.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "globals": "^15.12.0",
+    "maplibre-gl": "^5.3.0",
+    "pmtiles": "^4.3.0",
+    "prettier": "^3.4.1",
+    "typescript": "~5.6.2",
+    "typescript-eslint": "^8.16.0",
+    "vite": "^6.0.1",
+    "vite-plugin-dts": "^4.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/qazsato/maplibre-gl-layer.git"
+  },
+  "keywords": [
+    "MapLibre GL JS",
+    "Layer"
+  ],
+  "author": "qazsato <qazsato@gmail.com>",
+  "license": "MIT"
+}