maplibre-gl-opacity/build/maplibre-gl-opacity.mjs.map

maplibre-gl-opacity is a MapLibre GL JS plugin that makes multiple tile layers transparent.

{"version":3,"file":"maplibre-gl-opacity.mjs","sources":["../src/maplibre-gl-opacity.ts"],"sourcesContent":["import './style.css';\r\n\r\nimport type { IControl, Map } from 'maplibre-gl';\r\n\r\ntype OpacityControlOptions = {\r\n    baseLayers: Record<string, string>;\r\n    overLayers: Record<string, string>;\r\n    opacityControl: boolean;\r\n};\r\n\r\n// デフォルトオプション設定\r\nconst defaultOptions: OpacityControlOptions = {\r\n    baseLayers: {},\r\n    overLayers: {},\r\n    opacityControl: false,\r\n};\r\n\r\nclass OpacityControl implements IControl {\r\n    #map: Map | undefined;\r\n    #container: HTMLDivElement | undefined;\r\n    #baseLayersOption: Record<string, string>;\r\n    #overLayersOption: Record<string, string>;\r\n    #opacityControlOption: boolean;\r\n\r\n    constructor(options: Partial<OpacityControlOptions>) {\r\n        // オプション設定\r\n        this.#baseLayersOption = options.baseLayers ?? defaultOptions.baseLayers;\r\n        this.#overLayersOption = options.overLayers ?? defaultOptions.overLayers;\r\n        this.#opacityControlOption = options.opacityControl ?? defaultOptions.opacityControl;\r\n    }\r\n\r\n    // ラジオボタン作成\r\n    #radioButtonControlAdd(layerId: string) {\r\n        // 初期レイヤ定義\r\n        const initLayer = Object.keys(this.#baseLayersOption)[0];\r\n        // ラジオボタン追加\r\n        const radioButton = document.createElement('input');\r\n        radioButton.setAttribute('type', 'radio');\r\n        radioButton.id = layerId;\r\n        // 初期レイヤのみ表示\r\n        if (layerId === initLayer) {\r\n            radioButton.checked = true;\r\n            this.#map!.setLayoutProperty(layerId, 'visibility', 'visible');\r\n        } else {\r\n            this.#map!.setLayoutProperty(layerId, 'visibility', 'none');\r\n        }\r\n        this.#container!.appendChild(radioButton);\r\n        // ラジオボタンイベント\r\n        radioButton.addEventListener('change', (event) => {\r\n            // 選択レイヤ表示\r\n            // @ts-ignore\r\n            event.target.checked = true;\r\n            this.#map!.setLayoutProperty(layerId, 'visibility', 'visible');\r\n            // 選択レイヤ以外非表示\r\n            Object.keys(this.#baseLayersOption).map((layer) => {\r\n                // @ts-ignore\r\n                if (layer !== event.target.id) {\r\n                    // @ts-ignore\r\n                    document.getElementById(layer).checked = false;\r\n                    this.#map!.setLayoutProperty(layer, 'visibility', 'none');\r\n                }\r\n            });\r\n        });\r\n        // レイヤ名追加\r\n        const layerName = document.createElement('label');\r\n        layerName.htmlFor = layerId;\r\n        layerName.appendChild(document.createTextNode(this.#baseLayersOption[layerId]));\r\n        this.#container!.appendChild(layerName);\r\n    }\r\n\r\n    // チェックボックス作成\r\n    #checkBoxControlAdd(layerId: string) {\r\n        // チェックボックス追加\r\n        const checkBox = document.createElement('input');\r\n        checkBox.setAttribute('type', 'checkbox');\r\n        checkBox.id = layerId;\r\n        // 全レイヤ非表示\r\n        this.#map!.setLayoutProperty(layerId, 'visibility', 'none');\r\n        this.#container!.appendChild(checkBox);\r\n        // チェックボックスイベント\r\n        checkBox.addEventListener('change', (event) => {\r\n            // レイヤの表示・非表示\r\n            // @ts-ignore\r\n            if (event.target.checked) {\r\n                this.#map!.setLayoutProperty(layerId, 'visibility', 'visible');\r\n            } else {\r\n                this.#map!.setLayoutProperty(layerId, 'visibility', 'none');\r\n            }\r\n        });\r\n        // レイヤ名追加\r\n        const layerName = document.createElement('label');\r\n        layerName.htmlFor = layerId;\r\n        layerName.appendChild(document.createTextNode(this.#overLayersOption[layerId]));\r\n        this.#container!.appendChild(layerName);\r\n    }\r\n\r\n    // スライドバー作成\r\n    #rangeControlAdd(layerId: string) {\r\n        // スライドバー追加\r\n        const range = document.createElement('input');\r\n        range.type = 'range';\r\n        range.min = String(0);\r\n        range.max = String(100);\r\n        range.value = String(100);\r\n        this.#container!.appendChild(range);\r\n        // スライドバースイベント\r\n        range.addEventListener('input', (event) => {\r\n            // 透過度設定\r\n            this.#map!.setPaintProperty(\r\n                layerId,\r\n                'raster-opacity',\r\n                // @ts-ignore\r\n                Number(event.target.value / 100)\r\n            );\r\n        });\r\n    }\r\n\r\n    // コントロール作成\r\n    #opacityControlAdd() {\r\n        // コントロール設定\r\n        this.#container = document.createElement('div');\r\n        this.#container.className = 'maplibregl-ctrl maplibregl-ctrl-group';\r\n        this.#container.id = 'opacity-control';\r\n        // 背景レイヤ設定\r\n        if (this.#baseLayersOption) {\r\n            Object.keys(this.#baseLayersOption).map((layer) => {\r\n                const layerId = layer;\r\n                const br = document.createElement('br');\r\n                // ラジオボタン作成\r\n                this.#radioButtonControlAdd(layerId);\r\n                this.#container!.appendChild(br);\r\n            });\r\n        }\r\n        // 区切り線\r\n        if (this.#baseLayersOption && this.#overLayersOption) {\r\n            const hr = document.createElement('hr');\r\n            this.#container.appendChild(hr);\r\n        }\r\n        // オーバーレイヤ設定\r\n        if (this.#overLayersOption) {\r\n            Object.keys(this.#overLayersOption).map((layer) => {\r\n                const layerId = layer;\r\n                const br = document.createElement('br');\r\n                // チェックボックス作成\r\n                this.#checkBoxControlAdd(layerId);\r\n                this.#container!.appendChild(br);\r\n                // スライドバー作成\r\n                if (this.#opacityControlOption) {\r\n                    this.#rangeControlAdd(layerId);\r\n                    this.#container!.appendChild(br);\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    onAdd(map: Map) {\r\n        this.#map = map;\r\n        // コントロール作成\r\n        this.#opacityControlAdd();\r\n        return this.#container!;\r\n    }\r\n\r\n    onRemove() {\r\n        this.#container!.parentNode!.removeChild(this.#container!);\r\n        this.#map = undefined;\r\n    }\r\n}\r\n\r\nexport default OpacityControl;\r\n"],"names":["defaultOptions","_map","_container","_baseLayersOption","_overLayersOption","_opacityControlOption","_OpacityControl_instances","radioButtonControlAdd_fn","checkBoxControlAdd_fn","rangeControlAdd_fn","opacityControlAdd_fn","OpacityControl","options","__privateAdd","__privateSet","map","__privateMethod","__privateGet","layerId","initLayer","radioButton","event","layer","layerName","checkBox","range","br","hr"],"mappings":"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"}