L.GridLayer.TiledMarkers=L.GridLayer.extend({options:{tileURL:"",strokeColor:"#4C72B0",fillColor:"#4C72B0",fillOpacity:.2,strokeOpacity:1,scaleRadius:1,radius:10,nCols:1,catalogColumns:[]},initialize:function(t){L.setOptions(this,t),this.tilePointCache={}},convertJSONtoHTMLTable:function(t){const o=this.options.catalogColumns.length,e=(this.options.rowsPerColumn,t.v);let i=this.options.nCols<=0?1:this.options.nCols,s="<span>Catalog Information</span><table class='catalog-table'>",a=0;s+="<tr>";for(let t=0;t<o;t++){s+=`<td><b>${this.options.catalogColumns[t]}:<b></td><td>${e[t]}</td>`,a+=1,a==i&&(a=0,s+="</tr>")}return s+="</table>",s},renderPopupContents:function(t,o){const e=o.getPopup();return fetch(o.options.assetPath).then((t=>{if(!t.ok)throw console.log(t),new Error("Failed to fetch JSON",t);return t.arrayBuffer()})).then((t=>cbor.decodeAll(t))).then((o=>{e.setContent(t.convertJSONtoHTMLTable(o[0])).update()})).catch((t=>{console.log("ERROR in Popup Rendering",t)})),document.querySelector(".leaflet-popup-pane").addEventListener("load",(function(t){const o=t.target.tagName,e=map._popup;"IMG"===o&&e&&!e._updated&&(e._updated=!0,e.update())}),!0),"Loading..."},createClusterIcon:function(t){const o=L.latLng(t.global_y,t.global_x);if(!t.cluster){const e=L.popup({maxWidth:"auto"}).setLatLng(o).setContent((t=>this.renderPopupContents(this,t)));return-1==t.a?L.circleMarker(o,{color:this.options.strokeColor,fillColor:this.options.fillColor,assetPath:`catalog_assets/${t.cat_path}/${t.catalog_id}.cbor`,opacity:this.options.strokeOpacity,fillOpacity:this.options.fillOpacity,radius:this.options.radius*this.options.scaleRadius}).bindPopup(e):L.ellipse(o,[t.a*this.options.scaleRadius,t.b*this.options.scaleRadius],t.theta,{color:this.options.strokeColor,fillColor:this.options.fillColor,opacity:this.options.strokeOpacity,fillOpacity:this.options.fillOpacity,assetPath:`catalog_assets/${t.cat_path}/${t.catalog_id}.cbor`}).bindPopup(e)}const e=t.point_count,i=e<100?"small":e<1e3?"medium":e<1e6?"large":"x-large",s=L.divIcon({html:`<div><span>${t.point_count_abbreviated}</span></div>`,className:`marker-cluster marker-cluster-${i}`,iconSize:L.point(40,40)});return L.marker(o,{icon:s}).bindPopup(`${t.global_y}, ${t.global_x}`)},parseTileResponse:function(t,o){200==o.status&&o.arrayBuffer().then((o=>{this.tilePointCache[t]||(this.tilePointCache[t]=[]);const e=new Pbf(o),i=new VectorTile(e).layers.Points;for(let o=0;o<i.length;o++){let e=i.feature(o);this.tilePointCache[t].push(this.createClusterIcon(e.properties).addTo(map))}})).catch((t=>console.log(t)))},createTile:function(t){const o=2**t.z-t.y-1,e=(t.z,t.x,this.options.tileURL.replace("{z}",`${t.z}`).replace("{y}",`${o}`).replace("{x}",`${t.x}`)),i=`${t.z},${t.y},${t.x}`;return fetch(e).then((t=>this.parseTileResponse(i,t))).catch((t=>{console.log(t)})),L.DomUtil.create("canvas","leaflet-tile")},getLatLng:function(){return this._latlng},clearItems:function(t){const o=`${t.coords.z},${t.coords.y},${t.coords.x}`;if(this.tilePointCache[o])for(;this.tilePointCache[o].length;){let t=this.tilePointCache[o].pop().remove();t=null}}}),L.gridLayer.tiledMarkers=function(t){const o=new L.GridLayer.TiledMarkers(t);return o.on("tileunload",o.clearItems),o};