maplibre-gl-opacity
Version:
maplibre-gl-opacity is a MapLibre GL JS plugin that makes multiple tile layers transparent.
3 lines (2 loc) • 3.09 kB
JavaScript
(function(n,o){typeof exports=="object"&&typeof module<"u"?module.exports=o():typeof define=="function"&&define.amd?define(o):(n=typeof globalThis<"u"?globalThis:n||self,n.OpacityControl=o())})(this,function(){"use strict";var v=n=>{throw TypeError(n)};var f=(n,o,i)=>o.has(n)||v("Cannot "+i);var t=(n,o,i)=>(f(n,o,"read from private field"),i?i.call(n):o.get(n)),p=(n,o,i)=>o.has(n)?v("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(n):o.set(n,i),l=(n,o,i,s)=>(f(n,o,"write to private field"),s?s.call(n,i):o.set(n,i),i),y=(n,o,i)=>(f(n,o,"access private method"),i);var i,s,c,h,u,d,L,g,E,k;const n={baseLayers:{},overLayers:{},opacityControl:!1};class o{constructor(e){p(this,d);p(this,i);p(this,s);p(this,c);p(this,h);p(this,u);l(this,c,e.baseLayers??n.baseLayers),l(this,h,e.overLayers??n.overLayers),l(this,u,e.opacityControl??n.opacityControl)}onAdd(e){return l(this,i,e),y(this,d,k).call(this),t(this,s)}onRemove(){t(this,s).parentNode.removeChild(t(this,s)),l(this,i,void 0)}}return i=new WeakMap,s=new WeakMap,c=new WeakMap,h=new WeakMap,u=new WeakMap,d=new WeakSet,L=function(e){const r=Object.keys(t(this,c))[0],a=document.createElement("input");a.setAttribute("type","radio"),a.id=e,e===r?(a.checked=!0,t(this,i).setLayoutProperty(e,"visibility","visible")):t(this,i).setLayoutProperty(e,"visibility","none"),t(this,s).appendChild(a),a.addEventListener("change",C=>{C.target.checked=!0,t(this,i).setLayoutProperty(e,"visibility","visible"),Object.keys(t(this,c)).map(b=>{b!==C.target.id&&(document.getElementById(b).checked=!1,t(this,i).setLayoutProperty(b,"visibility","none"))})});const m=document.createElement("label");m.htmlFor=e,m.appendChild(document.createTextNode(t(this,c)[e])),t(this,s).appendChild(m)},g=function(e){const r=document.createElement("input");r.setAttribute("type","checkbox"),r.id=e,t(this,i).setLayoutProperty(e,"visibility","none"),t(this,s).appendChild(r),r.addEventListener("change",m=>{m.target.checked?t(this,i).setLayoutProperty(e,"visibility","visible"):t(this,i).setLayoutProperty(e,"visibility","none")});const a=document.createElement("label");a.htmlFor=e,a.appendChild(document.createTextNode(t(this,h)[e])),t(this,s).appendChild(a)},E=function(e){const r=document.createElement("input");r.type="range",r.min=String(0),r.max=String(100),r.value=String(100),t(this,s).appendChild(r),r.addEventListener("input",a=>{t(this,i).setPaintProperty(e,"raster-opacity",Number(a.target.value/100))})},k=function(){if(l(this,s,document.createElement("div")),t(this,s).className="maplibregl-ctrl maplibregl-ctrl-group",t(this,s).id="opacity-control",t(this,c)&&Object.keys(t(this,c)).map(e=>{const r=e,a=document.createElement("br");y(this,d,L).call(this,r),t(this,s).appendChild(a)}),t(this,c)&&t(this,h)){const e=document.createElement("hr");t(this,s).appendChild(e)}t(this,h)&&Object.keys(t(this,h)).map(e=>{const r=e,a=document.createElement("br");y(this,d,g).call(this,r),t(this,s).appendChild(a),t(this,u)&&(y(this,d,E).call(this,r),t(this,s).appendChild(a))})},o});
//# sourceMappingURL=maplibre-gl-opacity.umd.js.map