[{"data":1,"prerenderedAt":3031},["ShallowReactive",2],{"navigation_docs":3,"-controls-legend":90,"-controls-legend-surround":3028},[4,22,35,73],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Guide","\u002Fguide","1.guide",[9,13,17],{"title":10,"path":11,"stem":12},"Getting Started","\u002Fguide\u002Fgetting-started","1.guide\u002F1.getting-started",{"title":14,"path":15,"stem":16},"Peer Dependencies","\u002Fguide\u002Fpeer-dependencies","1.guide\u002F2.peer-dependencies",{"title":18,"path":19,"stem":20},"Examples","\u002Fguide\u002Fexamples","1.guide\u002F3.examples",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Components","\u002Fcomponents","2.components",[27,31],{"title":28,"path":29,"stem":30},"VMap","\u002Fcomponents\u002Fmap","2.components\u002F1.map",{"title":32,"path":33,"stem":34},"VMarker","\u002Fcomponents\u002Fmarkers","2.components\u002F2.markers",{"title":36,"path":37,"stem":38,"children":39,"page":21},"Layers","\u002Flayers","3.layers",[40,44,48,52,56,60,64,69],{"title":41,"path":42,"stem":43},"Deck.gl Layers","\u002Flayers\u002Fdeckgl-overview","3.layers\u002F1.deckgl-overview",{"title":45,"path":46,"stem":47},"Core Layers","\u002Flayers\u002Fcore-layers","3.layers\u002F2.core-layers",{"title":49,"path":50,"stem":51},"Aggregation Layers","\u002Flayers\u002Faggregation-layers","3.layers\u002F3.aggregation-layers",{"title":53,"path":54,"stem":55},"Geo Layers","\u002Flayers\u002Fgeo-layers","3.layers\u002F4.geo-layers",{"title":57,"path":58,"stem":59},"Raster Layers","\u002Flayers\u002Fraster-layers","3.layers\u002F5.raster-layers",{"title":61,"path":62,"stem":63},"Wind Layers","\u002Flayers\u002Fwind-layers","3.layers\u002F6.wind-layers",{"title":65,"path":66,"stem":67,"icon":68},"MapLibre Layers","\u002Flayers\u002Fmaplibre-layers","3.layers\u002F7.maplibre-layers","i-lucide-layers",{"title":70,"path":71,"stem":72},"GeoArrow Layers","\u002Flayers\u002Fgeoarrow-layers","3.layers\u002F8.geoarrow-layers",{"title":74,"path":75,"stem":76,"children":77,"page":21},"Controls","\u002Fcontrols","4.controls",[78,82,86],{"title":79,"path":80,"stem":81},"VControlLidar","\u002Fcontrols\u002Flidar","4.controls\u002F1.lidar",{"title":83,"path":84,"stem":85},"Layer Controls","\u002Fcontrols\u002Flayer","4.controls\u002F2.layer",{"title":87,"path":88,"stem":89},"VControlLegend","\u002Fcontrols\u002Flegend","4.controls\u002F3.legend",{"id":91,"title":87,"body":92,"description":3022,"extension":3023,"links":3024,"meta":3025,"navigation":262,"path":88,"seo":3026,"stem":89,"__hash__":3027},"docs\u002F4.controls\u002F3.legend.md",{"type":93,"value":94,"toc":2988},"minimark",[95,106,111,119,141,144,161,165,170,764,768,1077,1081,1382,1386,1390,1408,1411,1414,1438,1441,1444,1459,1466,1469,1491,1494,1497,1512,1519,1522,1543,1558,1561,1582,1585,1588,1608,1611,1614,1634,1637,1641,1645,1648,1707,1711,1714,1759,1763,1766,1770,2027,2031,2034,2038,2127,2131,2216,2220,2223,2226,2297,2301,2308,2494,2500,2503,2984],[96,97,101,105],"callout",{"icon":98,"target":99,"to":100},"i-lucide-palette","_blank","https:\u002F\u002Fmapcn-vue.geoql.in\u002Fexamples\u002Fmaplibre-legend",[102,103,104],"strong",{},"Live Demo"," - Try the legend control with different legend types",[107,108,110],"h2",{"id":109},"overview","Overview",[112,113,114,115,118],"p",{},"The ",[116,117,87],"code",{}," component provides an interactive legend for map layers. It supports three legend types:",[120,121,122,129,135],"ul",{},[123,124,125,128],"li",{},[102,126,127],{},"Category",": Color-coded categories with click-to-filter",[123,130,131,134],{},[102,132,133],{},"Gradient",": Continuous color ramp with min\u002Fmax labels",[123,136,137,140],{},[102,138,139],{},"Size",": Proportional symbol scale",[112,142,143],{},"Features:",[120,145,146,149,152,155,158],{},[123,147,148],{},"Auto-generate legend from MapLibre paint expressions",[123,150,151],{},"Interactive filtering (click to show\u002Fhide categories)",[123,153,154],{},"Support for MapLibre and deck.gl layer filtering",[123,156,157],{},"Collapsible panel",[123,159,160],{},"v-model binding for filter state",[107,162,164],{"id":163},"usage","Usage",[166,167,169],"h3",{"id":168},"category-legend","Category Legend",[171,172,177],"pre",{"className":173,"code":174,"language":175,"meta":176,"style":176},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\n  import { VMap, VControlLegend, VLayerMaplibreGeojson } from '@geoql\u002Fv-maplibre';\n\n  const mapOptions = {\n    style: 'https:\u002F\u002Fbasemaps.cartocdn.com\u002Fgl\u002Fpositron-gl-style\u002Fstyle.json',\n    center: [-74.5, 40],\n    zoom: 9,\n  };\n\n  const legendItems = [\n    { value: 'residential', label: 'Residential', color: '#4CAF50' },\n    { value: 'commercial', label: 'Commercial', color: '#2196F3' },\n    { value: 'industrial', label: 'Industrial', color: '#FF9800' },\n  ];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVMap :options=\"mapOptions\" style=\"height: 500px\">\n    \u003CVLayerMaplibreGeojson\n      source-id=\"buildings\"\n      layer-id=\"buildings-layer\"\n      :source=\"buildingsSource\"\n      :layer=\"buildingsLayer\"\n    \u002F>\n    \u003CVControlLegend\n      :layer-ids=\"['buildings-layer']\"\n      type=\"category\"\n      :items=\"legendItems\"\n      title=\"Land Use\"\n      position=\"top-right\"\n      :interactive=\"true\"\n    \u002F>\n  \u003C\u002FVMap>\n\u003C\u002Ftemplate>\n","vue","",[116,178,179,214,257,264,278,297,325,338,344,349,362,411,455,499,507,517,522,532,566,575,591,606,621,636,642,650,665,680,695,710,725,740,745,755],{"__ignoreMap":176},[180,181,184,188,192,196,199,202,205,209,211],"span",{"class":182,"line":183},"line",1,[180,185,187],{"class":186},"sMK4o","\u003C",[180,189,191],{"class":190},"swJcz","script",[180,193,195],{"class":194},"spNyl"," setup",[180,197,198],{"class":194}," lang",[180,200,201],{"class":186},"=",[180,203,204],{"class":186},"\"",[180,206,208],{"class":207},"sfazB","ts",[180,210,204],{"class":186},[180,212,213],{"class":186},">\n",[180,215,217,221,224,228,231,234,236,239,242,245,248,251,254],{"class":182,"line":216},2,[180,218,220],{"class":219},"s7zQu","  import",[180,222,223],{"class":186}," {",[180,225,227],{"class":226},"sTEyZ"," VMap",[180,229,230],{"class":186},",",[180,232,233],{"class":226}," VControlLegend",[180,235,230],{"class":186},[180,237,238],{"class":226}," VLayerMaplibreGeojson",[180,240,241],{"class":186}," }",[180,243,244],{"class":219}," from",[180,246,247],{"class":186}," '",[180,249,250],{"class":207},"@geoql\u002Fv-maplibre",[180,252,253],{"class":186},"'",[180,255,256],{"class":186},";\n",[180,258,260],{"class":182,"line":259},3,[180,261,263],{"emptyLinePlaceholder":262},true,"\n",[180,265,267,270,273,275],{"class":182,"line":266},4,[180,268,269],{"class":194},"  const",[180,271,272],{"class":226}," mapOptions ",[180,274,201],{"class":186},[180,276,277],{"class":186}," {\n",[180,279,281,284,287,289,292,294],{"class":182,"line":280},5,[180,282,283],{"class":190},"    style",[180,285,286],{"class":186},":",[180,288,247],{"class":186},[180,290,291],{"class":207},"https:\u002F\u002Fbasemaps.cartocdn.com\u002Fgl\u002Fpositron-gl-style\u002Fstyle.json",[180,293,253],{"class":186},[180,295,296],{"class":186},",\n",[180,298,300,303,305,308,311,315,317,320,323],{"class":182,"line":299},6,[180,301,302],{"class":190},"    center",[180,304,286],{"class":186},[180,306,307],{"class":226}," [",[180,309,310],{"class":186},"-",[180,312,314],{"class":313},"sbssI","74.5",[180,316,230],{"class":186},[180,318,319],{"class":313}," 40",[180,321,322],{"class":226},"]",[180,324,296],{"class":186},[180,326,328,331,333,336],{"class":182,"line":327},7,[180,329,330],{"class":190},"    zoom",[180,332,286],{"class":186},[180,334,335],{"class":313}," 9",[180,337,296],{"class":186},[180,339,341],{"class":182,"line":340},8,[180,342,343],{"class":186},"  };\n",[180,345,347],{"class":182,"line":346},9,[180,348,263],{"emptyLinePlaceholder":262},[180,350,352,354,357,359],{"class":182,"line":351},10,[180,353,269],{"class":194},[180,355,356],{"class":226}," legendItems ",[180,358,201],{"class":186},[180,360,361],{"class":226}," [\n",[180,363,365,368,371,373,375,378,380,382,385,387,389,392,394,396,399,401,403,406,408],{"class":182,"line":364},11,[180,366,367],{"class":186},"    {",[180,369,370],{"class":190}," value",[180,372,286],{"class":186},[180,374,247],{"class":186},[180,376,377],{"class":207},"residential",[180,379,253],{"class":186},[180,381,230],{"class":186},[180,383,384],{"class":190}," label",[180,386,286],{"class":186},[180,388,247],{"class":186},[180,390,391],{"class":207},"Residential",[180,393,253],{"class":186},[180,395,230],{"class":186},[180,397,398],{"class":190}," color",[180,400,286],{"class":186},[180,402,247],{"class":186},[180,404,405],{"class":207},"#4CAF50",[180,407,253],{"class":186},[180,409,410],{"class":186}," },\n",[180,412,414,416,418,420,422,425,427,429,431,433,435,438,440,442,444,446,448,451,453],{"class":182,"line":413},12,[180,415,367],{"class":186},[180,417,370],{"class":190},[180,419,286],{"class":186},[180,421,247],{"class":186},[180,423,424],{"class":207},"commercial",[180,426,253],{"class":186},[180,428,230],{"class":186},[180,430,384],{"class":190},[180,432,286],{"class":186},[180,434,247],{"class":186},[180,436,437],{"class":207},"Commercial",[180,439,253],{"class":186},[180,441,230],{"class":186},[180,443,398],{"class":190},[180,445,286],{"class":186},[180,447,247],{"class":186},[180,449,450],{"class":207},"#2196F3",[180,452,253],{"class":186},[180,454,410],{"class":186},[180,456,458,460,462,464,466,469,471,473,475,477,479,482,484,486,488,490,492,495,497],{"class":182,"line":457},13,[180,459,367],{"class":186},[180,461,370],{"class":190},[180,463,286],{"class":186},[180,465,247],{"class":186},[180,467,468],{"class":207},"industrial",[180,470,253],{"class":186},[180,472,230],{"class":186},[180,474,384],{"class":190},[180,476,286],{"class":186},[180,478,247],{"class":186},[180,480,481],{"class":207},"Industrial",[180,483,253],{"class":186},[180,485,230],{"class":186},[180,487,398],{"class":190},[180,489,286],{"class":186},[180,491,247],{"class":186},[180,493,494],{"class":207},"#FF9800",[180,496,253],{"class":186},[180,498,410],{"class":186},[180,500,502,505],{"class":182,"line":501},14,[180,503,504],{"class":226},"  ]",[180,506,256],{"class":186},[180,508,510,513,515],{"class":182,"line":509},15,[180,511,512],{"class":186},"\u003C\u002F",[180,514,191],{"class":190},[180,516,213],{"class":186},[180,518,520],{"class":182,"line":519},16,[180,521,263],{"emptyLinePlaceholder":262},[180,523,525,527,530],{"class":182,"line":524},17,[180,526,187],{"class":186},[180,528,529],{"class":190},"template",[180,531,213],{"class":186},[180,533,535,538,540,543,545,547,550,552,555,557,559,562,564],{"class":182,"line":534},18,[180,536,537],{"class":186},"  \u003C",[180,539,28],{"class":190},[180,541,542],{"class":194}," :options",[180,544,201],{"class":186},[180,546,204],{"class":186},[180,548,549],{"class":207},"mapOptions",[180,551,204],{"class":186},[180,553,554],{"class":194}," style",[180,556,201],{"class":186},[180,558,204],{"class":186},[180,560,561],{"class":207},"height: 500px",[180,563,204],{"class":186},[180,565,213],{"class":186},[180,567,569,572],{"class":182,"line":568},19,[180,570,571],{"class":186},"    \u003C",[180,573,574],{"class":190},"VLayerMaplibreGeojson\n",[180,576,578,581,583,585,588],{"class":182,"line":577},20,[180,579,580],{"class":194},"      source-id",[180,582,201],{"class":186},[180,584,204],{"class":186},[180,586,587],{"class":207},"buildings",[180,589,590],{"class":186},"\"\n",[180,592,594,597,599,601,604],{"class":182,"line":593},21,[180,595,596],{"class":194},"      layer-id",[180,598,201],{"class":186},[180,600,204],{"class":186},[180,602,603],{"class":207},"buildings-layer",[180,605,590],{"class":186},[180,607,609,612,614,616,619],{"class":182,"line":608},22,[180,610,611],{"class":194},"      :source",[180,613,201],{"class":186},[180,615,204],{"class":186},[180,617,618],{"class":207},"buildingsSource",[180,620,590],{"class":186},[180,622,624,627,629,631,634],{"class":182,"line":623},23,[180,625,626],{"class":194},"      :layer",[180,628,201],{"class":186},[180,630,204],{"class":186},[180,632,633],{"class":207},"buildingsLayer",[180,635,590],{"class":186},[180,637,639],{"class":182,"line":638},24,[180,640,641],{"class":186},"    \u002F>\n",[180,643,645,647],{"class":182,"line":644},25,[180,646,571],{"class":186},[180,648,649],{"class":190},"VControlLegend\n",[180,651,653,656,658,660,663],{"class":182,"line":652},26,[180,654,655],{"class":194},"      :layer-ids",[180,657,201],{"class":186},[180,659,204],{"class":186},[180,661,662],{"class":207},"['buildings-layer']",[180,664,590],{"class":186},[180,666,668,671,673,675,678],{"class":182,"line":667},27,[180,669,670],{"class":194},"      type",[180,672,201],{"class":186},[180,674,204],{"class":186},[180,676,677],{"class":207},"category",[180,679,590],{"class":186},[180,681,683,686,688,690,693],{"class":182,"line":682},28,[180,684,685],{"class":194},"      :items",[180,687,201],{"class":186},[180,689,204],{"class":186},[180,691,692],{"class":207},"legendItems",[180,694,590],{"class":186},[180,696,698,701,703,705,708],{"class":182,"line":697},29,[180,699,700],{"class":194},"      title",[180,702,201],{"class":186},[180,704,204],{"class":186},[180,706,707],{"class":207},"Land Use",[180,709,590],{"class":186},[180,711,713,716,718,720,723],{"class":182,"line":712},30,[180,714,715],{"class":194},"      position",[180,717,201],{"class":186},[180,719,204],{"class":186},[180,721,722],{"class":207},"top-right",[180,724,590],{"class":186},[180,726,728,731,733,735,738],{"class":182,"line":727},31,[180,729,730],{"class":194},"      :interactive",[180,732,201],{"class":186},[180,734,204],{"class":186},[180,736,737],{"class":207},"true",[180,739,590],{"class":186},[180,741,743],{"class":182,"line":742},32,[180,744,641],{"class":186},[180,746,748,751,753],{"class":182,"line":747},33,[180,749,750],{"class":186},"  \u003C\u002F",[180,752,28],{"class":190},[180,754,213],{"class":186},[180,756,758,760,762],{"class":182,"line":757},34,[180,759,512],{"class":186},[180,761,529],{"class":190},[180,763,213],{"class":186},[166,765,767],{"id":766},"gradient-legend","Gradient Legend",[171,769,771],{"className":173,"code":770,"language":175,"meta":176,"style":176},"\u003Cscript setup lang=\"ts\">\n  import { VMap, VControlLegend } from '@geoql\u002Fv-maplibre';\n\n  const gradientItems = [\n    {\n      min: 0,\n      max: 100,\n      colors: ['#ffffcc', '#a1dab4', '#41b6c4', '#225ea8'],\n      minLabel: 'Low',\n      maxLabel: 'High',\n    },\n  ];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVMap :options=\"mapOptions\" style=\"height: 500px\">\n    \u003CVControlLegend\n      :layer-ids=\"['choropleth-layer']\"\n      type=\"gradient\"\n      :items=\"gradientItems\"\n      title=\"Population Density\"\n    \u002F>\n  \u003C\u002FVMap>\n\u003C\u002Ftemplate>\n",[116,772,773,793,817,821,832,837,849,861,908,924,940,945,951,959,963,971,999,1005,1018,1031,1044,1057,1061,1069],{"__ignoreMap":176},[180,774,775,777,779,781,783,785,787,789,791],{"class":182,"line":183},[180,776,187],{"class":186},[180,778,191],{"class":190},[180,780,195],{"class":194},[180,782,198],{"class":194},[180,784,201],{"class":186},[180,786,204],{"class":186},[180,788,208],{"class":207},[180,790,204],{"class":186},[180,792,213],{"class":186},[180,794,795,797,799,801,803,805,807,809,811,813,815],{"class":182,"line":216},[180,796,220],{"class":219},[180,798,223],{"class":186},[180,800,227],{"class":226},[180,802,230],{"class":186},[180,804,233],{"class":226},[180,806,241],{"class":186},[180,808,244],{"class":219},[180,810,247],{"class":186},[180,812,250],{"class":207},[180,814,253],{"class":186},[180,816,256],{"class":186},[180,818,819],{"class":182,"line":259},[180,820,263],{"emptyLinePlaceholder":262},[180,822,823,825,828,830],{"class":182,"line":266},[180,824,269],{"class":194},[180,826,827],{"class":226}," gradientItems ",[180,829,201],{"class":186},[180,831,361],{"class":226},[180,833,834],{"class":182,"line":280},[180,835,836],{"class":186},"    {\n",[180,838,839,842,844,847],{"class":182,"line":299},[180,840,841],{"class":190},"      min",[180,843,286],{"class":186},[180,845,846],{"class":313}," 0",[180,848,296],{"class":186},[180,850,851,854,856,859],{"class":182,"line":327},[180,852,853],{"class":190},"      max",[180,855,286],{"class":186},[180,857,858],{"class":313}," 100",[180,860,296],{"class":186},[180,862,863,866,868,870,872,875,877,879,881,884,886,888,890,893,895,897,899,902,904,906],{"class":182,"line":340},[180,864,865],{"class":190},"      colors",[180,867,286],{"class":186},[180,869,307],{"class":226},[180,871,253],{"class":186},[180,873,874],{"class":207},"#ffffcc",[180,876,253],{"class":186},[180,878,230],{"class":186},[180,880,247],{"class":186},[180,882,883],{"class":207},"#a1dab4",[180,885,253],{"class":186},[180,887,230],{"class":186},[180,889,247],{"class":186},[180,891,892],{"class":207},"#41b6c4",[180,894,253],{"class":186},[180,896,230],{"class":186},[180,898,247],{"class":186},[180,900,901],{"class":207},"#225ea8",[180,903,253],{"class":186},[180,905,322],{"class":226},[180,907,296],{"class":186},[180,909,910,913,915,917,920,922],{"class":182,"line":346},[180,911,912],{"class":190},"      minLabel",[180,914,286],{"class":186},[180,916,247],{"class":186},[180,918,919],{"class":207},"Low",[180,921,253],{"class":186},[180,923,296],{"class":186},[180,925,926,929,931,933,936,938],{"class":182,"line":351},[180,927,928],{"class":190},"      maxLabel",[180,930,286],{"class":186},[180,932,247],{"class":186},[180,934,935],{"class":207},"High",[180,937,253],{"class":186},[180,939,296],{"class":186},[180,941,942],{"class":182,"line":364},[180,943,944],{"class":186},"    },\n",[180,946,947,949],{"class":182,"line":413},[180,948,504],{"class":226},[180,950,256],{"class":186},[180,952,953,955,957],{"class":182,"line":457},[180,954,512],{"class":186},[180,956,191],{"class":190},[180,958,213],{"class":186},[180,960,961],{"class":182,"line":501},[180,962,263],{"emptyLinePlaceholder":262},[180,964,965,967,969],{"class":182,"line":509},[180,966,187],{"class":186},[180,968,529],{"class":190},[180,970,213],{"class":186},[180,972,973,975,977,979,981,983,985,987,989,991,993,995,997],{"class":182,"line":519},[180,974,537],{"class":186},[180,976,28],{"class":190},[180,978,542],{"class":194},[180,980,201],{"class":186},[180,982,204],{"class":186},[180,984,549],{"class":207},[180,986,204],{"class":186},[180,988,554],{"class":194},[180,990,201],{"class":186},[180,992,204],{"class":186},[180,994,561],{"class":207},[180,996,204],{"class":186},[180,998,213],{"class":186},[180,1000,1001,1003],{"class":182,"line":524},[180,1002,571],{"class":186},[180,1004,649],{"class":190},[180,1006,1007,1009,1011,1013,1016],{"class":182,"line":534},[180,1008,655],{"class":194},[180,1010,201],{"class":186},[180,1012,204],{"class":186},[180,1014,1015],{"class":207},"['choropleth-layer']",[180,1017,590],{"class":186},[180,1019,1020,1022,1024,1026,1029],{"class":182,"line":568},[180,1021,670],{"class":194},[180,1023,201],{"class":186},[180,1025,204],{"class":186},[180,1027,1028],{"class":207},"gradient",[180,1030,590],{"class":186},[180,1032,1033,1035,1037,1039,1042],{"class":182,"line":577},[180,1034,685],{"class":194},[180,1036,201],{"class":186},[180,1038,204],{"class":186},[180,1040,1041],{"class":207},"gradientItems",[180,1043,590],{"class":186},[180,1045,1046,1048,1050,1052,1055],{"class":182,"line":593},[180,1047,700],{"class":194},[180,1049,201],{"class":186},[180,1051,204],{"class":186},[180,1053,1054],{"class":207},"Population Density",[180,1056,590],{"class":186},[180,1058,1059],{"class":182,"line":608},[180,1060,641],{"class":186},[180,1062,1063,1065,1067],{"class":182,"line":623},[180,1064,750],{"class":186},[180,1066,28],{"class":190},[180,1068,213],{"class":186},[180,1070,1071,1073,1075],{"class":182,"line":638},[180,1072,512],{"class":186},[180,1074,529],{"class":190},[180,1076,213],{"class":186},[166,1078,1080],{"id":1079},"size-legend","Size Legend",[171,1082,1084],{"className":173,"code":1083,"language":175,"meta":176,"style":176},"\u003Cscript setup lang=\"ts\">\n  import { VMap, VControlLegend } from '@geoql\u002Fv-maplibre';\n\n  const sizeItems = [\n    { value: 10, label: 'Small (\u003C 1000)', size: 8 },\n    { value: 50, label: 'Medium (1000-5000)', size: 16 },\n    { value: 100, label: 'Large (> 5000)', size: 24 },\n  ];\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVMap :options=\"mapOptions\" style=\"height: 500px\">\n    \u003CVControlLegend\n      :layer-ids=\"['points-layer']\"\n      type=\"size\"\n      :items=\"sizeItems\"\n      title=\"City Population\"\n    \u002F>\n  \u003C\u002FVMap>\n\u003C\u002Ftemplate>\n",[116,1085,1086,1106,1130,1134,1145,1181,1216,1250,1256,1264,1268,1276,1304,1310,1323,1336,1349,1362,1366,1374],{"__ignoreMap":176},[180,1087,1088,1090,1092,1094,1096,1098,1100,1102,1104],{"class":182,"line":183},[180,1089,187],{"class":186},[180,1091,191],{"class":190},[180,1093,195],{"class":194},[180,1095,198],{"class":194},[180,1097,201],{"class":186},[180,1099,204],{"class":186},[180,1101,208],{"class":207},[180,1103,204],{"class":186},[180,1105,213],{"class":186},[180,1107,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128],{"class":182,"line":216},[180,1109,220],{"class":219},[180,1111,223],{"class":186},[180,1113,227],{"class":226},[180,1115,230],{"class":186},[180,1117,233],{"class":226},[180,1119,241],{"class":186},[180,1121,244],{"class":219},[180,1123,247],{"class":186},[180,1125,250],{"class":207},[180,1127,253],{"class":186},[180,1129,256],{"class":186},[180,1131,1132],{"class":182,"line":259},[180,1133,263],{"emptyLinePlaceholder":262},[180,1135,1136,1138,1141,1143],{"class":182,"line":266},[180,1137,269],{"class":194},[180,1139,1140],{"class":226}," sizeItems ",[180,1142,201],{"class":186},[180,1144,361],{"class":226},[180,1146,1147,1149,1151,1153,1156,1158,1160,1162,1164,1167,1169,1171,1174,1176,1179],{"class":182,"line":280},[180,1148,367],{"class":186},[180,1150,370],{"class":190},[180,1152,286],{"class":186},[180,1154,1155],{"class":313}," 10",[180,1157,230],{"class":186},[180,1159,384],{"class":190},[180,1161,286],{"class":186},[180,1163,247],{"class":186},[180,1165,1166],{"class":207},"Small (\u003C 1000)",[180,1168,253],{"class":186},[180,1170,230],{"class":186},[180,1172,1173],{"class":190}," size",[180,1175,286],{"class":186},[180,1177,1178],{"class":313}," 8",[180,1180,410],{"class":186},[180,1182,1183,1185,1187,1189,1192,1194,1196,1198,1200,1203,1205,1207,1209,1211,1214],{"class":182,"line":299},[180,1184,367],{"class":186},[180,1186,370],{"class":190},[180,1188,286],{"class":186},[180,1190,1191],{"class":313}," 50",[180,1193,230],{"class":186},[180,1195,384],{"class":190},[180,1197,286],{"class":186},[180,1199,247],{"class":186},[180,1201,1202],{"class":207},"Medium (1000-5000)",[180,1204,253],{"class":186},[180,1206,230],{"class":186},[180,1208,1173],{"class":190},[180,1210,286],{"class":186},[180,1212,1213],{"class":313}," 16",[180,1215,410],{"class":186},[180,1217,1218,1220,1222,1224,1226,1228,1230,1232,1234,1237,1239,1241,1243,1245,1248],{"class":182,"line":327},[180,1219,367],{"class":186},[180,1221,370],{"class":190},[180,1223,286],{"class":186},[180,1225,858],{"class":313},[180,1227,230],{"class":186},[180,1229,384],{"class":190},[180,1231,286],{"class":186},[180,1233,247],{"class":186},[180,1235,1236],{"class":207},"Large (> 5000)",[180,1238,253],{"class":186},[180,1240,230],{"class":186},[180,1242,1173],{"class":190},[180,1244,286],{"class":186},[180,1246,1247],{"class":313}," 24",[180,1249,410],{"class":186},[180,1251,1252,1254],{"class":182,"line":340},[180,1253,504],{"class":226},[180,1255,256],{"class":186},[180,1257,1258,1260,1262],{"class":182,"line":346},[180,1259,512],{"class":186},[180,1261,191],{"class":190},[180,1263,213],{"class":186},[180,1265,1266],{"class":182,"line":351},[180,1267,263],{"emptyLinePlaceholder":262},[180,1269,1270,1272,1274],{"class":182,"line":364},[180,1271,187],{"class":186},[180,1273,529],{"class":190},[180,1275,213],{"class":186},[180,1277,1278,1280,1282,1284,1286,1288,1290,1292,1294,1296,1298,1300,1302],{"class":182,"line":413},[180,1279,537],{"class":186},[180,1281,28],{"class":190},[180,1283,542],{"class":194},[180,1285,201],{"class":186},[180,1287,204],{"class":186},[180,1289,549],{"class":207},[180,1291,204],{"class":186},[180,1293,554],{"class":194},[180,1295,201],{"class":186},[180,1297,204],{"class":186},[180,1299,561],{"class":207},[180,1301,204],{"class":186},[180,1303,213],{"class":186},[180,1305,1306,1308],{"class":182,"line":457},[180,1307,571],{"class":186},[180,1309,649],{"class":190},[180,1311,1312,1314,1316,1318,1321],{"class":182,"line":501},[180,1313,655],{"class":194},[180,1315,201],{"class":186},[180,1317,204],{"class":186},[180,1319,1320],{"class":207},"['points-layer']",[180,1322,590],{"class":186},[180,1324,1325,1327,1329,1331,1334],{"class":182,"line":509},[180,1326,670],{"class":194},[180,1328,201],{"class":186},[180,1330,204],{"class":186},[180,1332,1333],{"class":207},"size",[180,1335,590],{"class":186},[180,1337,1338,1340,1342,1344,1347],{"class":182,"line":519},[180,1339,685],{"class":194},[180,1341,201],{"class":186},[180,1343,204],{"class":186},[180,1345,1346],{"class":207},"sizeItems",[180,1348,590],{"class":186},[180,1350,1351,1353,1355,1357,1360],{"class":182,"line":524},[180,1352,700],{"class":194},[180,1354,201],{"class":186},[180,1356,204],{"class":186},[180,1358,1359],{"class":207},"City Population",[180,1361,590],{"class":186},[180,1363,1364],{"class":182,"line":534},[180,1365,641],{"class":186},[180,1367,1368,1370,1372],{"class":182,"line":568},[180,1369,750],{"class":186},[180,1371,28],{"class":190},[180,1373,213],{"class":186},[180,1375,1376,1378,1380],{"class":182,"line":577},[180,1377,512],{"class":186},[180,1379,529],{"class":190},[180,1381,213],{"class":186},[107,1383,1385],{"id":1384},"props","Props",[166,1387,1389],{"id":1388},"layerids","layerIds",[120,1391,1392,1401],{},[123,1393,1394,1397,1398],{},[102,1395,1396],{},"Type:"," ",[116,1399,1400],{},"string[]",[123,1402,1403,1397,1406],{},[102,1404,1405],{},"Required:",[116,1407,737],{},[112,1409,1410],{},"Array of layer IDs to filter when legend items are toggled.",[166,1412,1413],{"id":1413},"type",[120,1415,1416,1423,1430],{},[123,1417,1418,1397,1420],{},[102,1419,1396],{},[116,1421,1422],{},"'category' | 'gradient' | 'size'",[123,1424,1425,1397,1427],{},[102,1426,1405],{},[116,1428,1429],{},"false",[123,1431,1432,1397,1435],{},[102,1433,1434],{},"Default:",[116,1436,1437],{},"'category'",[112,1439,1440],{},"The legend type to render.",[166,1442,1443],{"id":1443},"items",[120,1445,1446,1453],{},[123,1447,1448,1397,1450],{},[102,1449,1396],{},[116,1451,1452],{},"LegendItem[]",[123,1454,1455,1397,1457],{},[102,1456,1405],{},[116,1458,1429],{},[112,1460,1461,1462,1465],{},"Explicit legend items. If not provided and ",[116,1463,1464],{},"autoGenerate"," is true, items are generated from paint properties.",[166,1467,1468],{"id":1468},"position",[120,1470,1471,1478,1484],{},[123,1472,1473,1397,1475],{},[102,1474,1396],{},[116,1476,1477],{},"'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",[123,1479,1480,1397,1482],{},[102,1481,1405],{},[116,1483,1429],{},[123,1485,1486,1397,1488],{},[102,1487,1434],{},[116,1489,1490],{},"'top-right'",[112,1492,1493],{},"Position of the legend control on the map.",[166,1495,1496],{"id":1496},"property",[120,1498,1499,1506],{},[123,1500,1501,1397,1503],{},[102,1502,1396],{},[116,1504,1505],{},"string",[123,1507,1508,1397,1510],{},[102,1509,1405],{},[116,1511,1429],{},[112,1513,1514,1515,1518],{},"MapLibre paint property to read for auto-generation and filtering (e.g., ",[116,1516,1517],{},"'fill-color'",").",[166,1520,1464],{"id":1521},"autogenerate",[120,1523,1524,1531,1537],{},[123,1525,1526,1397,1528],{},[102,1527,1396],{},[116,1529,1530],{},"boolean",[123,1532,1533,1397,1535],{},[102,1534,1405],{},[116,1536,1429],{},[123,1538,1539,1397,1541],{},[102,1540,1434],{},[116,1542,1429],{},[112,1544,1545,1546,1549,1550,1553,1554,1557],{},"Auto-generate legend items from MapLibre paint expressions. Supports ",[116,1547,1548],{},"match",", ",[116,1551,1552],{},"step",", and ",[116,1555,1556],{},"interpolate"," expressions.",[166,1559,1560],{"id":1560},"title",[120,1562,1563,1569,1575],{},[123,1564,1565,1397,1567],{},[102,1566,1396],{},[116,1568,1505],{},[123,1570,1571,1397,1573],{},[102,1572,1405],{},[116,1574,1429],{},[123,1576,1577,1397,1579],{},[102,1578,1434],{},[116,1580,1581],{},"'Legend'",[112,1583,1584],{},"Title displayed in the legend header.",[166,1586,1587],{"id":1587},"collapsed",[120,1589,1590,1596,1602],{},[123,1591,1592,1397,1594],{},[102,1593,1396],{},[116,1595,1530],{},[123,1597,1598,1397,1600],{},[102,1599,1405],{},[116,1601,1429],{},[123,1603,1604,1397,1606],{},[102,1605,1434],{},[116,1607,1429],{},[112,1609,1610],{},"Start with the legend collapsed.",[166,1612,1613],{"id":1613},"interactive",[120,1615,1616,1622,1628],{},[123,1617,1618,1397,1620],{},[102,1619,1396],{},[116,1621,1530],{},[123,1623,1624,1397,1626],{},[102,1625,1405],{},[116,1627,1429],{},[123,1629,1630,1397,1632],{},[102,1631,1434],{},[116,1633,737],{},[112,1635,1636],{},"Enable click-to-filter functionality for category legends.",[107,1638,1640],{"id":1639},"events","Events",[166,1642,1644],{"id":1643},"item-click","@item-click",[112,1646,1647],{},"Emitted when a legend item is clicked.",[171,1649,1653],{"className":1650,"code":1651,"language":1652,"meta":176,"style":176},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","interface ItemClickEvent {\n  item: LegendItem;\n  index: number;\n  visible: boolean;\n}\n","typescript",[116,1654,1655,1666,1678,1690,1702],{"__ignoreMap":176},[180,1656,1657,1660,1664],{"class":182,"line":183},[180,1658,1659],{"class":194},"interface",[180,1661,1663],{"class":1662},"sBMFI"," ItemClickEvent",[180,1665,277],{"class":186},[180,1667,1668,1671,1673,1676],{"class":182,"line":216},[180,1669,1670],{"class":190},"  item",[180,1672,286],{"class":186},[180,1674,1675],{"class":1662}," LegendItem",[180,1677,256],{"class":186},[180,1679,1680,1683,1685,1688],{"class":182,"line":259},[180,1681,1682],{"class":190},"  index",[180,1684,286],{"class":186},[180,1686,1687],{"class":1662}," number",[180,1689,256],{"class":186},[180,1691,1692,1695,1697,1700],{"class":182,"line":266},[180,1693,1694],{"class":190},"  visible",[180,1696,286],{"class":186},[180,1698,1699],{"class":1662}," boolean",[180,1701,256],{"class":186},[180,1703,1704],{"class":182,"line":280},[180,1705,1706],{"class":186},"}\n",[166,1708,1710],{"id":1709},"filter-change","@filter-change",[112,1712,1713],{},"Emitted when the filter state changes.",[171,1715,1717],{"className":1650,"code":1716,"language":1652,"meta":176,"style":176},"interface FilterChangeEvent {\n  filter: FilterState;\n  layerIds: string[];\n}\n",[116,1718,1719,1728,1740,1755],{"__ignoreMap":176},[180,1720,1721,1723,1726],{"class":182,"line":183},[180,1722,1659],{"class":194},[180,1724,1725],{"class":1662}," FilterChangeEvent",[180,1727,277],{"class":186},[180,1729,1730,1733,1735,1738],{"class":182,"line":216},[180,1731,1732],{"class":190},"  filter",[180,1734,286],{"class":186},[180,1736,1737],{"class":1662}," FilterState",[180,1739,256],{"class":186},[180,1741,1742,1745,1747,1750,1753],{"class":182,"line":259},[180,1743,1744],{"class":190},"  layerIds",[180,1746,286],{"class":186},[180,1748,1749],{"class":1662}," string",[180,1751,1752],{"class":226},"[]",[180,1754,256],{"class":186},[180,1756,1757],{"class":182,"line":266},[180,1758,1706],{"class":186},[166,1760,1762],{"id":1761},"updatefilter","@update:filter",[112,1764,1765],{},"Emitted for v-model:filter binding.",[107,1767,1769],{"id":1768},"v-model-binding","v-model Binding",[171,1771,1773],{"className":173,"code":1772,"language":175,"meta":176,"style":176},"\u003Cscript setup lang=\"ts\">\n  import { ref } from 'vue';\n  import type { FilterState } from '@geoql\u002Fv-maplibre';\n\n  const filterState = ref\u003CFilterState>({\n    visibleValues: ['residential', 'commercial', 'industrial'],\n  });\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVControlLegend\n    :layer-ids=\"['buildings-layer']\"\n    type=\"category\"\n    :items=\"legendItems\"\n    v-model:filter=\"filterState\"\n  \u002F>\n\n  \u003Cp>Visible categories: {{ filterState.visibleValues.join(', ') }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n",[116,1774,1775,1795,1816,1839,1843,1869,1904,1914,1922,1926,1934,1940,1953,1966,1979,1993,1998,2002,2019],{"__ignoreMap":176},[180,1776,1777,1779,1781,1783,1785,1787,1789,1791,1793],{"class":182,"line":183},[180,1778,187],{"class":186},[180,1780,191],{"class":190},[180,1782,195],{"class":194},[180,1784,198],{"class":194},[180,1786,201],{"class":186},[180,1788,204],{"class":186},[180,1790,208],{"class":207},[180,1792,204],{"class":186},[180,1794,213],{"class":186},[180,1796,1797,1799,1801,1804,1806,1808,1810,1812,1814],{"class":182,"line":216},[180,1798,220],{"class":219},[180,1800,223],{"class":186},[180,1802,1803],{"class":226}," ref",[180,1805,241],{"class":186},[180,1807,244],{"class":219},[180,1809,247],{"class":186},[180,1811,175],{"class":207},[180,1813,253],{"class":186},[180,1815,256],{"class":186},[180,1817,1818,1820,1823,1825,1827,1829,1831,1833,1835,1837],{"class":182,"line":259},[180,1819,220],{"class":219},[180,1821,1822],{"class":219}," type",[180,1824,223],{"class":186},[180,1826,1737],{"class":226},[180,1828,241],{"class":186},[180,1830,244],{"class":219},[180,1832,247],{"class":186},[180,1834,250],{"class":207},[180,1836,253],{"class":186},[180,1838,256],{"class":186},[180,1840,1841],{"class":182,"line":266},[180,1842,263],{"emptyLinePlaceholder":262},[180,1844,1845,1847,1850,1852,1855,1857,1860,1863,1866],{"class":182,"line":280},[180,1846,269],{"class":194},[180,1848,1849],{"class":226}," filterState ",[180,1851,201],{"class":186},[180,1853,1803],{"class":1854},"s2Zo4",[180,1856,187],{"class":186},[180,1858,1859],{"class":1662},"FilterState",[180,1861,1862],{"class":186},">",[180,1864,1865],{"class":226},"(",[180,1867,1868],{"class":186},"{\n",[180,1870,1871,1874,1876,1878,1880,1882,1884,1886,1888,1890,1892,1894,1896,1898,1900,1902],{"class":182,"line":299},[180,1872,1873],{"class":190},"    visibleValues",[180,1875,286],{"class":186},[180,1877,307],{"class":226},[180,1879,253],{"class":186},[180,1881,377],{"class":207},[180,1883,253],{"class":186},[180,1885,230],{"class":186},[180,1887,247],{"class":186},[180,1889,424],{"class":207},[180,1891,253],{"class":186},[180,1893,230],{"class":186},[180,1895,247],{"class":186},[180,1897,468],{"class":207},[180,1899,253],{"class":186},[180,1901,322],{"class":226},[180,1903,296],{"class":186},[180,1905,1906,1909,1912],{"class":182,"line":327},[180,1907,1908],{"class":186},"  }",[180,1910,1911],{"class":226},")",[180,1913,256],{"class":186},[180,1915,1916,1918,1920],{"class":182,"line":340},[180,1917,512],{"class":186},[180,1919,191],{"class":190},[180,1921,213],{"class":186},[180,1923,1924],{"class":182,"line":346},[180,1925,263],{"emptyLinePlaceholder":262},[180,1927,1928,1930,1932],{"class":182,"line":351},[180,1929,187],{"class":186},[180,1931,529],{"class":190},[180,1933,213],{"class":186},[180,1935,1936,1938],{"class":182,"line":364},[180,1937,537],{"class":186},[180,1939,649],{"class":190},[180,1941,1942,1945,1947,1949,1951],{"class":182,"line":413},[180,1943,1944],{"class":194},"    :layer-ids",[180,1946,201],{"class":186},[180,1948,204],{"class":186},[180,1950,662],{"class":207},[180,1952,590],{"class":186},[180,1954,1955,1958,1960,1962,1964],{"class":182,"line":457},[180,1956,1957],{"class":194},"    type",[180,1959,201],{"class":186},[180,1961,204],{"class":186},[180,1963,677],{"class":207},[180,1965,590],{"class":186},[180,1967,1968,1971,1973,1975,1977],{"class":182,"line":501},[180,1969,1970],{"class":194},"    :items",[180,1972,201],{"class":186},[180,1974,204],{"class":186},[180,1976,692],{"class":207},[180,1978,590],{"class":186},[180,1980,1981,1984,1986,1988,1991],{"class":182,"line":509},[180,1982,1983],{"class":194},"    v-model:filter",[180,1985,201],{"class":186},[180,1987,204],{"class":186},[180,1989,1990],{"class":207},"filterState",[180,1992,590],{"class":186},[180,1994,1995],{"class":182,"line":519},[180,1996,1997],{"class":186},"  \u002F>\n",[180,1999,2000],{"class":182,"line":524},[180,2001,263],{"emptyLinePlaceholder":262},[180,2003,2004,2006,2008,2010,2013,2015,2017],{"class":182,"line":534},[180,2005,537],{"class":186},[180,2007,112],{"class":190},[180,2009,1862],{"class":186},[180,2011,2012],{"class":226},"Visible categories: {{ filterState.visibleValues.join(', ') }}",[180,2014,512],{"class":186},[180,2016,112],{"class":190},[180,2018,213],{"class":186},[180,2020,2021,2023,2025],{"class":182,"line":568},[180,2022,512],{"class":186},[180,2024,529],{"class":190},[180,2026,213],{"class":186},[107,2028,2030],{"id":2029},"auto-generation","Auto-Generation",[112,2032,2033],{},"The legend can auto-generate items from MapLibre paint expressions:",[166,2035,2037],{"id":2036},"from-match-expression","From Match Expression",[171,2039,2041],{"className":173,"code":2040,"language":175,"meta":176,"style":176},"\u003Ctemplate>\n  \u003C!-- Layer with fill-color: ['match', ['get', 'type'], 'A', '#ff0000', 'B', '#00ff00', '#cccccc'] -->\n  \u003CVControlLegend\n    :layer-ids=\"['my-layer']\"\n    type=\"category\"\n    :auto-generate=\"true\"\n    property=\"fill-color\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[116,2042,2043,2051,2057,2063,2076,2088,2101,2115,2119],{"__ignoreMap":176},[180,2044,2045,2047,2049],{"class":182,"line":183},[180,2046,187],{"class":186},[180,2048,529],{"class":190},[180,2050,213],{"class":186},[180,2052,2053],{"class":182,"line":216},[180,2054,2056],{"class":2055},"sHwdD","  \u003C!-- Layer with fill-color: ['match', ['get', 'type'], 'A', '#ff0000', 'B', '#00ff00', '#cccccc'] -->\n",[180,2058,2059,2061],{"class":182,"line":259},[180,2060,537],{"class":186},[180,2062,649],{"class":190},[180,2064,2065,2067,2069,2071,2074],{"class":182,"line":266},[180,2066,1944],{"class":194},[180,2068,201],{"class":186},[180,2070,204],{"class":186},[180,2072,2073],{"class":207},"['my-layer']",[180,2075,590],{"class":186},[180,2077,2078,2080,2082,2084,2086],{"class":182,"line":280},[180,2079,1957],{"class":194},[180,2081,201],{"class":186},[180,2083,204],{"class":186},[180,2085,677],{"class":207},[180,2087,590],{"class":186},[180,2089,2090,2093,2095,2097,2099],{"class":182,"line":299},[180,2091,2092],{"class":194},"    :auto-generate",[180,2094,201],{"class":186},[180,2096,204],{"class":186},[180,2098,737],{"class":207},[180,2100,590],{"class":186},[180,2102,2103,2106,2108,2110,2113],{"class":182,"line":327},[180,2104,2105],{"class":194},"    property",[180,2107,201],{"class":186},[180,2109,204],{"class":186},[180,2111,2112],{"class":207},"fill-color",[180,2114,590],{"class":186},[180,2116,2117],{"class":182,"line":340},[180,2118,1997],{"class":186},[180,2120,2121,2123,2125],{"class":182,"line":346},[180,2122,512],{"class":186},[180,2124,529],{"class":190},[180,2126,213],{"class":186},[166,2128,2130],{"id":2129},"from-interpolate-expression","From Interpolate Expression",[171,2132,2134],{"className":173,"code":2133,"language":175,"meta":176,"style":176},"\u003Ctemplate>\n  \u003C!-- Layer with fill-color: ['interpolate', ['linear'], ['get', 'value'], 0, '#0000ff', 100, '#ff0000'] -->\n  \u003CVControlLegend\n    :layer-ids=\"['choropleth']\"\n    type=\"gradient\"\n    :auto-generate=\"true\"\n    property=\"fill-color\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[116,2135,2136,2144,2149,2155,2168,2180,2192,2204,2208],{"__ignoreMap":176},[180,2137,2138,2140,2142],{"class":182,"line":183},[180,2139,187],{"class":186},[180,2141,529],{"class":190},[180,2143,213],{"class":186},[180,2145,2146],{"class":182,"line":216},[180,2147,2148],{"class":2055},"  \u003C!-- Layer with fill-color: ['interpolate', ['linear'], ['get', 'value'], 0, '#0000ff', 100, '#ff0000'] -->\n",[180,2150,2151,2153],{"class":182,"line":259},[180,2152,537],{"class":186},[180,2154,649],{"class":190},[180,2156,2157,2159,2161,2163,2166],{"class":182,"line":266},[180,2158,1944],{"class":194},[180,2160,201],{"class":186},[180,2162,204],{"class":186},[180,2164,2165],{"class":207},"['choropleth']",[180,2167,590],{"class":186},[180,2169,2170,2172,2174,2176,2178],{"class":182,"line":280},[180,2171,1957],{"class":194},[180,2173,201],{"class":186},[180,2175,204],{"class":186},[180,2177,1028],{"class":207},[180,2179,590],{"class":186},[180,2181,2182,2184,2186,2188,2190],{"class":182,"line":299},[180,2183,2092],{"class":194},[180,2185,201],{"class":186},[180,2187,204],{"class":186},[180,2189,737],{"class":207},[180,2191,590],{"class":186},[180,2193,2194,2196,2198,2200,2202],{"class":182,"line":327},[180,2195,2105],{"class":194},[180,2197,201],{"class":186},[180,2199,204],{"class":186},[180,2201,2112],{"class":207},[180,2203,590],{"class":186},[180,2205,2206],{"class":182,"line":340},[180,2207,1997],{"class":186},[180,2209,2210,2212,2214],{"class":182,"line":346},[180,2211,512],{"class":186},[180,2213,529],{"class":190},[180,2215,213],{"class":186},[107,2217,2219],{"id":2218},"layer-filtering","Layer Filtering",[166,2221,65],{"id":2222},"maplibre-layers",[112,2224,2225],{},"When a category is toggled off, the control applies a filter to hide matching features:",[171,2227,2231],{"className":2228,"code":2229,"language":2230,"meta":176,"style":176},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","map.setFilter(layerId, ['in', ['get', 'property'], ['literal', visibleValues]]);\n","javascript",[116,2232,2233],{"__ignoreMap":176},[180,2234,2235,2238,2241,2244,2247,2249,2251,2253,2256,2258,2260,2262,2264,2267,2269,2271,2273,2275,2277,2279,2281,2283,2285,2288,2290,2292,2295],{"class":182,"line":183},[180,2236,2237],{"class":226},"map",[180,2239,2240],{"class":186},".",[180,2242,2243],{"class":1854},"setFilter",[180,2245,2246],{"class":226},"(layerId",[180,2248,230],{"class":186},[180,2250,307],{"class":226},[180,2252,253],{"class":186},[180,2254,2255],{"class":207},"in",[180,2257,253],{"class":186},[180,2259,230],{"class":186},[180,2261,307],{"class":226},[180,2263,253],{"class":186},[180,2265,2266],{"class":207},"get",[180,2268,253],{"class":186},[180,2270,230],{"class":186},[180,2272,247],{"class":186},[180,2274,1496],{"class":207},[180,2276,253],{"class":186},[180,2278,322],{"class":226},[180,2280,230],{"class":186},[180,2282,307],{"class":226},[180,2284,253],{"class":186},[180,2286,2287],{"class":207},"literal",[180,2289,253],{"class":186},[180,2291,230],{"class":186},[180,2293,2294],{"class":226}," visibleValues]])",[180,2296,256],{"class":186},[166,2298,2300],{"id":2299},"deckgl-layers","deck.gl Layers",[112,2302,2303,2304,2307],{},"deck.gl layer filtering requires ",[116,2305,2306],{},"DataFilterExtension"," to be pre-configured:",[171,2309,2311],{"className":173,"code":2310,"language":175,"meta":176,"style":176},"\u003Cscript setup lang=\"ts\">\n  import { DataFilterExtension } from '@deck.gl\u002Fextensions';\n\n  const layer = new ScatterplotLayer({\n    id: 'scatter',\n    data: points,\n    extensions: [new DataFilterExtension()],\n    getFilterValue: (d) => categoryToIndex(d.category),\n    filterRange: [0, Infinity],\n  });\n\u003C\u002Fscript>\n",[116,2312,2313,2333,2355,2359,2378,2394,2406,2425,2457,2478,2486],{"__ignoreMap":176},[180,2314,2315,2317,2319,2321,2323,2325,2327,2329,2331],{"class":182,"line":183},[180,2316,187],{"class":186},[180,2318,191],{"class":190},[180,2320,195],{"class":194},[180,2322,198],{"class":194},[180,2324,201],{"class":186},[180,2326,204],{"class":186},[180,2328,208],{"class":207},[180,2330,204],{"class":186},[180,2332,213],{"class":186},[180,2334,2335,2337,2339,2342,2344,2346,2348,2351,2353],{"class":182,"line":216},[180,2336,220],{"class":219},[180,2338,223],{"class":186},[180,2340,2341],{"class":226}," DataFilterExtension",[180,2343,241],{"class":186},[180,2345,244],{"class":219},[180,2347,247],{"class":186},[180,2349,2350],{"class":207},"@deck.gl\u002Fextensions",[180,2352,253],{"class":186},[180,2354,256],{"class":186},[180,2356,2357],{"class":182,"line":259},[180,2358,263],{"emptyLinePlaceholder":262},[180,2360,2361,2363,2366,2368,2371,2374,2376],{"class":182,"line":266},[180,2362,269],{"class":194},[180,2364,2365],{"class":226}," layer ",[180,2367,201],{"class":186},[180,2369,2370],{"class":186}," new",[180,2372,2373],{"class":1854}," ScatterplotLayer",[180,2375,1865],{"class":226},[180,2377,1868],{"class":186},[180,2379,2380,2383,2385,2387,2390,2392],{"class":182,"line":280},[180,2381,2382],{"class":190},"    id",[180,2384,286],{"class":186},[180,2386,247],{"class":186},[180,2388,2389],{"class":207},"scatter",[180,2391,253],{"class":186},[180,2393,296],{"class":186},[180,2395,2396,2399,2401,2404],{"class":182,"line":299},[180,2397,2398],{"class":190},"    data",[180,2400,286],{"class":186},[180,2402,2403],{"class":226}," points",[180,2405,296],{"class":186},[180,2407,2408,2411,2413,2415,2418,2420,2423],{"class":182,"line":327},[180,2409,2410],{"class":190},"    extensions",[180,2412,286],{"class":186},[180,2414,307],{"class":226},[180,2416,2417],{"class":186},"new",[180,2419,2341],{"class":1854},[180,2421,2422],{"class":226},"()]",[180,2424,296],{"class":186},[180,2426,2427,2430,2432,2435,2439,2441,2444,2447,2450,2452,2455],{"class":182,"line":340},[180,2428,2429],{"class":1854},"    getFilterValue",[180,2431,286],{"class":186},[180,2433,2434],{"class":186}," (",[180,2436,2438],{"class":2437},"sHdIc","d",[180,2440,1911],{"class":186},[180,2442,2443],{"class":194}," =>",[180,2445,2446],{"class":1854}," categoryToIndex",[180,2448,2449],{"class":226},"(d",[180,2451,2240],{"class":186},[180,2453,2454],{"class":226},"category)",[180,2456,296],{"class":186},[180,2458,2459,2462,2464,2466,2469,2471,2474,2476],{"class":182,"line":346},[180,2460,2461],{"class":190},"    filterRange",[180,2463,286],{"class":186},[180,2465,307],{"class":226},[180,2467,2468],{"class":313},"0",[180,2470,230],{"class":186},[180,2472,2473],{"class":186}," Infinity",[180,2475,322],{"class":226},[180,2477,296],{"class":186},[180,2479,2480,2482,2484],{"class":182,"line":351},[180,2481,1908],{"class":186},[180,2483,1911],{"class":226},[180,2485,256],{"class":186},[180,2487,2488,2490,2492],{"class":182,"line":364},[180,2489,512],{"class":186},[180,2491,191],{"class":190},[180,2493,213],{"class":186},[112,2495,2496,2497,2499],{},"If a deck.gl layer doesn't have ",[116,2498,2306],{},", a warning is logged.",[107,2501,2502],{"id":1652},"TypeScript",[171,2504,2506],{"className":1650,"code":2505,"language":1652,"meta":176,"style":176},"import type {\n  LegendType,\n  LegendItem,\n  CategoryLegendItem,\n  GradientLegendItem,\n  SizeLegendItem,\n  FilterState,\n  LegendControlOptions,\n} from '@geoql\u002Fv-maplibre';\n\n\u002F\u002F Category item\nconst categoryItem: CategoryLegendItem = {\n  value: 'residential',\n  label: 'Residential',\n  color: '#4CAF50',\n  visible: true,\n  count: 150, \u002F\u002F Optional feature count\n};\n\n\u002F\u002F Gradient item\nconst gradientItem: GradientLegendItem = {\n  min: 0,\n  max: 100,\n  colors: ['#0000ff', '#ff0000'],\n  minLabel: 'Low',\n  maxLabel: 'High',\n  stops: [0, 25, 50, 75, 100], \u002F\u002F Optional color stops\n};\n\n\u002F\u002F Size item\nconst sizeItem: SizeLegendItem = {\n  value: 50,\n  label: 'Medium',\n  size: 16,\n};\n\n\u002F\u002F Filter state\nconst filterState: FilterState = {\n  visibleValues: ['residential', 'commercial'],\n  minRange: 0, \u002F\u002F For gradient filtering\n  maxRange: 100,\n};\n",[116,2507,2508,2517,2524,2531,2538,2545,2552,2559,2566,2581,2585,2590,2608,2623,2638,2653,2665,2680,2685,2689,2694,2710,2721,2732,2761,2776,2791,2827,2831,2835,2840,2856,2866,2881,2892,2897,2902,2908,2924,2952,2967,2979],{"__ignoreMap":176},[180,2509,2510,2513,2515],{"class":182,"line":183},[180,2511,2512],{"class":219},"import",[180,2514,1822],{"class":219},[180,2516,277],{"class":186},[180,2518,2519,2522],{"class":182,"line":216},[180,2520,2521],{"class":226},"  LegendType",[180,2523,296],{"class":186},[180,2525,2526,2529],{"class":182,"line":259},[180,2527,2528],{"class":226},"  LegendItem",[180,2530,296],{"class":186},[180,2532,2533,2536],{"class":182,"line":266},[180,2534,2535],{"class":226},"  CategoryLegendItem",[180,2537,296],{"class":186},[180,2539,2540,2543],{"class":182,"line":280},[180,2541,2542],{"class":226},"  GradientLegendItem",[180,2544,296],{"class":186},[180,2546,2547,2550],{"class":182,"line":299},[180,2548,2549],{"class":226},"  SizeLegendItem",[180,2551,296],{"class":186},[180,2553,2554,2557],{"class":182,"line":327},[180,2555,2556],{"class":226},"  FilterState",[180,2558,296],{"class":186},[180,2560,2561,2564],{"class":182,"line":340},[180,2562,2563],{"class":226},"  LegendControlOptions",[180,2565,296],{"class":186},[180,2567,2568,2571,2573,2575,2577,2579],{"class":182,"line":346},[180,2569,2570],{"class":186},"}",[180,2572,244],{"class":219},[180,2574,247],{"class":186},[180,2576,250],{"class":207},[180,2578,253],{"class":186},[180,2580,256],{"class":186},[180,2582,2583],{"class":182,"line":351},[180,2584,263],{"emptyLinePlaceholder":262},[180,2586,2587],{"class":182,"line":364},[180,2588,2589],{"class":2055},"\u002F\u002F Category item\n",[180,2591,2592,2595,2598,2600,2603,2606],{"class":182,"line":413},[180,2593,2594],{"class":194},"const",[180,2596,2597],{"class":226}," categoryItem",[180,2599,286],{"class":186},[180,2601,2602],{"class":1662}," CategoryLegendItem",[180,2604,2605],{"class":186}," =",[180,2607,277],{"class":186},[180,2609,2610,2613,2615,2617,2619,2621],{"class":182,"line":457},[180,2611,2612],{"class":190},"  value",[180,2614,286],{"class":186},[180,2616,247],{"class":186},[180,2618,377],{"class":207},[180,2620,253],{"class":186},[180,2622,296],{"class":186},[180,2624,2625,2628,2630,2632,2634,2636],{"class":182,"line":501},[180,2626,2627],{"class":190},"  label",[180,2629,286],{"class":186},[180,2631,247],{"class":186},[180,2633,391],{"class":207},[180,2635,253],{"class":186},[180,2637,296],{"class":186},[180,2639,2640,2643,2645,2647,2649,2651],{"class":182,"line":509},[180,2641,2642],{"class":190},"  color",[180,2644,286],{"class":186},[180,2646,247],{"class":186},[180,2648,405],{"class":207},[180,2650,253],{"class":186},[180,2652,296],{"class":186},[180,2654,2655,2657,2659,2663],{"class":182,"line":519},[180,2656,1694],{"class":190},[180,2658,286],{"class":186},[180,2660,2662],{"class":2661},"sfNiH"," true",[180,2664,296],{"class":186},[180,2666,2667,2670,2672,2675,2677],{"class":182,"line":524},[180,2668,2669],{"class":190},"  count",[180,2671,286],{"class":186},[180,2673,2674],{"class":313}," 150",[180,2676,230],{"class":186},[180,2678,2679],{"class":2055}," \u002F\u002F Optional feature count\n",[180,2681,2682],{"class":182,"line":534},[180,2683,2684],{"class":186},"};\n",[180,2686,2687],{"class":182,"line":568},[180,2688,263],{"emptyLinePlaceholder":262},[180,2690,2691],{"class":182,"line":577},[180,2692,2693],{"class":2055},"\u002F\u002F Gradient item\n",[180,2695,2696,2698,2701,2703,2706,2708],{"class":182,"line":593},[180,2697,2594],{"class":194},[180,2699,2700],{"class":226}," gradientItem",[180,2702,286],{"class":186},[180,2704,2705],{"class":1662}," GradientLegendItem",[180,2707,2605],{"class":186},[180,2709,277],{"class":186},[180,2711,2712,2715,2717,2719],{"class":182,"line":608},[180,2713,2714],{"class":190},"  min",[180,2716,286],{"class":186},[180,2718,846],{"class":313},[180,2720,296],{"class":186},[180,2722,2723,2726,2728,2730],{"class":182,"line":623},[180,2724,2725],{"class":190},"  max",[180,2727,286],{"class":186},[180,2729,858],{"class":313},[180,2731,296],{"class":186},[180,2733,2734,2737,2739,2741,2743,2746,2748,2750,2752,2755,2757,2759],{"class":182,"line":638},[180,2735,2736],{"class":190},"  colors",[180,2738,286],{"class":186},[180,2740,307],{"class":226},[180,2742,253],{"class":186},[180,2744,2745],{"class":207},"#0000ff",[180,2747,253],{"class":186},[180,2749,230],{"class":186},[180,2751,247],{"class":186},[180,2753,2754],{"class":207},"#ff0000",[180,2756,253],{"class":186},[180,2758,322],{"class":226},[180,2760,296],{"class":186},[180,2762,2763,2766,2768,2770,2772,2774],{"class":182,"line":644},[180,2764,2765],{"class":190},"  minLabel",[180,2767,286],{"class":186},[180,2769,247],{"class":186},[180,2771,919],{"class":207},[180,2773,253],{"class":186},[180,2775,296],{"class":186},[180,2777,2778,2781,2783,2785,2787,2789],{"class":182,"line":652},[180,2779,2780],{"class":190},"  maxLabel",[180,2782,286],{"class":186},[180,2784,247],{"class":186},[180,2786,935],{"class":207},[180,2788,253],{"class":186},[180,2790,296],{"class":186},[180,2792,2793,2796,2798,2800,2802,2804,2807,2809,2811,2813,2816,2818,2820,2822,2824],{"class":182,"line":667},[180,2794,2795],{"class":190},"  stops",[180,2797,286],{"class":186},[180,2799,307],{"class":226},[180,2801,2468],{"class":313},[180,2803,230],{"class":186},[180,2805,2806],{"class":313}," 25",[180,2808,230],{"class":186},[180,2810,1191],{"class":313},[180,2812,230],{"class":186},[180,2814,2815],{"class":313}," 75",[180,2817,230],{"class":186},[180,2819,858],{"class":313},[180,2821,322],{"class":226},[180,2823,230],{"class":186},[180,2825,2826],{"class":2055}," \u002F\u002F Optional color stops\n",[180,2828,2829],{"class":182,"line":682},[180,2830,2684],{"class":186},[180,2832,2833],{"class":182,"line":697},[180,2834,263],{"emptyLinePlaceholder":262},[180,2836,2837],{"class":182,"line":712},[180,2838,2839],{"class":2055},"\u002F\u002F Size item\n",[180,2841,2842,2844,2847,2849,2852,2854],{"class":182,"line":727},[180,2843,2594],{"class":194},[180,2845,2846],{"class":226}," sizeItem",[180,2848,286],{"class":186},[180,2850,2851],{"class":1662}," SizeLegendItem",[180,2853,2605],{"class":186},[180,2855,277],{"class":186},[180,2857,2858,2860,2862,2864],{"class":182,"line":742},[180,2859,2612],{"class":190},[180,2861,286],{"class":186},[180,2863,1191],{"class":313},[180,2865,296],{"class":186},[180,2867,2868,2870,2872,2874,2877,2879],{"class":182,"line":747},[180,2869,2627],{"class":190},[180,2871,286],{"class":186},[180,2873,247],{"class":186},[180,2875,2876],{"class":207},"Medium",[180,2878,253],{"class":186},[180,2880,296],{"class":186},[180,2882,2883,2886,2888,2890],{"class":182,"line":757},[180,2884,2885],{"class":190},"  size",[180,2887,286],{"class":186},[180,2889,1213],{"class":313},[180,2891,296],{"class":186},[180,2893,2895],{"class":182,"line":2894},35,[180,2896,2684],{"class":186},[180,2898,2900],{"class":182,"line":2899},36,[180,2901,263],{"emptyLinePlaceholder":262},[180,2903,2905],{"class":182,"line":2904},37,[180,2906,2907],{"class":2055},"\u002F\u002F Filter state\n",[180,2909,2911,2913,2916,2918,2920,2922],{"class":182,"line":2910},38,[180,2912,2594],{"class":194},[180,2914,2915],{"class":226}," filterState",[180,2917,286],{"class":186},[180,2919,1737],{"class":1662},[180,2921,2605],{"class":186},[180,2923,277],{"class":186},[180,2925,2927,2930,2932,2934,2936,2938,2940,2942,2944,2946,2948,2950],{"class":182,"line":2926},39,[180,2928,2929],{"class":190},"  visibleValues",[180,2931,286],{"class":186},[180,2933,307],{"class":226},[180,2935,253],{"class":186},[180,2937,377],{"class":207},[180,2939,253],{"class":186},[180,2941,230],{"class":186},[180,2943,247],{"class":186},[180,2945,424],{"class":207},[180,2947,253],{"class":186},[180,2949,322],{"class":226},[180,2951,296],{"class":186},[180,2953,2955,2958,2960,2962,2964],{"class":182,"line":2954},40,[180,2956,2957],{"class":190},"  minRange",[180,2959,286],{"class":186},[180,2961,846],{"class":313},[180,2963,230],{"class":186},[180,2965,2966],{"class":2055}," \u002F\u002F For gradient filtering\n",[180,2968,2970,2973,2975,2977],{"class":182,"line":2969},41,[180,2971,2972],{"class":190},"  maxRange",[180,2974,286],{"class":186},[180,2976,858],{"class":313},[180,2978,296],{"class":186},[180,2980,2982],{"class":182,"line":2981},42,[180,2983,2684],{"class":186},[2985,2986,2987],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":176,"searchDepth":216,"depth":216,"links":2989},[2990,2991,2996,3007,3012,3013,3017,3021],{"id":109,"depth":216,"text":110},{"id":163,"depth":216,"text":164,"children":2992},[2993,2994,2995],{"id":168,"depth":259,"text":169},{"id":766,"depth":259,"text":767},{"id":1079,"depth":259,"text":1080},{"id":1384,"depth":216,"text":1385,"children":2997},[2998,2999,3000,3001,3002,3003,3004,3005,3006],{"id":1388,"depth":259,"text":1389},{"id":1413,"depth":259,"text":1413},{"id":1443,"depth":259,"text":1443},{"id":1468,"depth":259,"text":1468},{"id":1496,"depth":259,"text":1496},{"id":1521,"depth":259,"text":1464},{"id":1560,"depth":259,"text":1560},{"id":1587,"depth":259,"text":1587},{"id":1613,"depth":259,"text":1613},{"id":1639,"depth":216,"text":1640,"children":3008},[3009,3010,3011],{"id":1643,"depth":259,"text":1644},{"id":1709,"depth":259,"text":1710},{"id":1761,"depth":259,"text":1762},{"id":1768,"depth":216,"text":1769},{"id":2029,"depth":216,"text":2030,"children":3014},[3015,3016],{"id":2036,"depth":259,"text":2037},{"id":2129,"depth":259,"text":2130},{"id":2218,"depth":216,"text":2219,"children":3018},[3019,3020],{"id":2222,"depth":259,"text":65},{"id":2299,"depth":259,"text":2300},{"id":1652,"depth":216,"text":2502},"Interactive legend control with category, gradient, and size visualization","md",null,{},{"title":87,"description":3022},"_5Va8QL2T9Pn9mQvubPUkk30Xd2iaEVXk0Y8eWSlyDM",[3029,3024],{"title":83,"path":84,"stem":85,"description":3030,"children":-1},"VControlLayer and VControlLayerGroup - Layer visibility toggle and opacity slider controls for MapLibre and deck.gl layers",1781101878957]