diff --git a/_experimental/layer_switcher_control.py b/_experimental/layer_switcher_control.py index c5acbf6f..41db5527 100644 --- a/_experimental/layer_switcher_control.py +++ b/_experimental/layer_switcher_control.py @@ -3,7 +3,7 @@ import json import webbrowser -from maplibre import Map, MapOptions, render_maplibregl +from maplibre import Layer, LayerType, Map, MapOptions, render_maplibregl from maplibre.basemaps import Carto from maplibre.controls import ( ControlPosition, @@ -12,6 +12,7 @@ NavigationControl, ScaleControl, ) +from maplibre.sources import GeoJSONSource from shiny.express import input, render, ui m = Map( @@ -23,23 +24,37 @@ pitch=40, ) ) +layer_id = "this-is-a-very-log-id-for-my-awesome-layer" +m.add_layer( + Layer( + type=LayerType.LINE, + id=layer_id, + source=GeoJSONSource( + data="https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart.geo.json" + ), + paint={"line-width": 4, "line-color": "red", "line-opacity": 0.55}, + ) +) m.add_control(NavigationControl()) m.add_control(ScaleControl(), ControlPosition.BOTTOM_LEFT) -# m.add_call( -# "addControl", -# "InfoBoxControl", -# { -# "cssText": "padding: 20px; font-size: 20px;font-family: monospace;", -# "content": "
And some text.
", -# }, -# ControlPosition.TOP_LEFT.value, -# ) +m.add_call( + "addControl", + "LayerOpacityControl", + { + "layerIds": ["water", layer_id], + "toggleLayers": True, + "flexDirection": None, + # "cssText": "padding: 20px; font-size: 20px;font-family: monospace;", + # "content": "And some text.
", + }, + ControlPosition.TOP_LEFT.value, +) m.add_control(InfoBoxControl(content="Toggle layers"), ControlPosition.TOP_LEFT) m.add_control( LayerSwitcherControl( - layer_ids=["water", "landcover"], + layer_ids=["water", layer_id], theme="default", # css_text="padding: 10px; border: 1px solid black; border-radius: 3x;font-size: 15px;", ), diff --git a/maplibre/srcjs/pywidget.css b/maplibre/srcjs/pywidget.css index 9acc22d2..66abc446 100644 --- a/maplibre/srcjs/pywidget.css +++ b/maplibre/srcjs/pywidget.css @@ -1 +1 @@ -.layer-switcher-ctrl{background-color:#fff}.layer-switcher-ctrl a{background-color:#fff;_color:#404040;color:#a9a9a9;display:block;margin:0;padding:5px 10px;text-decoration:none;border-bottom:1px solid black;text-align:center}.layer-switcher-ctrl a:hover{background-color:#f8f8f8;color:#404040}.layer-switcher-ctrl a.active{background-color:#3887be;color:#fff}.layer-switcher-ctrl a.active:hover{background:#3074a4}.layer-switcher-ctrl-simple{background-color:#fff}.layer-switcher-ctrl-simple a{background-color:#fff;color:#a9a9a9;display:block;margin:0;padding:5px 10px;text-decoration:none;border-bottom:1px solid black;text-align:center}.layer-switcher-ctrl-simple a:hover{background-color:#f8f8f8;color:#404040}.layer-switcher-ctrl-simple a.active{color:#404040}.layer-switcher-ctrl-simple a.active:hover{_background:#3074a4;color:#a9a9a9} +.layer-switcher-ctrl{background-color:#fff}.layer-switcher-ctrl a{background-color:#fff;_color:#404040;color:#a9a9a9;display:block;margin:0;padding:5px 10px;text-decoration:none;border-bottom:1px solid black;text-align:center}.layer-switcher-ctrl a:hover{background-color:#f8f8f8;color:#404040}.layer-switcher-ctrl a.active{background-color:#3887be;color:#fff}.layer-switcher-ctrl a.active:hover{background:#3074a4}.layer-switcher-ctrl-simple{background-color:#fff}.layer-switcher-ctrl-simple a{background-color:#fff;color:#a9a9a9;display:block;margin:0;padding:5px 10px;text-decoration:none;border-bottom:1px solid black;text-align:center}.layer-switcher-ctrl-simple a:hover{background-color:#f8f8f8;color:#404040}.layer-switcher-ctrl-simple a.active{color:#404040}.layer-switcher-ctrl-simple a.active:hover{_background:#3074a4;color:#a9a9a9}.layer-opacity-ctrl #menu{display:flex;flex-direction:column;align-items:center;border-bottom:1px solid black;padding-bottom:10px}.layer-opacity-ctrl a{background-color:#fff;color:#a9a9a9;border:0;text-decoration:none;text-align:center} diff --git a/maplibre/srcjs/pywidget.js b/maplibre/srcjs/pywidget.js index 562749a6..7ea36bba 100644 --- a/maplibre/srcjs/pywidget.js +++ b/maplibre/srcjs/pywidget.js @@ -1,7 +1,7 @@ -(()=>{var H=Math.pow,w=(t,e,r)=>new Promise((n,i)=>{var o=c=>{try{s(r.next(c))}catch(u){i(u)}},a=c=>{try{s(r.throw(c))}catch(u){i(u)}},s=c=>c.done?n(c.value):Promise.resolve(c.value).then(o,a);s((r=r.apply(t,e)).next())}),k=Uint8Array,I=Uint16Array,Xe=Int32Array,Ee=new k([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),Me=new k([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),Ye=new k([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),Te=function(t,e){for(var r=new I(31),n=0;n<31;++n)r[n]=e+=1<"?A=[y,d,b,g.pos,c,u,r]:A=[y,d,b,g.pos],u++,i.push(A),y==="#"||y==="^")n.push(A);else if(y==="/"){if(E=n.pop(),!E)throw new Error('Unopened section "'+d+'" at '+b);if(E[1]!==d)throw new Error('Unclosed section "'+E[1]+'" at '+b)}else y==="name"||y==="{"||y==="&"?s=!0:y==="="&&m(d)}if(l(),E=n.pop(),E)throw new Error('Unclosed section "'+E[1]+'" at '+g.pos);return Yt(Xt(i))}function Xt(t){for(var e=[],r,n,i=0,o=t.length;i0?n[n.length-1][4]:e;break;default:r.push(i)}return e}function Y(t){this.string=t,this.tail=t,this.pos=0}Y.prototype.eos=function(){return this.tail===""};Y.prototype.scan=function(e){var r=this.tail.match(e);if(!r||r.index!==0)return"";var n=r[0];return this.tail=this.tail.substring(n.length),this.pos+=n.length,n};Y.prototype.scanUntil=function(e){var r=this.tail.search(e),n;switch(r){case-1:n=this.tail,this.tail="";break;case 0:n="";break;default:n=this.tail.substring(0,r),this.tail=this.tail.substring(r)}return this.pos+=n.length,n};function V(t,e){this.view=t,this.cache={".":this.view},this.parent=e}V.prototype.push=function(e){return new V(e,this)};V.prototype.lookup=function(e){var r=this.cache,n;if(r.hasOwnProperty(e))n=r[e];else{for(var i=this,o,a,s,c=!1;i;){if(e.indexOf(".")>0)for(o=i.view,a=e.split("."),s=0;o!=null&&s "?u=this.renderPartial(s,r,n,o):c==="&"?u=this.unescapedValue(s,r):c==="name"?u=this.escapedValue(s,r,o):c==="text"&&(u=this.rawValue(s)),u!==void 0&&(a+=u);return a};D.prototype.renderSection=function(e,r,n,i,o){var a=this,s="",c=r.lookup(e[1]);function u(h){return a.render(h,r,n,o)}if(c){if(N(c))for(var l=0,f=c.length;l {var N=Math.pow,w=(t,e,r)=>new Promise((n,i)=>{var o=s=>{try{c(r.next(s))}catch(u){i(u)}},a=s=>{try{c(r.throw(s))}catch(u){i(u)}},c=s=>s.done?n(s.value):Promise.resolve(s.value).then(o,a);c((r=r.apply(t,e)).next())}),k=Uint8Array,H=Uint16Array,et=Int32Array,Me=new k([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),Te=new k([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),tt=new k([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),Se=function(t,e){for(var r=new H(31),n=0;n<31;++n)r[n]=e+=1< >1|(p&21845)<<1,P=(P&52428)>>2|(P&13107)<<2,P=(P&61680)>>4|(P&3855)<<4,ue[p]=((P&65280)>>8|(P&255)<<8)>>1;var P,p,W=function(t,e,r){for(var n=t.length,i=0,o=new H(e);i >s]=u}else for(c=new H(n),i=0;i >15-t[i]);return c},J=new k(288);for(p=0;p<144;++p)J[p]=8;var p;for(p=144;p<256;++p)J[p]=9;var p;for(p=256;p<280;++p)J[p]=7;var p;for(p=280;p<288;++p)J[p]=8;var p,Re=new k(32);for(p=0;p<32;++p)Re[p]=5;var p,it=W(J,9,1),ot=W(Re,5,1),ce=function(t){for(var e=t[0],r=1;r e&&(e=t[r]);return e},T=function(t,e,r){var n=e/8|0;return(t[n]|t[n+1]<<8)>>(e&7)&r},le=function(t,e){var r=e/8|0;return(t[r]|t[r+1]<<8|t[r+2]<<16)>>(e&7)},at=function(t){return(t+7)/8|0},st=function(t,e,r){(e==null||e<0)&&(e=0),(r==null||r>t.length)&&(r=t.length);var n=new k(r-e);return n.set(t.subarray(e,r)),n},ct=["unexpected EOF","invalid block type","invalid length/literal","invalid distance","stream finished","no stream handler",,"no callback","invalid UTF-8 data","extra field too long","date not in range 1980-2099","filename too long","stream finishing","invalid zip data"],D=function(t,e,r){var n=new Error(e||ct[t]);if(n.code=t,Error.captureStackTrace&&Error.captureStackTrace(n,D),!r)throw n;return n},de=function(t,e,r,n){var i=t.length,o=n?n.length:0;if(!i||e.f&&!e.l)return r||new k(0);var a=!r||e.i!=2,c=e.i;r||(r=new k(i*3));var s=function(Le){var De=r.length;if(Le>De){var ke=new k(Math.max(De*2,Le));ke.set(r),r=ke}},u=e.f||0,l=e.p||0,f=e.b||0,h=e.l,y=e.d,m=e.m,g=e.n,b=i*8;do{if(!h){u=T(t,l,1);var v=T(t,l+1,3);if(l+=3,v)if(v==1)h=it,y=ot,m=9,g=5;else if(v==2){var E=T(t,l,31)+257,R=T(t,l+10,15)+4,ee=E+T(t,l+5,31)+1;l+=14;for(var x=new k(ee),ne=new k(19),C=0;C >4;if(d<16)x[C++]=d;else{var $=0,te=0;for(d==16?(te=3+T(t,l,3),l+=2,$=x[C-1]):d==17?(te=3+T(t,l,7),l+=3):d==18&&(te=11+T(t,l,127),l+=7);te--;)x[C++]=$}}var be=x.subarray(0,E),M=x.subarray(E);m=ce(be),g=ce(M),h=W(be,m,1),y=W(M,g,1)}else D(1);else{var d=at(l)+4,O=t[d-4]|t[d-3]<<8,A=d+O;if(A>i){c&&D(0);break}a&&s(f+O),r.set(t.subarray(d,A),f),e.b=f+=O,e.p=l=A*8,e.f=u;continue}if(l>b){c&&D(0);break}}a&&s(f+131072);for(var Xe=(1< >4;if(l+=$&15,l>b){c&&D(0);break}if($||D(2),z<256)r[f++]=z;else if(z==256){ie=l,h=null;break}else{var xe=z-254;if(z>264){var C=z-257,Z=Me[C];xe=T(t,l,(1< >4;oe||D(3),l+=oe&15;var M=nt[ae];if(ae>3){var Z=Te[ae];M+=le(t,l)&(1< b){c&&D(0);break}a&&s(f+131072);var se=f+xe;if(f >3&1)+(e>>4&1);n>0;n-=!t[r++]);return r+(e&2)},ft=function(t){var e=t.length;return(t[e-4]|t[e-3]<<8|t[e-2]<<16|t[e-1]<<24)>>>0},ht=function(t,e){return((t[0]&15)!=8||t[0]>>4>7||(t[0]<<8|t[1])%31)&&D(6,"invalid zlib data"),(t[1]>>5&1)==+!e&&D(6,"invalid zlib data: "+(t[1]&32?"need":"unexpected")+" dictionary"),(t[1]>>3&4)+2};function dt(t,e){return de(t,{i:2},e&&e.out,e&&e.dictionary)}function pt(t,e){var r=ut(t);return r+8>t.length&&D(6,"invalid gzip data"),de(t.subarray(r,-8),{i:2},e&&e.out||new k(ft(t)),e&&e.dictionary)}function gt(t,e){return de(t.subarray(ht(t,e&&e.dictionary),-4),{i:2},e&&e.out,e&&e.dictionary)}function fe(t,e){return t[0]==31&&t[1]==139&&t[2]==8?pt(t,e):(t[0]&15)!=8||t[0]>>4>7||(t[0]<<8|t[1])%31?dt(t,e):gt(t,e)}var yt=typeof TextDecoder<"u"&&new TextDecoder,vt=0;try{yt.decode(lt,{stream:!0}),vt=1}catch{}var $e=(t,e)=>t*N(2,e),j=(t,e)=>Math.floor(t/N(2,e)),re=(t,e)=>$e(t.getUint16(e+1,!0),8)+t.getUint8(e),ze=(t,e)=>$e(t.getUint32(e+2,!0),16)+t.getUint16(e,!0),mt=(t,e,r,n,i)=>{if(t!==n.getUint8(i))return t-n.getUint8(i);let o=re(n,i+1);if(e!==o)return e-o;let a=re(n,i+4);return r!==a?r-a:0},wt=(t,e,r,n)=>{let i=Be(t,e|128,r,n);return i?{z:e,x:r,y:n,offset:i[0],length:i[1],isDir:!0}:null},Ce=(t,e,r,n)=>{let i=Be(t,e,r,n);return i?{z:e,x:r,y:n,offset:i[0],length:i[1],isDir:!1}:null},Be=(t,e,r,n)=>{let i=0,o=t.byteLength/17-1;for(;i<=o;){let a=o+i>>1,c=mt(e,r,n,t,a*17);if(c>0)i=a+1;else if(c<0)o=a-1;else return[ze(t,a*17+7),t.getUint32(a*17+13,!0)]}return null},bt=(t,e)=>t.isDir&&!e.isDir?1:!t.isDir&&e.isDir?-1:t.z!==e.z?t.z-e.z:t.x!==e.x?t.x-e.x:t.y-e.y,He=(t,e)=>{let r=t.getUint8(e*17);return{z:r&127,x:re(t,e*17+1),y:re(t,e*17+4),offset:ze(t,e*17+7),length:t.getUint32(e*17+13,!0),isDir:r>>7===1}},Ue=t=>{let e=[],r=new DataView(t);for(let n=0;n {t.sort(bt);let e=new ArrayBuffer(17*t.length),r=new Uint8Array(e);for(let n=0;n >8&255,r[n*17+3]=i.x>>16&255,r[n*17+4]=i.y&255,r[n*17+5]=i.y>>8&255,r[n*17+6]=i.y>>16&255,r[n*17+7]=i.offset&255,r[n*17+8]=j(i.offset,8)&255,r[n*17+9]=j(i.offset,16)&255,r[n*17+10]=j(i.offset,24)&255,r[n*17+11]=j(i.offset,32)&255,r[n*17+12]=j(i.offset,48)&255,r[n*17+13]=i.length&255,r[n*17+14]=i.length>>8&255,r[n*17+15]=i.length>>16&255,r[n*17+16]=i.length>>24&255}return e},_t=(t,e)=>{if(t.byteLength<17)return null;let r=t.byteLength/17,n=He(t,r-1);if(n.isDir){let i=n.z,o=e.z-i,a=Math.trunc(e.x/(1< (e,r)=>{if(r instanceof AbortController)return t(e,r);let n=new AbortController;return t(e,n).then(i=>r(void 0,i.data,i.cacheControl||"",i.expires||""),i=>r(i)).catch(i=>r(i)),{cancel:()=>n.abort()}},Ie=class{constructor(){this.tilev4=(t,e)=>w(this,null,function*(){if(t.type==="json"){let f=t.url.substr(10),h=this.tiles.get(f);h||(h=new Ee(f),this.tiles.set(f,h));let y=yield h.getHeader();return{data:{tiles:[`${t.url}/{z}/{x}/{y}`],minzoom:y.minZoom,maxzoom:y.maxZoom,bounds:[y.minLon,y.minLat,y.maxLon,y.maxLat]}}}let r=new RegExp(/pmtiles:\/\/(.+)\/(\d+)\/(\d+)\/(\d+)/),n=t.url.match(r);if(!n)throw new Error("Invalid PMTiles protocol URL");let i=n[1],o=this.tiles.get(i);o||(o=new Ee(i),this.tiles.set(i,o));let a=n[2],c=n[3],s=n[4],u=yield o.getHeader(),l=yield o?.getZxy(+a,+c,+s,e.signal);return l?{data:new Uint8Array(l.data),cacheControl:l.cacheControl,expires:l.expires}:u.tileType===1?{data:new Uint8Array}:{data:null}}),this.tile=kt(this.tilev4),this.tiles=new Map}add(t){this.tiles.set(t.source.getKey(),t)}get(t){return this.tiles.get(t)}};function B(t,e){return(e>>>0)*4294967296+(t>>>0)}function Ct(t,e){let r=e.buf,n=r[e.pos++],i=(n&112)>>4;if(n<128||(n=r[e.pos++],i|=(n&127)<<3,n<128)||(n=r[e.pos++],i|=(n&127)<<10,n<128)||(n=r[e.pos++],i|=(n&127)<<17,n<128)||(n=r[e.pos++],i|=(n&127)<<24,n<128)||(n=r[e.pos++],i|=(n&1)<<31,n<128))return B(t,i);throw new Error("Expected varint not more than 10 bytes")}function F(t){let e=t.buf,r=e[t.pos++],n=r&127;return r<128||(r=e[t.pos++],n|=(r&127)<<7,r<128)||(r=e[t.pos++],n|=(r&127)<<14,r<128)||(r=e[t.pos++],n|=(r&127)<<21,r<128)?n:(r=e[t.pos],n|=(r&15)<<28,Ct(n,t))}function Ut(t,e,r,n){if(n===0){r===1&&(e[0]=t-1-e[0],e[1]=t-1-e[1]);let i=e[0];e[0]=e[1],e[1]=i}}var Et=[0,1,5,21,85,341,1365,5461,21845,87381,349525,1398101,5592405,22369621,89478485,357913941,1431655765,5726623061,22906492245,91625968981,366503875925,1466015503701,5864062014805,23456248059221,93824992236885,375299968947541,0x5555555555555];function Mt(t,e,r){if(t>26)throw Error("Tile zoom level exceeds max safe number limit (26)");if(e>N(2,t)-1||r>N(2,t)-1)throw Error("tile x/y outside zoom level bounds");let n=Et[t],i=N(2,t),o=0,a=0,c=0,s=[e,r],u=i/2;for(;u>0;)o=(s[0]&u)>0?1:0,a=(s[1]&u)>0?1:0,c+=u*u*(3*o^a),Ut(u,s,o,a),u=u/2;return n+c}function Ve(t,e){return w(this,null,function*(){if(e===1||e===0)return t;if(e===2){if(typeof globalThis.DecompressionStream>"u")return fe(new Uint8Array(t));let r=new Response(t).body;if(!r)throw Error("Failed to read response stream");let n=r.pipeThrough(new globalThis.DecompressionStream("gzip"));return new Response(n).arrayBuffer()}throw Error("Compression method not supported")})}var Tt=127;function St(t,e){let r=0,n=t.length-1;for(;r<=n;){let i=n+r>>1,o=e-t[i].tileId;if(o>0)r=i+1;else if(o<0)n=i-1;else return t[i]}return n>=0&&(t[n].runLength===0||e-t[n].tileId =300)throw Error(`Bad response code: ${s.status}`);let l=s.headers.get("Content-Length");if(s.status===200&&(!l||+l>e))throw i&&i.abort(),Error("Server returned no content-length header or content-length exceeding request. Check that your storage backend supports HTTP Byte Serving.");return{data:yield s.arrayBuffer(),etag:u||void 0,cacheControl:s.headers.get("Cache-Control")||void 0,expires:s.headers.get("Expires")||void 0}})}};function S(t,e){let r=t.getUint32(e+4,!0),n=t.getUint32(e+0,!0);return r*N(2,32)+n}function Pt(t,e){let r=new DataView(t),n=r.getUint8(7);if(n>3)throw Error(`Archive is spec version ${n} but this library supports up to spec version 3`);return{specVersion:n,rootDirectoryOffset:S(r,8),rootDirectoryLength:S(r,16),jsonMetadataOffset:S(r,24),jsonMetadataLength:S(r,32),leafDirectoryOffset:S(r,40),leafDirectoryLength:S(r,48),tileDataOffset:S(r,56),tileDataLength:S(r,64),numAddressedTiles:S(r,72),numTileEntries:S(r,80),numTileContents:S(r,88),clustered:r.getUint8(96)===1,internalCompression:r.getUint8(97),tileCompression:r.getUint8(98),tileType:r.getUint8(99),minZoom:r.getUint8(100),maxZoom:r.getUint8(101),minLon:r.getInt32(102,!0)/1e7,minLat:r.getInt32(106,!0)/1e7,maxLon:r.getInt32(110,!0)/1e7,maxLat:r.getInt32(114,!0)/1e7,centerZoom:r.getUint8(118),centerLon:r.getInt32(119,!0)/1e7,centerLat:r.getInt32(123,!0)/1e7,etag:e}}function Ke(t){let e={buf:new Uint8Array(t),pos:0},r=F(e),n=[],i=0;for(let o=0;o 0?n[o].offset=n[o-1].offset+n[o-1].length:n[o].offset=a-1}return n}function At(t){let e=new DataView(t);return e.getUint16(2,!0)===2?(console.warn("PMTiles spec version 2 has been deprecated; please see github.com/protomaps/PMTiles for tools to upgrade"),2):e.getUint16(2,!0)===1?(console.warn("PMTiles spec version 1 has been deprecated; please see github.com/protomaps/PMTiles for tools to upgrade"),1):3}var he=class extends Error{};function Rt(t,e){return w(this,null,function*(){let r=yield t.getBytes(0,16384);if(new DataView(r.data).getUint16(0,!0)!==19792)throw new Error("Wrong magic number for PMTiles archive");if(At(r.data)<3)return[yield Ne.getHeader(t)];let i=r.data.slice(0,Tt),o=Pt(i,r.etag),a=r.data.slice(o.rootDirectoryOffset,o.rootDirectoryOffset+o.rootDirectoryLength),c=`${t.getKey()}|${o.etag||""}|${o.rootDirectoryOffset}|${o.rootDirectoryLength}`,s=Ke(yield e(a,o.internalCompression));return[o,[c,s.length,s]]})}function $t(t,e,r,n,i){return w(this,null,function*(){let o=yield t.getBytes(r,n,void 0,i.etag),a=yield e(o.data,i.internalCompression),c=Ke(a);if(c.length===0)throw new Error("Empty directory is invalid");return c})}var zt=class{constructor(t=100,e=!0,r=Ve){this.cache=new Map,this.invalidations=new Map,this.maxCacheEntries=t,this.counter=1,this.decompress=r}getHeader(t){return w(this,null,function*(){let e=t.getKey(),r=this.cache.get(e);if(r)return r.lastUsed=this.counter++,yield r.data;let n=new Promise((i,o)=>{Rt(t,this.decompress).then(a=>{a[1]&&this.cache.set(a[1][0],{lastUsed:this.counter++,data:Promise.resolve(a[1][2])}),i(a[0]),this.prune()}).catch(a=>{o(a)})});return this.cache.set(e,{lastUsed:this.counter++,data:n}),n})}getDirectory(t,e,r,n){return w(this,null,function*(){let i=`${t.getKey()}|${n.etag||""}|${e}|${r}`,o=this.cache.get(i);if(o)return o.lastUsed=this.counter++,yield o.data;let a=new Promise((c,s)=>{$t(t,this.decompress,e,r,n).then(u=>{c(u),this.prune()}).catch(u=>{s(u)})});return this.cache.set(i,{lastUsed:this.counter++,data:a}),a})}getArrayBuffer(t,e,r,n){return w(this,null,function*(){let i=`${t.getKey()}|${n.etag||""}|${e}|${r}`,o=this.cache.get(i);if(o)return o.lastUsed=this.counter++,yield o.data;let a=new Promise((c,s)=>{t.getBytes(e,r,void 0,n.etag).then(u=>{c(u.data),this.cache.has(i),this.prune()}).catch(u=>{s(u)})});return this.cache.set(i,{lastUsed:this.counter++,data:a}),a})}prune(){if(this.cache.size>=this.maxCacheEntries){let t=1/0,e;this.cache.forEach((r,n)=>{r.lastUsed {this.getHeader(t).then(o=>{n(),this.invalidations.delete(e)}).catch(o=>{i(o)})});this.invalidations.set(e,r)})}},Ee=class{constructor(t,e,r){typeof t=="string"?this.source=new Ot(t):this.source=t,r?this.decompress=r:this.decompress=Ve,e?this.cache=e:this.cache=new zt}getHeader(){return w(this,null,function*(){return yield this.cache.getHeader(this.source)})}getZxyAttempt(t,e,r,n){return w(this,null,function*(){let i=Mt(t,e,r),o=yield this.cache.getHeader(this.source);if(o.specVersion<3)return Ne.getZxy(o,this.source,this.cache,t,e,r,n);if(t o.maxZoom)return;let a=o.rootDirectoryOffset,c=o.rootDirectoryLength;for(let s=0;s<=3;s++){let u=yield this.cache.getDirectory(this.source,a,c,o),l=St(u,i);if(l){if(l.runLength>0){let f=yield this.source.getBytes(o.tileDataOffset+l.offset,l.length,n,o.etag);return{data:yield this.decompress(f.data,o.tileCompression),cacheControl:f.cacheControl,expires:f.expires}}a=o.leafDirectoryOffset+l.offset,c=l.length}else return}throw Error("Maximum directory depth exceeded")})}getZxy(t,e,r,n){return w(this,null,function*(){try{return yield this.getZxyAttempt(t,e,r,n)}catch(i){if(i instanceof he)return this.cache.invalidate(this.source),yield this.getZxyAttempt(t,e,r,n);throw i}})}getMetadataAttempt(){return w(this,null,function*(){let t=yield this.cache.getHeader(this.source),e=yield this.source.getBytes(t.jsonMetadataOffset,t.jsonMetadataLength,void 0,t.etag),r=yield this.decompress(e.data,t.internalCompression),n=new TextDecoder("utf-8");return JSON.parse(n.decode(r))})}getMetadata(){return w(this,null,function*(){try{return yield this.getMetadataAttempt()}catch(t){if(t instanceof he)return this.cache.invalidate(this.source),yield this.getMetadataAttempt();throw t}})}};var q=class{constructor(e){this._options=e||{}}onAdd(e){return this._map=e,this._container=document.createElement("div"),this._container.className="maplibregl-ctrl maplibregl-ctrl-group",this._container.style.cssText=this._options.cssText||"padding: 10px;",this._container.innerHTML=this._options.content||"We out here.",this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}};var Bt={default:"layer-switcher-ctrl",simple:"layer-switcher-ctrl-simple"};function Ht(t,e){let r=document.createElement("div");r.id="layer-switcher-menu";for(let n of t){let i=document.createElement("a");i.id=n,i.href="#",i.textContent=n;let o=e.getLayoutProperty(n,"visibility");(typeof o>"u"||o==="visible")&&(i.className="active"),i.onclick=function(a){let c=this.textContent,s=e.getLayoutProperty(c,"visibility");if(console.log(c,s),typeof s>"u"||s==="visible"){e.setLayoutProperty(c,"visibility","none"),this.className="";return}e.setLayoutProperty(c,"visibility","visible"),this.className="active"},r.appendChild(i)}return r}var G=class{constructor(e){this._options=e}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.classList.add("maplibregl-ctrl"),this._container.classList.add(Bt[this._options.theme||"default"]),this._container.style.cssText=this._options.cssText||"";let r=this._options.layerIds;return this._container.appendChild(Ht(r,e)),this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}getDefaultPosition(){return"top-left"}};var Nt=Object.prototype.toString,V=Array.isArray||function(e){return Nt.call(e)==="[object Array]"};function ge(t){return typeof t=="function"}function It(t){return V(t)?"array":typeof t}function pe(t){return t.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g,"\\$&")}function Ze(t,e){return t!=null&&typeof t=="object"&&e in t}function Vt(t,e){return t!=null&&typeof t!="object"&&t.hasOwnProperty&&t.hasOwnProperty(e)}var Kt=RegExp.prototype.test;function Zt(t,e){return Kt.call(t,e)}var jt=/\S/;function Ft(t){return!Zt(jt,t)}var Wt={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};function Jt(t){return String(t).replace(/[&<>"'`=\/]/g,function(r){return Wt[r]})}var qt=/\s*/,Gt=/\s+/,je=/\s*=/,Xt=/\s*\}/,Yt=/#|\^|\/|>|\{|&|=|!/;function Qt(t,e){if(!t)return[];var r=!1,n=[],i=[],o=[],a=!1,c=!1,s="",u=0;function l(){if(a&&!c)for(;o.length;)delete i[o.pop()];else o=[];a=!1,c=!1}var f,h,y;function m(x){if(typeof x=="string"&&(x=x.split(Gt,2)),!V(x)||x.length!==2)throw new Error("Invalid tags: "+x);f=new RegExp(pe(x[0])+"\\s*"),h=new RegExp("\\s*"+pe(x[1])),y=new RegExp("\\s*"+pe("}"+x[1]))}m(e||U.tags);for(var g=new Y(t),b,v,d,O,A,E;!g.eos();){if(b=g.pos,d=g.scanUntil(f),d)for(var R=0,ee=d.length;R "?A=[v,d,b,g.pos,s,u,r]:A=[v,d,b,g.pos],u++,i.push(A),v==="#"||v==="^")n.push(A);else if(v==="/"){if(E=n.pop(),!E)throw new Error('Unopened section "'+d+'" at '+b);if(E[1]!==d)throw new Error('Unclosed section "'+E[1]+'" at '+b)}else v==="name"||v==="{"||v==="&"?c=!0:v==="="&&m(d)}if(l(),E=n.pop(),E)throw new Error('Unclosed section "'+E[1]+'" at '+g.pos);return tr(er(i))}function er(t){for(var e=[],r,n,i=0,o=t.length;i 0?n[n.length-1][4]:e;break;default:r.push(i)}return e}function Y(t){this.string=t,this.tail=t,this.pos=0}Y.prototype.eos=function(){return this.tail===""};Y.prototype.scan=function(e){var r=this.tail.match(e);if(!r||r.index!==0)return"";var n=r[0];return this.tail=this.tail.substring(n.length),this.pos+=n.length,n};Y.prototype.scanUntil=function(e){var r=this.tail.search(e),n;switch(r){case-1:n=this.tail,this.tail="";break;case 0:n="";break;default:n=this.tail.substring(0,r),this.tail=this.tail.substring(r)}return this.pos+=n.length,n};function I(t,e){this.view=t,this.cache={".":this.view},this.parent=e}I.prototype.push=function(e){return new I(e,this)};I.prototype.lookup=function(e){var r=this.cache,n;if(r.hasOwnProperty(e))n=r[e];else{for(var i=this,o,a,c,s=!1;i;){if(e.indexOf(".")>0)for(o=i.view,a=e.split("."),c=0;o!=null&&c "?u=this.renderPartial(c,r,n,o):s==="&"?u=this.unescapedValue(c,r):s==="name"?u=this.escapedValue(c,r,o):s==="text"&&(u=this.rawValue(c)),u!==void 0&&(a+=u);return a};_.prototype.renderSection=function(e,r,n,i,o){var a=this,c="",s=r.lookup(e[1]);function u(h){return a.render(h,r,n,o)}if(s){if(V(s))for(var l=0,f=s.length;l 0||!n)&&(o[a]=i+o[a]);return o.join(` -`)};D.prototype.renderPartial=function(e,r,n,i){if(n){var o=this.getConfigTags(i),a=pe(n)?n(e[1]):n[e[1]];if(a!=null){var s=e[6],c=e[5],u=e[4],l=a;c==0&&u&&(l=this.indentPartial(a,u,s));var f=this.parse(l,o);return this.renderTokens(f,r,n,l,i)}}};D.prototype.unescapedValue=function(e,r){var n=r.lookup(e[1]);if(n!=null)return n};D.prototype.escapedValue=function(e,r,n){var i=this.getConfigEscape(n)||C.escape,o=r.lookup(e[1]);if(o!=null)return typeof o=="number"&&i===C.escape?String(o):i(o)};D.prototype.rawValue=function(e){return e[1]};D.prototype.getConfigTags=function(e){return N(e)?e:e&&typeof e=="object"?e.tags:void 0};D.prototype.getConfigEscape=function(e){if(e&&typeof e=="object"&&!N(e))return e.escape};var C={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(t){X.templateCache=t},get templateCache(){return X.templateCache}},X=new D;C.clearCache=function(){return X.clearCache()};C.parse=function(e,r){return X.parse(e,r)};C.render=function(e,r,n,i){if(typeof e!="string")throw new TypeError('Invalid template! Template should be a "string" but "'+Bt(e)+'" was given as the first argument for mustache#render(template, view, partials)');return X.render(e,r,n,i)};C.escape=jt;C.Scanner=Y;C.Context=V;C.Writer=D;var ge=C;function ve(t,e,r){return r!==null?ge.render(r,t.properties):e===null?Object.keys(t.properties).map(i=>`${i}: ${t.properties[i]}`).join(""):t.properties[e]}function je(t,e){let r=new maplibregl.Popup({closeOnClick:!1,closeButton:!1});return t.on("mouseout",n=>r.remove()),({coordinate:n,object:i})=>{i?(r.setHTML(ge.render(e,i)).setLngLat(n),r.addTo(t)):r.remove()}}var Qt=new He;maplibregl.addProtocol("pmtiles",Qt.tile);maplibregl.LayerSwitcherControl=G;maplibregl.InfoBoxControl=q;function er(){if(typeof deck>"u")return;let t=new deck.JSONConfiguration({classes:deck});return new deck.JSONConverter({configuration:t})}typeof MapboxDraw<"u"&&(MapboxDraw.constants.classes.CONTROL_BASE="maplibregl-ctrl",MapboxDraw.constants.classes.CONTROL_PREFIX="maplibregl-ctrl-",MapboxDraw.constants.classes.CONTROL_GROUP="maplibregl-ctrl-group");var K=class{constructor(e){this._id=e.container,this._map=new maplibregl.Map(e),this._map.on("mouseover",()=>{this._map.getCanvas().style.cursor="pointer"}),this._map.on("mouseout",()=>{this._map.getCanvas().style.cursor=""}),this._JSONConverter=er()}getMap(){return this._map}applyMapMethod(e,r){this._map[e](...r)}addControl(e,r,n){this._map.addControl(new maplibregl[e](r),n)}addMarker({lngLat:e,popup:r,options:n}){let i=new maplibregl.Marker(n).setLngLat(e);if(r){let o=new maplibregl.Popup(r.options).setHTML(r.text);i.setPopup(o)}i.addTo(this._map)}addLayer(e,r){this._map.addLayer(e,r),typeof Shiny<"u"&&this._map.on("click",e.id,n=>{console.log(n,n.features[0]);let i=e.id.replaceAll("-","_"),o=`${this._id}_layer_${i}`,a={props:n.features[0].properties,layer_id:e.id};console.log(o,a),Shiny.onInputChange(o,a)})}addPopup(e,r=null,n=null){let i={closeButton:!1},o=new maplibregl.Popup(i);this._map.on("click",e,a=>{let s=a.features[0],c=ve(s,r,n);o.setLngLat(a.lngLat).setHTML(c).addTo(this._map)})}addTooltip(e,r=null,n=null){let i={closeButton:!1,closeOnClick:!1},o=new maplibregl.Popup(i);this._map.on("mousemove",e,a=>{let s=a.features[0],c=ve(s,r,n);o.setLngLat(a.lngLat).setHTML(c).addTo(this._map)}),this._map.on("mouseleave",e,()=>{o.remove()})}setSourceData(e,r){this._map.getSource(e).setData(r)}addDeckOverlay(e,r=null){if(typeof this._JSONConverter>"u"){console.log("deck or JSONConverter is undefined");return}let n=this._convertDeckLayers(e,r);this._deckOverlay=new deck.MapboxOverlay({interleaved:!0,layers:n}),this._map.addControl(this._deckOverlay)}_convertDeckLayers(e,r=null){return e.map(n=>{let i=r&&typeof r=="object"?r[n.id]:r,o=je(this._map,i);return n.onHover=({layer:a,coordinate:s,object:c})=>{if(i&&o({coordinate:s,object:c}),typeof Shiny<"u"){let u=`${this._id}_layer_${n.id}`;Shiny.onInputChange(u,c)}},this._JSONConverter.convert(n)})}setDeckLayers(e,r=null){console.log("Updating Deck.GL layers");let n=this._convertDeckLayers(e,r);this._deckOverlay.setProps({layers:n})}addMapboxDraw(e,r,n=null){let i=new MapboxDraw(e);this._map.addControl(i,r),n&&i.add(n),typeof Shiny<"u"&&this._map.on("draw.selectionchange",o=>{let a=`${this._id}_draw_features_selected`,s={features:o.features,random:Math.random()};console.log(a,s),Shiny.onInputChange(a,s)})}render(e){e.forEach(([r,n])=>{if(["addLayer","addPopup","addTooltip","addMarker","addPopup","addControl","setSourceData","addDeckOverlay","setDeckLayers","addMapboxDraw"].includes(r)){console.log("Custom method",r,n),this[r](...n);return}console.log("Map method",r),this.applyMapMethod(r,n)})}};var tr="0.1.0";console.log("pymaplibregl",tr);typeof Shiny>"u"&&(window.pymaplibregl=function({mapOptions:t,calls:e}){let r="pymaplibregl",n=document.getElementById(r),i=new K(Object.assign({container:n.id},t));i.getMap().on("load",()=>{i.render(e)})});if(typeof Shiny<"u"){class t extends Shiny.OutputBinding{find(r){return r.find(".shiny-maplibregl-output")}renderValue(r,n){console.log("id:",r.id,"payload:",n);let i=window._maplibreWidget=new K(Object.assign({container:r.id},n.mapData.mapOptions)),o=i.getMap();o.on("load",()=>{i.render(n.mapData.calls)}),o.on("click",s=>{console.log(s);let c=`${r.id}`,u={coords:s.lngLat,point:s.point};console.log(c,u),Shiny.onInputChange(c,u)});let a=`pymaplibregl-${r.id}`;console.log(a),Shiny.addCustomMessageHandler(a,({id:s,calls:c})=>{console.log(s,c),i.render(c)})}}Shiny.outputBindings.register(new t,"shiny-maplibregl-output")}})(); +`)};_.prototype.renderPartial=function(e,r,n,i){if(n){var o=this.getConfigTags(i),a=ge(n)?n(e[1]):n[e[1]];if(a!=null){var c=e[6],s=e[5],u=e[4],l=a;s==0&&u&&(l=this.indentPartial(a,u,c));var f=this.parse(l,o);return this.renderTokens(f,r,n,l,i)}}};_.prototype.unescapedValue=function(e,r){var n=r.lookup(e[1]);if(n!=null)return n};_.prototype.escapedValue=function(e,r,n){var i=this.getConfigEscape(n)||U.escape,o=r.lookup(e[1]);if(o!=null)return typeof o=="number"&&i===U.escape?String(o):i(o)};_.prototype.rawValue=function(e){return e[1]};_.prototype.getConfigTags=function(e){return V(e)?e:e&&typeof e=="object"?e.tags:void 0};_.prototype.getConfigEscape=function(e){if(e&&typeof e=="object"&&!V(e))return e.escape};var U={name:"mustache.js",version:"4.2.0",tags:["{{","}}"],clearCache:void 0,escape:void 0,parse:void 0,render:void 0,Scanner:void 0,Context:void 0,Writer:void 0,set templateCache(t){X.templateCache=t},get templateCache(){return X.templateCache}},X=new _;U.clearCache=function(){return X.clearCache()};U.parse=function(e,r){return X.parse(e,r)};U.render=function(e,r,n,i){if(typeof e!="string")throw new TypeError('Invalid template! Template should be a "string" but "'+It(e)+'" was given as the first argument for mustache#render(template, view, partials)');return X.render(e,r,n,i)};U.escape=Jt;U.Scanner=Y;U.Context=I;U.Writer=_;var ye=U;function ve(t,e,r){return r!==null?ye.render(r,t.properties):e===null?Object.keys(t.properties).map(i=>`${i}: ${t.properties[i]}`).join(""):t.properties[e]}function Fe(t,e){let r=new maplibregl.Popup({closeOnClick:!1,closeButton:!1});return t.on("mouseout",n=>r.remove()),({coordinate:n,object:i})=>{i?(r.setHTML(ye.render(e,i)).setLngLat(n),r.addTo(t)):r.remove()}}function We(t,e){let r=document.createElement("a");r.id=e,r.href="#",r.textContent=e;let n=t.getLayoutProperty(e,"visibility");return(typeof n>"u"||n==="visible")&&(r.className="active"),r.onclick=function(i){let o=this.textContent,a=t.getLayoutProperty(o,"visibility");if(console.log(o,a),typeof a>"u"||a==="visible"){t.setLayoutProperty(o,"visibility","none"),this.className="";return}t.setLayoutProperty(o,"visibility","visible"),this.className="active"},r}function rr(t){let e=document.createElement("span");return e.innerHTML=t,e}function Je(t,e){return`${t.getLayer(e).type}-opacity`}function nr(t,e,r=!1,n="column"){let i=r?We(t,e):rr(e),o=document.createElement("input");o.type="range",o.min="0",o.max="1.0",o.step="0.1";let a=Je(t,e),c=t.getPaintProperty(e,a)||1;console.log("currentValue",c),o.value=c,o.style.width="100px",o.oninput=function(u){let l=Je(t,e),f=parseFloat(this.value);console.log(l,f),t.setPaintProperty(e,l,f)};let s=document.createElement("div");return s.id="menu",s.style.flexDirection=n,s.style.flexDirection==="row"?(s.appendChild(o),s.appendChild(i),s):(s.appendChild(i),s.appendChild(o),s)}var Q=class{constructor(e){this._options=e}onAdd(e){this._map=e,this._container=document.createElement("div"),this._container.className="maplibregl-ctrl maplibregl-ctrl-group layer-switcher-ctrl-simple layer-opacity-ctrl",this._container.style.cssText=this._options.cssText||"padding: 5px;";let r=this._options.layerIds||[],n=this._options.toggleLayers||!1,i=this._options.flexDirection||"column";for(let o of r){let a=nr(e,o,n,i);this._container.appendChild(a)}return this._container}onRemove(){this._container.parentNode.removeChild(this._container),this._map=void 0}};var ir=new Ie;maplibregl.addProtocol("pmtiles",ir.tile);maplibregl.LayerSwitcherControl=G;maplibregl.InfoBoxControl=q;maplibregl.LayerOpacityControl=Q;function or(){if(typeof deck>"u")return;let t=new deck.JSONConfiguration({classes:deck});return new deck.JSONConverter({configuration:t})}typeof MapboxDraw<"u"&&(MapboxDraw.constants.classes.CONTROL_BASE="maplibregl-ctrl",MapboxDraw.constants.classes.CONTROL_PREFIX="maplibregl-ctrl-",MapboxDraw.constants.classes.CONTROL_GROUP="maplibregl-ctrl-group");var K=class{constructor(e){this._id=e.container,this._map=new maplibregl.Map(e),this._map.on("mouseover",()=>{this._map.getCanvas().style.cursor="pointer"}),this._map.on("mouseout",()=>{this._map.getCanvas().style.cursor=""}),this._JSONConverter=or()}getMap(){return this._map}applyMapMethod(e,r){this._map[e](...r)}addControl(e,r,n){this._map.addControl(new maplibregl[e](r),n)}addMarker({lngLat:e,popup:r,options:n}){let i=new maplibregl.Marker(n).setLngLat(e);if(r){let o=new maplibregl.Popup(r.options).setHTML(r.text);i.setPopup(o)}i.addTo(this._map)}addLayer(e,r){this._map.addLayer(e,r),typeof Shiny<"u"&&this._map.on("click",e.id,n=>{console.log(n,n.features[0]);let i=e.id.replaceAll("-","_"),o=`${this._id}_layer_${i}`,a={props:n.features[0].properties,layer_id:e.id};console.log(o,a),Shiny.onInputChange(o,a)})}addPopup(e,r=null,n=null){let i={closeButton:!1},o=new maplibregl.Popup(i);this._map.on("click",e,a=>{let c=a.features[0],s=ve(c,r,n);o.setLngLat(a.lngLat).setHTML(s).addTo(this._map)})}addTooltip(e,r=null,n=null){let i={closeButton:!1,closeOnClick:!1},o=new maplibregl.Popup(i);this._map.on("mousemove",e,a=>{let c=a.features[0],s=ve(c,r,n);o.setLngLat(a.lngLat).setHTML(s).addTo(this._map)}),this._map.on("mouseleave",e,()=>{o.remove()})}setSourceData(e,r){this._map.getSource(e).setData(r)}addDeckOverlay(e,r=null){if(typeof this._JSONConverter>"u"){console.log("deck or JSONConverter is undefined");return}let n=this._convertDeckLayers(e,r);this._deckOverlay=new deck.MapboxOverlay({interleaved:!0,layers:n}),this._map.addControl(this._deckOverlay)}_convertDeckLayers(e,r=null){return e.map(n=>{let i=r&&typeof r=="object"?r[n.id]:r,o=Fe(this._map,i);return n.onHover=({layer:a,coordinate:c,object:s})=>{if(i&&o({coordinate:c,object:s}),typeof Shiny<"u"){let u=`${this._id}_layer_${n.id}`;Shiny.onInputChange(u,s)}},this._JSONConverter.convert(n)})}setDeckLayers(e,r=null){console.log("Updating Deck.GL layers");let n=this._convertDeckLayers(e,r);this._deckOverlay.setProps({layers:n})}addMapboxDraw(e,r,n=null){let i=new MapboxDraw(e);this._map.addControl(i,r),n&&i.add(n),typeof Shiny<"u"&&this._map.on("draw.selectionchange",o=>{let a=`${this._id}_draw_features_selected`,c={features:o.features,random:Math.random()};console.log(a,c),Shiny.onInputChange(a,c)})}render(e){e.forEach(([r,n])=>{if(["addLayer","addPopup","addTooltip","addMarker","addPopup","addControl","setSourceData","addDeckOverlay","setDeckLayers","addMapboxDraw"].includes(r)){console.log("Custom method",r,n),this[r](...n);return}console.log("Map method",r),this.applyMapMethod(r,n)})}};var ar="0.1.0";console.log("pymaplibregl",ar);typeof Shiny>"u"&&(window.pymaplibregl=function({mapOptions:t,calls:e}){let r="pymaplibregl",n=document.getElementById(r),i=new K(Object.assign({container:n.id},t));i.getMap().on("load",()=>{i.render(e)})});if(typeof Shiny<"u"){class t extends Shiny.OutputBinding{find(r){return r.find(".shiny-maplibregl-output")}renderValue(r,n){console.log("id:",r.id,"payload:",n);let i=window._maplibreWidget=new K(Object.assign({container:r.id},n.mapData.mapOptions)),o=i.getMap();o.on("load",()=>{i.render(n.mapData.calls)}),o.on("click",c=>{console.log(c);let s=`${r.id}`,u={coords:c.lngLat,point:c.point};console.log(s,u),Shiny.onInputChange(s,u)});let a=`pymaplibregl-${r.id}`;console.log(a),Shiny.addCustomMessageHandler(a,({id:c,calls:s})=>{console.log(c,s),i.render(s)})}}Shiny.outputBindings.register(new t,"shiny-maplibregl-output")}})(); /*! Bundled license information: mustache/mustache.mjs: diff --git a/srcjs/css/custom-opacity-control.css b/srcjs/css/custom-opacity-control.css new file mode 100644 index 00000000..0dbb2699 --- /dev/null +++ b/srcjs/css/custom-opacity-control.css @@ -0,0 +1,15 @@ +.layer-opacity-ctrl #menu { + display: flex; + flex-direction: column; + align-items: center; + border-bottom: 1px solid black; + padding-bottom: 10px; +} + +.layer-opacity-ctrl a { + background-color: #ffffff; + color: darkgrey; + border: 0; + text-decoration: none; + text-align: center; +} diff --git a/srcjs/custom-controls/layer-opacity.js b/srcjs/custom-controls/layer-opacity.js new file mode 100644 index 00000000..749f95da --- /dev/null +++ b/srcjs/custom-controls/layer-opacity.js @@ -0,0 +1,85 @@ +import { createToggleLayerLink } from "../utils"; + +import "../css/custom-opacity-control.css"; + +function createLabel(layerId) { + const label = document.createElement("span"); + label.innerHTML = layerId; + return label; +} + +function getOpacityPropName(map, layerId) { + const layer = map.getLayer(layerId); + return `${layer.type}-opacity`; +} + +function createSlider( + map, + layerId, + toggleLayers = false, + flexDirection = "column", +) { + const label = toggleLayers + ? createToggleLayerLink(map, layerId) + : createLabel(layerId); + const slider = document.createElement("input"); + slider.type = "range"; + slider.min = "0"; + slider.max = "1.0"; + slider.step = "0.1"; + + // This might fail if layer is not already added to the map + // TODO: Put it in a try catch statement + const prop = getOpacityPropName(map, layerId); + const currentValue = map.getPaintProperty(layerId, prop) || 1; + console.log("currentValue", currentValue); + slider.value = currentValue; + // ------------------------- + + slider.style.width = "100px"; + slider.oninput = function (e) { + const prop = getOpacityPropName(map, layerId); + const value = parseFloat(this.value); + console.log(prop, value); + map.setPaintProperty(layerId, prop, value); + }; + const div = document.createElement("div"); + div.id = "menu"; + div.style.flexDirection = flexDirection; + if (div.style.flexDirection === "row") { + div.appendChild(slider); + div.appendChild(label); + return div; + } + + div.appendChild(label); + div.appendChild(slider); + return div; +} + +export default class LayerOpacityControl { + constructor(options) { + this._options = options; + } + + onAdd(map) { + this._map = map; + this._container = document.createElement("div"); + this._container.className = + "maplibregl-ctrl maplibregl-ctrl-group layer-switcher-ctrl-simple layer-opacity-ctrl"; + this._container.style.cssText = this._options.cssText || "padding: 5px;"; + const layerIds = this._options.layerIds || []; + const toggleLayers = this._options.toggleLayers || false; + const flexDirection = this._options.flexDirection || "column"; + for (const layerId of layerIds) { + const slider = createSlider(map, layerId, toggleLayers, flexDirection); + this._container.appendChild(slider); + } + return this._container; + } + + onRemove() { + this._container.parentNode.removeChild(this._container); + this._map = undefined; + } +} diff --git a/srcjs/pymaplibregl.js b/srcjs/pymaplibregl.js index a6bfe9ef..babacd6d 100644 --- a/srcjs/pymaplibregl.js +++ b/srcjs/pymaplibregl.js @@ -5,8 +5,10 @@ maplibregl.addProtocol("pmtiles", protocol.tile); // Add custom controls import InfoBoxControl from "./custom-controls/info-box"; import LayerSwitcherControl from "./custom-controls/layer-switcher"; +import LayerOpacityControl from "./custom-controls/layer-opacity"; maplibregl.LayerSwitcherControl = LayerSwitcherControl; maplibregl.InfoBoxControl = InfoBoxControl; +maplibregl.LayerOpacityControl = LayerOpacityControl; import { getTextFromFeature, diff --git a/srcjs/utils.js b/srcjs/utils.js index a9e15b17..a3ef8b83 100644 --- a/srcjs/utils.js +++ b/srcjs/utils.js @@ -51,4 +51,36 @@ function getDeckMapLibrePopupTooltip(map, tooltip) { }; } -export { getTextFromFeature, getDeckTooltip, getDeckMapLibrePopupTooltip }; +// Used in controls +function createToggleLayerLink(map, layerId) { + const link = document.createElement("a"); + link.id = layerId; + link.href = "#"; + link.textContent = layerId; + const visibility = map.getLayoutProperty(layerId, "visibility"); + if (typeof visibility === "undefined" || visibility === "visible") { + link.className = "active"; + } + + link.onclick = function (e) { + const layerIdClicked = this.textContent; + const visibility = map.getLayoutProperty(layerIdClicked, "visibility"); + console.log(layerIdClicked, visibility); + if (typeof visibility === "undefined" || visibility === "visible") { + map.setLayoutProperty(layerIdClicked, "visibility", "none"); + this.className = ""; + return; + } + + map.setLayoutProperty(layerIdClicked, "visibility", "visible"); + this.className = "active"; + }; + return link; +} + +export { + getTextFromFeature, + getDeckTooltip, + getDeckMapLibrePopupTooltip, + createToggleLayerLink, +};