[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-\u002Fblog\u002Fusing-township-api-with-mapbox":3},{"id":4,"title":5,"body":6,"cover":30,"date":2597,"description":2598,"extension":2599,"meta":2600,"navigation":290,"path":2603,"seo":2604,"stem":2605,"tags":2606,"__hash__":2611},"blog\u002Fblog\u002Fusing-township-api-with-mapbox.md","Build a Survey Grid Map with Mapbox and Township Canada",{"type":7,"value":8,"toc":2588},"minimark",[9,18,21,24,31,36,59,63,66,69,79,102,109,1051,1068,1084,1088,1102,2126,2145,2151,2155,2161,2469,2479,2483,2486,2493,2507,2518,2527,2531,2539,2550,2554,2585],[10,11,12,13,17],"p",{},"An energy company's GIS team gets a request: build an internal web tool that shows well sites on a survey grid map. Field staff need to type in a legal land description — something like ",[14,15,16],"code",{},"NW-25-24-1-W5"," — and see exactly where that quarter section sits, with township and section grid lines visible underneath.",[10,19,20],{},"This is a common requirement across oil and gas, agriculture, utilities, and land management in western Canada. The DLS (Dominion Land Survey) grid is how land is recorded, and any serious map tool needs to show it.",[10,22,23],{},"This tutorial walks through the two core pieces: adding vector tile grid layers to a Mapbox GL JS map, and calling the Township Canada Search API to find and highlight a location by legal land description.",[10,25,26],{},[27,28],"img",{"alt":29,"src":30},"DLS survey grid on a Mapbox map showing township, section, and LSD boundaries","\u002Fimages\u002Fblog\u002Fusing-township-api-with-mapbox\u002Fcover.webp",[32,33,35],"h2",{"id":34},"what-youll-need","What you'll need",[37,38,39,51],"ul",{},[40,41,42,43,50],"li",{},"A Mapbox access token — sign up at ",[44,45,49],"a",{"href":46,"rel":47},"https:\u002F\u002Fwww.mapbox.com\u002F",[48],"nofollow","mapbox.com"," and copy your default public token",[40,52,53,54,58],{},"A Township Canada API key — subscribe to the Maps API and Search API from the ",[44,55,57],{"href":56},"\u002Fapp\u002Fapi","API page",", then create a key from your account settings",[32,60,62],{"id":61},"adding-the-survey-grid","Adding the survey grid",[10,64,65],{},"Township Canada serves the DLS grid as vector tiles. Mapbox GL JS loads vector tiles natively, so no plugins are required — you add a source and a layer, just like any other tileset.",[10,67,68],{},"The tile URL pattern for the DLS township grid is:",[70,71,76],"pre",{"className":72,"code":74,"language":75},[73],"language-text","https:\u002F\u002Fmaps.townshipcanada.com\u002Fgrid\u002Fdls\u002Ftwp\u002F{z}\u002F{x}\u002F{y}.mvt?api_key=YOUR_API_KEY\n","text",[14,77,74],{"__ignoreMap":78},"",[10,80,81,82,85,86,89,90,93,94,97,98,101],{},"Grid levels each have their own tileset: ",[14,83,84],{},"grid\u002Fdls\u002Ftwp"," for townships (~23,000 acres), ",[14,87,88],{},"grid\u002Fdls\u002Fsec"," for sections (~640 acres), and ",[14,91,92],{},"grid\u002Fdls\u002Flsd"," for LSDs (~40 acres). Each tileset has a matching label tileset (append ",[14,95,96],{},"_label",") with ",[14,99,100],{},"descriptor"," properties for rendering text on the grid cells.",[10,103,104,105,108],{},"Here's how to add the township and section grids inside a ",[14,106,107],{},"map.on('load')"," callback, with zoom-dependent visibility so each level appears at an appropriate scale:",[70,110,114],{"className":111,"code":112,"language":113,"meta":78,"style":78},"language-javascript shiki shiki-themes material-theme-lighter vitesse-light vitesse-dark","map.on(\"load\", () => {\n  \u002F\u002F Township grid — visible from zoom 6 to 12\n  map.addSource(\"twp\", {\n    type: \"vector\",\n    tiles: [`https:\u002F\u002Fmaps.townshipcanada.com\u002Fgrid\u002Fdls\u002Ftwp\u002F{z}\u002F{x}\u002F{y}.mvt?api_key=${TC_API_KEY}`],\n    minzoom: 0,\n    maxzoom: 14\n  });\n\n  map.addLayer({\n    id: \"ab_twp\",\n    type: \"line\",\n    source: \"twp\",\n    \"source-layer\": \"ab_twp\",\n    minzoom: 6,\n    maxzoom: 12,\n    paint: { \"line-color\": \"#2d5a47\", \"line-width\": 1.5 }\n  });\n\n  \u002F\u002F Township labels use the descriptor property\n  map.addSource(\"twp_label\", {\n    type: \"vector\",\n    tiles: [\n      `https:\u002F\u002Fmaps.townshipcanada.com\u002Fgrid\u002Fdls\u002Ftwp_label\u002F{z}\u002F{x}\u002F{y}.mvt?api_key=${TC_API_KEY}`\n    ],\n    minzoom: 0,\n    maxzoom: 14\n  });\n\n  map.addLayer({\n    id: \"ab_twp_label\",\n    type: \"symbol\",\n    source: \"twp_label\",\n    \"source-layer\": \"ab_twp_label\",\n    minzoom: 10,\n    maxzoom: 12,\n    layout: { \"text-field\": \"{descriptor}\", \"text-size\": 14 },\n    paint: { \"text-color\": \"#333\", \"text-halo-color\": \"#fff\", \"text-halo-width\": 2 }\n  });\n\n  \u002F\u002F Section grid — visible from zoom 12 to 14\n  map.addSource(\"sec\", {\n    type: \"vector\",\n    tiles: [`https:\u002F\u002Fmaps.townshipcanada.com\u002Fgrid\u002Fdls\u002Fsec\u002F{z}\u002F{x}\u002F{y}.mvt?api_key=${TC_API_KEY}`],\n    minzoom: 9,\n    maxzoom: 14\n  });\n\n  map.addLayer({\n    id: \"ab_sec\",\n    type: \"line\",\n    source: \"sec\",\n    \"source-layer\": \"ab_sec\",\n    minzoom: 12,\n    maxzoom: 14,\n    paint: { \"line-color\": \"#4a7c59\", \"line-width\": 1 }\n  });\n});\n","javascript",[14,115,116,160,167,192,213,248,262,273,285,292,307,324,339,355,377,389,401,445,454,459,465,487,502,512,530,538,549,558,567,572,585,601,617,632,651,663,674,717,776,785,790,796,818,833,859,871,880,889,894,907,923,938,953,972,983,994,1033,1042],{"__ignoreMap":78},[117,118,121,125,129,133,137,141,145,147,150,153,157],"span",{"class":119,"line":120},"line",1,[117,122,124],{"class":123},"sSC40","map",[117,126,128],{"class":127},"soVBu",".",[117,130,132],{"class":131},"sljsM","on",[117,134,136],{"class":135},"snCua","(",[117,138,140],{"class":139},"sbYkP","\"",[117,142,144],{"class":143},"sTbE_","load",[117,146,140],{"class":139},[117,148,149],{"class":127},",",[117,151,152],{"class":127}," ()",[117,154,156],{"class":155},"sIOqK"," =>",[117,158,159],{"class":127}," {\n",[117,161,163],{"class":119,"line":162},2,[117,164,166],{"class":165},"s9Tkl","  \u002F\u002F Township grid — visible from zoom 6 to 12\n",[117,168,170,173,175,178,181,183,186,188,190],{"class":119,"line":169},3,[117,171,172],{"class":123},"  map",[117,174,128],{"class":127},[117,176,177],{"class":131},"addSource",[117,179,136],{"class":180},"sLdnO",[117,182,140],{"class":139},[117,184,185],{"class":143},"twp",[117,187,140],{"class":139},[117,189,149],{"class":127},[117,191,159],{"class":127},[117,193,195,199,202,205,208,210],{"class":119,"line":194},4,[117,196,198],{"class":197},"suXOh","    type",[117,200,201],{"class":127},":",[117,203,204],{"class":139}," \"",[117,206,207],{"class":143},"vector",[117,209,140],{"class":139},[117,211,212],{"class":127},",\n",[117,214,216,219,221,224,227,230,234,238,241,243,246],{"class":119,"line":215},5,[117,217,218],{"class":197},"    tiles",[117,220,201],{"class":127},[117,222,223],{"class":180}," [",[117,225,226],{"class":139},"`",[117,228,229],{"class":143},"https:\u002F\u002Fmaps.townshipcanada.com\u002Fgrid\u002Fdls\u002Ftwp\u002F{z}\u002F{x}\u002F{y}.mvt?api_key=",[117,231,233],{"class":232},"s8XtY","${",[117,235,237],{"class":236},"su_V2","TC_API_KEY",[117,239,240],{"class":232},"}",[117,242,226],{"class":139},[117,244,245],{"class":180},"]",[117,247,212],{"class":127},[117,249,251,254,256,260],{"class":119,"line":250},6,[117,252,253],{"class":197},"    minzoom",[117,255,201],{"class":127},[117,257,259],{"class":258},"s7CZa"," 0",[117,261,212],{"class":127},[117,263,265,268,270],{"class":119,"line":264},7,[117,266,267],{"class":197},"    maxzoom",[117,269,201],{"class":127},[117,271,272],{"class":258}," 14\n",[117,274,276,279,282],{"class":119,"line":275},8,[117,277,278],{"class":127},"  }",[117,280,281],{"class":180},")",[117,283,284],{"class":127},";\n",[117,286,288],{"class":119,"line":287},9,[117,289,291],{"emptyLinePlaceholder":290},true,"\n",[117,293,295,297,299,302,304],{"class":119,"line":294},10,[117,296,172],{"class":123},[117,298,128],{"class":127},[117,300,301],{"class":131},"addLayer",[117,303,136],{"class":180},[117,305,306],{"class":127},"{\n",[117,308,310,313,315,317,320,322],{"class":119,"line":309},11,[117,311,312],{"class":197},"    id",[117,314,201],{"class":127},[117,316,204],{"class":139},[117,318,319],{"class":143},"ab_twp",[117,321,140],{"class":139},[117,323,212],{"class":127},[117,325,327,329,331,333,335,337],{"class":119,"line":326},12,[117,328,198],{"class":197},[117,330,201],{"class":127},[117,332,204],{"class":139},[117,334,119],{"class":143},[117,336,140],{"class":139},[117,338,212],{"class":127},[117,340,342,345,347,349,351,353],{"class":119,"line":341},13,[117,343,344],{"class":197},"    source",[117,346,201],{"class":127},[117,348,204],{"class":139},[117,350,185],{"class":143},[117,352,140],{"class":139},[117,354,212],{"class":127},[117,356,358,361,365,367,369,371,373,375],{"class":119,"line":357},14,[117,359,360],{"class":139},"    \"",[117,362,364],{"class":363},"sQtxO","source-layer",[117,366,140],{"class":139},[117,368,201],{"class":127},[117,370,204],{"class":139},[117,372,319],{"class":143},[117,374,140],{"class":139},[117,376,212],{"class":127},[117,378,380,382,384,387],{"class":119,"line":379},15,[117,381,253],{"class":197},[117,383,201],{"class":127},[117,385,386],{"class":258}," 6",[117,388,212],{"class":127},[117,390,392,394,396,399],{"class":119,"line":391},16,[117,393,267],{"class":197},[117,395,201],{"class":127},[117,397,398],{"class":258}," 12",[117,400,212],{"class":127},[117,402,404,407,409,412,414,417,419,421,423,426,428,430,432,435,437,439,442],{"class":119,"line":403},17,[117,405,406],{"class":197},"    paint",[117,408,201],{"class":127},[117,410,411],{"class":127}," {",[117,413,204],{"class":139},[117,415,416],{"class":363},"line-color",[117,418,140],{"class":139},[117,420,201],{"class":127},[117,422,204],{"class":139},[117,424,425],{"class":143},"#2d5a47",[117,427,140],{"class":139},[117,429,149],{"class":127},[117,431,204],{"class":139},[117,433,434],{"class":363},"line-width",[117,436,140],{"class":139},[117,438,201],{"class":127},[117,440,441],{"class":258}," 1.5",[117,443,444],{"class":127}," }\n",[117,446,448,450,452],{"class":119,"line":447},18,[117,449,278],{"class":127},[117,451,281],{"class":180},[117,453,284],{"class":127},[117,455,457],{"class":119,"line":456},19,[117,458,291],{"emptyLinePlaceholder":290},[117,460,462],{"class":119,"line":461},20,[117,463,464],{"class":165},"  \u002F\u002F Township labels use the descriptor property\n",[117,466,468,470,472,474,476,478,481,483,485],{"class":119,"line":467},21,[117,469,172],{"class":123},[117,471,128],{"class":127},[117,473,177],{"class":131},[117,475,136],{"class":180},[117,477,140],{"class":139},[117,479,480],{"class":143},"twp_label",[117,482,140],{"class":139},[117,484,149],{"class":127},[117,486,159],{"class":127},[117,488,490,492,494,496,498,500],{"class":119,"line":489},22,[117,491,198],{"class":197},[117,493,201],{"class":127},[117,495,204],{"class":139},[117,497,207],{"class":143},[117,499,140],{"class":139},[117,501,212],{"class":127},[117,503,505,507,509],{"class":119,"line":504},23,[117,506,218],{"class":197},[117,508,201],{"class":127},[117,510,511],{"class":180}," [\n",[117,513,515,518,521,523,525,527],{"class":119,"line":514},24,[117,516,517],{"class":139},"      `",[117,519,520],{"class":143},"https:\u002F\u002Fmaps.townshipcanada.com\u002Fgrid\u002Fdls\u002Ftwp_label\u002F{z}\u002F{x}\u002F{y}.mvt?api_key=",[117,522,233],{"class":232},[117,524,237],{"class":236},[117,526,240],{"class":232},[117,528,529],{"class":139},"`\n",[117,531,533,536],{"class":119,"line":532},25,[117,534,535],{"class":180},"    ]",[117,537,212],{"class":127},[117,539,541,543,545,547],{"class":119,"line":540},26,[117,542,253],{"class":197},[117,544,201],{"class":127},[117,546,259],{"class":258},[117,548,212],{"class":127},[117,550,552,554,556],{"class":119,"line":551},27,[117,553,267],{"class":197},[117,555,201],{"class":127},[117,557,272],{"class":258},[117,559,561,563,565],{"class":119,"line":560},28,[117,562,278],{"class":127},[117,564,281],{"class":180},[117,566,284],{"class":127},[117,568,570],{"class":119,"line":569},29,[117,571,291],{"emptyLinePlaceholder":290},[117,573,575,577,579,581,583],{"class":119,"line":574},30,[117,576,172],{"class":123},[117,578,128],{"class":127},[117,580,301],{"class":131},[117,582,136],{"class":180},[117,584,306],{"class":127},[117,586,588,590,592,594,597,599],{"class":119,"line":587},31,[117,589,312],{"class":197},[117,591,201],{"class":127},[117,593,204],{"class":139},[117,595,596],{"class":143},"ab_twp_label",[117,598,140],{"class":139},[117,600,212],{"class":127},[117,602,604,606,608,610,613,615],{"class":119,"line":603},32,[117,605,198],{"class":197},[117,607,201],{"class":127},[117,609,204],{"class":139},[117,611,612],{"class":143},"symbol",[117,614,140],{"class":139},[117,616,212],{"class":127},[117,618,620,622,624,626,628,630],{"class":119,"line":619},33,[117,621,344],{"class":197},[117,623,201],{"class":127},[117,625,204],{"class":139},[117,627,480],{"class":143},[117,629,140],{"class":139},[117,631,212],{"class":127},[117,633,635,637,639,641,643,645,647,649],{"class":119,"line":634},34,[117,636,360],{"class":139},[117,638,364],{"class":363},[117,640,140],{"class":139},[117,642,201],{"class":127},[117,644,204],{"class":139},[117,646,596],{"class":143},[117,648,140],{"class":139},[117,650,212],{"class":127},[117,652,654,656,658,661],{"class":119,"line":653},35,[117,655,253],{"class":197},[117,657,201],{"class":127},[117,659,660],{"class":258}," 10",[117,662,212],{"class":127},[117,664,666,668,670,672],{"class":119,"line":665},36,[117,667,267],{"class":197},[117,669,201],{"class":127},[117,671,398],{"class":258},[117,673,212],{"class":127},[117,675,677,680,682,684,686,689,691,693,695,698,700,702,704,707,709,711,714],{"class":119,"line":676},37,[117,678,679],{"class":197},"    layout",[117,681,201],{"class":127},[117,683,411],{"class":127},[117,685,204],{"class":139},[117,687,688],{"class":363},"text-field",[117,690,140],{"class":139},[117,692,201],{"class":127},[117,694,204],{"class":139},[117,696,697],{"class":143},"{descriptor}",[117,699,140],{"class":139},[117,701,149],{"class":127},[117,703,204],{"class":139},[117,705,706],{"class":363},"text-size",[117,708,140],{"class":139},[117,710,201],{"class":127},[117,712,713],{"class":258}," 14",[117,715,716],{"class":127}," },\n",[117,718,720,722,724,726,728,731,733,735,737,740,742,744,746,749,751,753,755,758,760,762,764,767,769,771,774],{"class":119,"line":719},38,[117,721,406],{"class":197},[117,723,201],{"class":127},[117,725,411],{"class":127},[117,727,204],{"class":139},[117,729,730],{"class":363},"text-color",[117,732,140],{"class":139},[117,734,201],{"class":127},[117,736,204],{"class":139},[117,738,739],{"class":143},"#333",[117,741,140],{"class":139},[117,743,149],{"class":127},[117,745,204],{"class":139},[117,747,748],{"class":363},"text-halo-color",[117,750,140],{"class":139},[117,752,201],{"class":127},[117,754,204],{"class":139},[117,756,757],{"class":143},"#fff",[117,759,140],{"class":139},[117,761,149],{"class":127},[117,763,204],{"class":139},[117,765,766],{"class":363},"text-halo-width",[117,768,140],{"class":139},[117,770,201],{"class":127},[117,772,773],{"class":258}," 2",[117,775,444],{"class":127},[117,777,779,781,783],{"class":119,"line":778},39,[117,780,278],{"class":127},[117,782,281],{"class":180},[117,784,284],{"class":127},[117,786,788],{"class":119,"line":787},40,[117,789,291],{"emptyLinePlaceholder":290},[117,791,793],{"class":119,"line":792},41,[117,794,795],{"class":165},"  \u002F\u002F Section grid — visible from zoom 12 to 14\n",[117,797,799,801,803,805,807,809,812,814,816],{"class":119,"line":798},42,[117,800,172],{"class":123},[117,802,128],{"class":127},[117,804,177],{"class":131},[117,806,136],{"class":180},[117,808,140],{"class":139},[117,810,811],{"class":143},"sec",[117,813,140],{"class":139},[117,815,149],{"class":127},[117,817,159],{"class":127},[117,819,821,823,825,827,829,831],{"class":119,"line":820},43,[117,822,198],{"class":197},[117,824,201],{"class":127},[117,826,204],{"class":139},[117,828,207],{"class":143},[117,830,140],{"class":139},[117,832,212],{"class":127},[117,834,836,838,840,842,844,847,849,851,853,855,857],{"class":119,"line":835},44,[117,837,218],{"class":197},[117,839,201],{"class":127},[117,841,223],{"class":180},[117,843,226],{"class":139},[117,845,846],{"class":143},"https:\u002F\u002Fmaps.townshipcanada.com\u002Fgrid\u002Fdls\u002Fsec\u002F{z}\u002F{x}\u002F{y}.mvt?api_key=",[117,848,233],{"class":232},[117,850,237],{"class":236},[117,852,240],{"class":232},[117,854,226],{"class":139},[117,856,245],{"class":180},[117,858,212],{"class":127},[117,860,862,864,866,869],{"class":119,"line":861},45,[117,863,253],{"class":197},[117,865,201],{"class":127},[117,867,868],{"class":258}," 9",[117,870,212],{"class":127},[117,872,874,876,878],{"class":119,"line":873},46,[117,875,267],{"class":197},[117,877,201],{"class":127},[117,879,272],{"class":258},[117,881,883,885,887],{"class":119,"line":882},47,[117,884,278],{"class":127},[117,886,281],{"class":180},[117,888,284],{"class":127},[117,890,892],{"class":119,"line":891},48,[117,893,291],{"emptyLinePlaceholder":290},[117,895,897,899,901,903,905],{"class":119,"line":896},49,[117,898,172],{"class":123},[117,900,128],{"class":127},[117,902,301],{"class":131},[117,904,136],{"class":180},[117,906,306],{"class":127},[117,908,910,912,914,916,919,921],{"class":119,"line":909},50,[117,911,312],{"class":197},[117,913,201],{"class":127},[117,915,204],{"class":139},[117,917,918],{"class":143},"ab_sec",[117,920,140],{"class":139},[117,922,212],{"class":127},[117,924,926,928,930,932,934,936],{"class":119,"line":925},51,[117,927,198],{"class":197},[117,929,201],{"class":127},[117,931,204],{"class":139},[117,933,119],{"class":143},[117,935,140],{"class":139},[117,937,212],{"class":127},[117,939,941,943,945,947,949,951],{"class":119,"line":940},52,[117,942,344],{"class":197},[117,944,201],{"class":127},[117,946,204],{"class":139},[117,948,811],{"class":143},[117,950,140],{"class":139},[117,952,212],{"class":127},[117,954,956,958,960,962,964,966,968,970],{"class":119,"line":955},53,[117,957,360],{"class":139},[117,959,364],{"class":363},[117,961,140],{"class":139},[117,963,201],{"class":127},[117,965,204],{"class":139},[117,967,918],{"class":143},[117,969,140],{"class":139},[117,971,212],{"class":127},[117,973,975,977,979,981],{"class":119,"line":974},54,[117,976,253],{"class":197},[117,978,201],{"class":127},[117,980,398],{"class":258},[117,982,212],{"class":127},[117,984,986,988,990,992],{"class":119,"line":985},55,[117,987,267],{"class":197},[117,989,201],{"class":127},[117,991,713],{"class":258},[117,993,212],{"class":127},[117,995,997,999,1001,1003,1005,1007,1009,1011,1013,1016,1018,1020,1022,1024,1026,1028,1031],{"class":119,"line":996},56,[117,998,406],{"class":197},[117,1000,201],{"class":127},[117,1002,411],{"class":127},[117,1004,204],{"class":139},[117,1006,416],{"class":363},[117,1008,140],{"class":139},[117,1010,201],{"class":127},[117,1012,204],{"class":139},[117,1014,1015],{"class":143},"#4a7c59",[117,1017,140],{"class":139},[117,1019,149],{"class":127},[117,1021,204],{"class":139},[117,1023,434],{"class":363},[117,1025,140],{"class":139},[117,1027,201],{"class":127},[117,1029,1030],{"class":258}," 1",[117,1032,444],{"class":127},[117,1034,1036,1038,1040],{"class":119,"line":1035},57,[117,1037,278],{"class":127},[117,1039,281],{"class":180},[117,1041,284],{"class":127},[117,1043,1045,1047,1049],{"class":119,"line":1044},58,[117,1046,240],{"class":127},[117,1048,281],{"class":135},[117,1050,284],{"class":127},[10,1052,1053,1054,1056,1057,1060,1061,1063,1064,1067],{},"Note that vector tile features expose a ",[14,1055,100],{}," property for labels (e.g., ",[14,1058,1059],{},"\"TWP 24 RNG 1 W5\"","). This is the correct property to reference in ",[14,1062,688],{}," expressions for label layers. The Search API response uses ",[14,1065,1066],{},"legal_location"," on features returned from coordinate lookup — a different field for a different purpose.",[10,1069,1070,1071,1074,1075,1078,1079,1083],{},"To cover Saskatchewan and Manitoba, add layers using their source-layer names (",[14,1072,1073],{},"sk_twp",", ",[14,1076,1077],{},"mb_sec",", etc.) from the same tile sources. See the ",[44,1080,1082],{"href":1081},"\u002Fguides\u002Fmaps-api-vector-tiles","Maps API vector tiles guide"," for the full list.",[32,1085,1087],{"id":1086},"searching-by-legal-land-description","Searching by legal land description",[10,1089,1090,1091,1094,1095,1098,1099,128],{},"Once the grid is on the map, users need a way to find specific locations. The Search API takes a legal land description string and returns a GeoJSON FeatureCollection with two features: the parcel boundary as a ",[14,1092,1093],{},"MultiPolygon",", and a centroid ",[14,1096,1097],{},"Point"," identified by ",[14,1100,1101],{},"shape: \"centroid\"",[70,1103,1105],{"className":111,"code":1104,"language":113,"meta":78,"style":78},"async function searchAndFlyTo(query) {\n  const response = await fetch(\n    `https:\u002F\u002Fdeveloper.townshipcanada.com\u002Fv1\u002Fsearch\u002Flegal-location?location=${encodeURIComponent(query)}`,\n    { headers: { Authorization: \"Bearer \" + TC_API_KEY } }\n  );\n\n  const data = await response.json();\n  if (!data.features || data.features.length === 0) return;\n\n  \u002F\u002F Identify the centroid and polygon features\n  const centroid = data.features.find((f) => f.properties.shape === \"centroid\");\n  const polygon = data.features.find((f) => f.geometry.type === \"MultiPolygon\");\n\n  if (!centroid) return;\n\n  const [lng, lat] = centroid.geometry.coordinates;\n\n  \u002F\u002F Fly to the location and place a marker\n  map.flyTo({ center: [lng, lat], zoom: 14, duration: 2000 });\n\n  new mapboxgl.Marker({ color: \"#2d5a47\" })\n    .setLngLat([lng, lat])\n    .setPopup(\n      new mapboxgl.Popup().setHTML(\n        `\u003Cstrong>${centroid.properties.legal_location}\u003C\u002Fstrong>\u003Cbr>` +\n          `${lat.toFixed(6)}, ${lng.toFixed(6)}`\n      )\n    )\n    .addTo(map);\n\n  \u002F\u002F Draw the parcel boundary\n  if (polygon) {\n    if (map.getSource(\"search-result\")) {\n      map.removeLayer(\"search-result-fill\");\n      map.removeLayer(\"search-result-outline\");\n      map.removeSource(\"search-result\");\n    }\n\n    map.addSource(\"search-result\", { type: \"geojson\", data: polygon });\n    map.addLayer({\n      id: \"search-result-fill\",\n      type: \"fill\",\n      source: \"search-result\",\n      paint: { \"fill-color\": \"#2d5a47\", \"fill-opacity\": 0.15 }\n    });\n    map.addLayer({\n      id: \"search-result-outline\",\n      type: \"line\",\n      source: \"search-result\",\n      paint: { \"line-color\": \"#2d5a47\", \"line-width\": 2 }\n    });\n  }\n}\n\n\u002F\u002F Find a quarter section in Alberta\nsearchAndFlyTo(\"NW-25-24-1-W5\");\n",[14,1106,1107,1129,1150,1175,1211,1218,1222,1245,1291,1295,1300,1357,1410,1414,1430,1434,1465,1469,1474,1528,1532,1565,1585,1594,1615,1645,1689,1694,1699,1714,1718,1723,1736,1764,1787,1808,1829,1834,1838,1885,1897,1912,1928,1943,1983,1992,2004,2018,2032,2046,2082,2090,2095,2100,2104,2109],{"__ignoreMap":78},[117,1108,1109,1113,1116,1119,1121,1125,1127],{"class":119,"line":120},[117,1110,1112],{"class":1111},"s5Kfy","async",[117,1114,1115],{"class":1111}," function",[117,1117,1118],{"class":131}," searchAndFlyTo",[117,1120,136],{"class":127},[117,1122,1124],{"class":1123},"sqOPj","query",[117,1126,281],{"class":127},[117,1128,159],{"class":127},[117,1130,1131,1134,1137,1140,1144,1147],{"class":119,"line":162},[117,1132,1133],{"class":1111},"  const",[117,1135,1136],{"class":123}," response",[117,1138,1139],{"class":127}," =",[117,1141,1143],{"class":1142},"siDh9"," await",[117,1145,1146],{"class":131}," fetch",[117,1148,1149],{"class":180},"(\n",[117,1151,1152,1155,1158,1160,1163,1165,1167,1169,1171,1173],{"class":119,"line":169},[117,1153,1154],{"class":139},"    `",[117,1156,1157],{"class":143},"https:\u002F\u002Fdeveloper.townshipcanada.com\u002Fv1\u002Fsearch\u002Flegal-location?location=",[117,1159,233],{"class":232},[117,1161,1162],{"class":131},"encodeURIComponent",[117,1164,136],{"class":135},[117,1166,1124],{"class":236},[117,1168,281],{"class":135},[117,1170,240],{"class":232},[117,1172,226],{"class":139},[117,1174,212],{"class":127},[117,1176,1177,1180,1183,1185,1187,1190,1192,1194,1197,1199,1203,1206,1209],{"class":119,"line":194},[117,1178,1179],{"class":127},"    {",[117,1181,1182],{"class":197}," headers",[117,1184,201],{"class":127},[117,1186,411],{"class":127},[117,1188,1189],{"class":197}," Authorization",[117,1191,201],{"class":127},[117,1193,204],{"class":139},[117,1195,1196],{"class":143},"Bearer ",[117,1198,140],{"class":139},[117,1200,1202],{"class":1201},"sVsLi"," +",[117,1204,1205],{"class":123}," TC_API_KEY",[117,1207,1208],{"class":127}," }",[117,1210,444],{"class":127},[117,1212,1213,1216],{"class":119,"line":215},[117,1214,1215],{"class":180},"  )",[117,1217,284],{"class":127},[117,1219,1220],{"class":119,"line":250},[117,1221,291],{"emptyLinePlaceholder":290},[117,1223,1224,1226,1229,1231,1233,1235,1237,1240,1243],{"class":119,"line":264},[117,1225,1133],{"class":1111},[117,1227,1228],{"class":123}," data",[117,1230,1139],{"class":127},[117,1232,1143],{"class":1142},[117,1234,1136],{"class":123},[117,1236,128],{"class":127},[117,1238,1239],{"class":131},"json",[117,1241,1242],{"class":180},"()",[117,1244,284],{"class":127},[117,1246,1247,1250,1253,1256,1259,1261,1264,1267,1269,1271,1273,1275,1279,1282,1284,1286,1289],{"class":119,"line":275},[117,1248,1249],{"class":1142},"  if",[117,1251,1252],{"class":180}," (",[117,1254,1255],{"class":1201},"!",[117,1257,1258],{"class":123},"data",[117,1260,128],{"class":127},[117,1262,1263],{"class":123},"features",[117,1265,1266],{"class":1201}," ||",[117,1268,1228],{"class":123},[117,1270,128],{"class":127},[117,1272,1263],{"class":123},[117,1274,128],{"class":127},[117,1276,1278],{"class":1277},"s131V","length",[117,1280,1281],{"class":1201}," ===",[117,1283,259],{"class":258},[117,1285,281],{"class":180},[117,1287,1288],{"class":1142}," return",[117,1290,284],{"class":127},[117,1292,1293],{"class":119,"line":287},[117,1294,291],{"emptyLinePlaceholder":290},[117,1296,1297],{"class":119,"line":294},[117,1298,1299],{"class":165},"  \u002F\u002F Identify the centroid and polygon features\n",[117,1301,1302,1304,1307,1309,1311,1313,1315,1317,1320,1322,1324,1327,1329,1331,1334,1336,1339,1341,1344,1346,1348,1351,1353,1355],{"class":119,"line":309},[117,1303,1133],{"class":1111},[117,1305,1306],{"class":123}," centroid",[117,1308,1139],{"class":127},[117,1310,1228],{"class":123},[117,1312,128],{"class":127},[117,1314,1263],{"class":123},[117,1316,128],{"class":127},[117,1318,1319],{"class":131},"find",[117,1321,136],{"class":180},[117,1323,136],{"class":127},[117,1325,1326],{"class":1123},"f",[117,1328,281],{"class":127},[117,1330,156],{"class":155},[117,1332,1333],{"class":123}," f",[117,1335,128],{"class":127},[117,1337,1338],{"class":123},"properties",[117,1340,128],{"class":127},[117,1342,1343],{"class":123},"shape",[117,1345,1281],{"class":1201},[117,1347,204],{"class":139},[117,1349,1350],{"class":143},"centroid",[117,1352,140],{"class":139},[117,1354,281],{"class":180},[117,1356,284],{"class":127},[117,1358,1359,1361,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1393,1395,1398,1400,1402,1404,1406,1408],{"class":119,"line":326},[117,1360,1133],{"class":1111},[117,1362,1363],{"class":123}," polygon",[117,1365,1139],{"class":127},[117,1367,1228],{"class":123},[117,1369,128],{"class":127},[117,1371,1263],{"class":123},[117,1373,128],{"class":127},[117,1375,1319],{"class":131},[117,1377,136],{"class":180},[117,1379,136],{"class":127},[117,1381,1326],{"class":1123},[117,1383,281],{"class":127},[117,1385,156],{"class":155},[117,1387,1333],{"class":123},[117,1389,128],{"class":127},[117,1391,1392],{"class":123},"geometry",[117,1394,128],{"class":127},[117,1396,1397],{"class":123},"type",[117,1399,1281],{"class":1201},[117,1401,204],{"class":139},[117,1403,1093],{"class":143},[117,1405,140],{"class":139},[117,1407,281],{"class":180},[117,1409,284],{"class":127},[117,1411,1412],{"class":119,"line":341},[117,1413,291],{"emptyLinePlaceholder":290},[117,1415,1416,1418,1420,1422,1424,1426,1428],{"class":119,"line":357},[117,1417,1249],{"class":1142},[117,1419,1252],{"class":180},[117,1421,1255],{"class":1201},[117,1423,1350],{"class":123},[117,1425,281],{"class":180},[117,1427,1288],{"class":1142},[117,1429,284],{"class":127},[117,1431,1432],{"class":119,"line":379},[117,1433,291],{"emptyLinePlaceholder":290},[117,1435,1436,1438,1440,1443,1445,1448,1450,1452,1454,1456,1458,1460,1463],{"class":119,"line":391},[117,1437,1133],{"class":1111},[117,1439,223],{"class":127},[117,1441,1442],{"class":123},"lng",[117,1444,149],{"class":127},[117,1446,1447],{"class":123}," lat",[117,1449,245],{"class":127},[117,1451,1139],{"class":127},[117,1453,1306],{"class":123},[117,1455,128],{"class":127},[117,1457,1392],{"class":123},[117,1459,128],{"class":127},[117,1461,1462],{"class":123},"coordinates",[117,1464,284],{"class":127},[117,1466,1467],{"class":119,"line":403},[117,1468,291],{"emptyLinePlaceholder":290},[117,1470,1471],{"class":119,"line":447},[117,1472,1473],{"class":165},"  \u002F\u002F Fly to the location and place a marker\n",[117,1475,1476,1478,1480,1483,1485,1488,1491,1493,1495,1497,1499,1501,1503,1505,1508,1510,1512,1514,1517,1519,1522,1524,1526],{"class":119,"line":456},[117,1477,172],{"class":123},[117,1479,128],{"class":127},[117,1481,1482],{"class":131},"flyTo",[117,1484,136],{"class":180},[117,1486,1487],{"class":127},"{",[117,1489,1490],{"class":197}," center",[117,1492,201],{"class":127},[117,1494,223],{"class":180},[117,1496,1442],{"class":123},[117,1498,149],{"class":127},[117,1500,1447],{"class":123},[117,1502,245],{"class":180},[117,1504,149],{"class":127},[117,1506,1507],{"class":197}," zoom",[117,1509,201],{"class":127},[117,1511,713],{"class":258},[117,1513,149],{"class":127},[117,1515,1516],{"class":197}," duration",[117,1518,201],{"class":127},[117,1520,1521],{"class":258}," 2000",[117,1523,1208],{"class":127},[117,1525,281],{"class":180},[117,1527,284],{"class":127},[117,1529,1530],{"class":119,"line":461},[117,1531,291],{"emptyLinePlaceholder":290},[117,1533,1534,1537,1540,1542,1545,1547,1549,1552,1554,1556,1558,1560,1562],{"class":119,"line":467},[117,1535,1536],{"class":1201},"  new",[117,1538,1539],{"class":123}," mapboxgl",[117,1541,128],{"class":127},[117,1543,1544],{"class":131},"Marker",[117,1546,136],{"class":180},[117,1548,1487],{"class":127},[117,1550,1551],{"class":197}," color",[117,1553,201],{"class":127},[117,1555,204],{"class":139},[117,1557,425],{"class":143},[117,1559,140],{"class":139},[117,1561,1208],{"class":127},[117,1563,1564],{"class":180},")\n",[117,1566,1567,1570,1573,1576,1578,1580,1582],{"class":119,"line":489},[117,1568,1569],{"class":127},"    .",[117,1571,1572],{"class":131},"setLngLat",[117,1574,1575],{"class":180},"([",[117,1577,1442],{"class":123},[117,1579,149],{"class":127},[117,1581,1447],{"class":123},[117,1583,1584],{"class":180},"])\n",[117,1586,1587,1589,1592],{"class":119,"line":504},[117,1588,1569],{"class":127},[117,1590,1591],{"class":131},"setPopup",[117,1593,1149],{"class":180},[117,1595,1596,1599,1601,1603,1606,1608,1610,1613],{"class":119,"line":514},[117,1597,1598],{"class":1201},"      new",[117,1600,1539],{"class":123},[117,1602,128],{"class":127},[117,1604,1605],{"class":131},"Popup",[117,1607,1242],{"class":180},[117,1609,128],{"class":127},[117,1611,1612],{"class":131},"setHTML",[117,1614,1149],{"class":180},[117,1616,1617,1620,1623,1625,1627,1629,1631,1633,1635,1637,1640,1642],{"class":119,"line":532},[117,1618,1619],{"class":139},"        `",[117,1621,1622],{"class":143},"\u003Cstrong>",[117,1624,233],{"class":232},[117,1626,1350],{"class":236},[117,1628,128],{"class":127},[117,1630,1338],{"class":236},[117,1632,128],{"class":127},[117,1634,1066],{"class":236},[117,1636,240],{"class":232},[117,1638,1639],{"class":143},"\u003C\u002Fstrong>\u003Cbr>",[117,1641,226],{"class":139},[117,1643,1644],{"class":1201}," +\n",[117,1646,1647,1650,1652,1655,1657,1660,1662,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685,1687],{"class":119,"line":540},[117,1648,1649],{"class":139},"          `",[117,1651,233],{"class":232},[117,1653,1654],{"class":236},"lat",[117,1656,128],{"class":127},[117,1658,1659],{"class":131},"toFixed",[117,1661,136],{"class":135},[117,1663,1664],{"class":258},"6",[117,1666,281],{"class":135},[117,1668,240],{"class":232},[117,1670,1074],{"class":143},[117,1672,233],{"class":232},[117,1674,1442],{"class":236},[117,1676,128],{"class":127},[117,1678,1659],{"class":131},[117,1680,136],{"class":135},[117,1682,1664],{"class":258},[117,1684,281],{"class":135},[117,1686,240],{"class":232},[117,1688,529],{"class":139},[117,1690,1691],{"class":119,"line":551},[117,1692,1693],{"class":180},"      )\n",[117,1695,1696],{"class":119,"line":560},[117,1697,1698],{"class":180},"    )\n",[117,1700,1701,1703,1706,1708,1710,1712],{"class":119,"line":569},[117,1702,1569],{"class":127},[117,1704,1705],{"class":131},"addTo",[117,1707,136],{"class":180},[117,1709,124],{"class":123},[117,1711,281],{"class":180},[117,1713,284],{"class":127},[117,1715,1716],{"class":119,"line":574},[117,1717,291],{"emptyLinePlaceholder":290},[117,1719,1720],{"class":119,"line":587},[117,1721,1722],{"class":165},"  \u002F\u002F Draw the parcel boundary\n",[117,1724,1725,1727,1729,1732,1734],{"class":119,"line":603},[117,1726,1249],{"class":1142},[117,1728,1252],{"class":180},[117,1730,1731],{"class":123},"polygon",[117,1733,281],{"class":180},[117,1735,159],{"class":127},[117,1737,1738,1741,1743,1745,1747,1750,1752,1754,1757,1759,1762],{"class":119,"line":619},[117,1739,1740],{"class":1142},"    if",[117,1742,1252],{"class":180},[117,1744,124],{"class":123},[117,1746,128],{"class":127},[117,1748,1749],{"class":131},"getSource",[117,1751,136],{"class":180},[117,1753,140],{"class":139},[117,1755,1756],{"class":143},"search-result",[117,1758,140],{"class":139},[117,1760,1761],{"class":180},"))",[117,1763,159],{"class":127},[117,1765,1766,1769,1771,1774,1776,1778,1781,1783,1785],{"class":119,"line":634},[117,1767,1768],{"class":123},"      map",[117,1770,128],{"class":127},[117,1772,1773],{"class":131},"removeLayer",[117,1775,136],{"class":180},[117,1777,140],{"class":139},[117,1779,1780],{"class":143},"search-result-fill",[117,1782,140],{"class":139},[117,1784,281],{"class":180},[117,1786,284],{"class":127},[117,1788,1789,1791,1793,1795,1797,1799,1802,1804,1806],{"class":119,"line":653},[117,1790,1768],{"class":123},[117,1792,128],{"class":127},[117,1794,1773],{"class":131},[117,1796,136],{"class":180},[117,1798,140],{"class":139},[117,1800,1801],{"class":143},"search-result-outline",[117,1803,140],{"class":139},[117,1805,281],{"class":180},[117,1807,284],{"class":127},[117,1809,1810,1812,1814,1817,1819,1821,1823,1825,1827],{"class":119,"line":665},[117,1811,1768],{"class":123},[117,1813,128],{"class":127},[117,1815,1816],{"class":131},"removeSource",[117,1818,136],{"class":180},[117,1820,140],{"class":139},[117,1822,1756],{"class":143},[117,1824,140],{"class":139},[117,1826,281],{"class":180},[117,1828,284],{"class":127},[117,1830,1831],{"class":119,"line":676},[117,1832,1833],{"class":127},"    }\n",[117,1835,1836],{"class":119,"line":719},[117,1837,291],{"emptyLinePlaceholder":290},[117,1839,1840,1843,1845,1847,1849,1851,1853,1855,1857,1859,1862,1864,1866,1869,1871,1873,1875,1877,1879,1881,1883],{"class":119,"line":778},[117,1841,1842],{"class":123},"    map",[117,1844,128],{"class":127},[117,1846,177],{"class":131},[117,1848,136],{"class":180},[117,1850,140],{"class":139},[117,1852,1756],{"class":143},[117,1854,140],{"class":139},[117,1856,149],{"class":127},[117,1858,411],{"class":127},[117,1860,1861],{"class":197}," type",[117,1863,201],{"class":127},[117,1865,204],{"class":139},[117,1867,1868],{"class":143},"geojson",[117,1870,140],{"class":139},[117,1872,149],{"class":127},[117,1874,1228],{"class":197},[117,1876,201],{"class":127},[117,1878,1363],{"class":123},[117,1880,1208],{"class":127},[117,1882,281],{"class":180},[117,1884,284],{"class":127},[117,1886,1887,1889,1891,1893,1895],{"class":119,"line":787},[117,1888,1842],{"class":123},[117,1890,128],{"class":127},[117,1892,301],{"class":131},[117,1894,136],{"class":180},[117,1896,306],{"class":127},[117,1898,1899,1902,1904,1906,1908,1910],{"class":119,"line":792},[117,1900,1901],{"class":197},"      id",[117,1903,201],{"class":127},[117,1905,204],{"class":139},[117,1907,1780],{"class":143},[117,1909,140],{"class":139},[117,1911,212],{"class":127},[117,1913,1914,1917,1919,1921,1924,1926],{"class":119,"line":798},[117,1915,1916],{"class":197},"      type",[117,1918,201],{"class":127},[117,1920,204],{"class":139},[117,1922,1923],{"class":143},"fill",[117,1925,140],{"class":139},[117,1927,212],{"class":127},[117,1929,1930,1933,1935,1937,1939,1941],{"class":119,"line":820},[117,1931,1932],{"class":197},"      source",[117,1934,201],{"class":127},[117,1936,204],{"class":139},[117,1938,1756],{"class":143},[117,1940,140],{"class":139},[117,1942,212],{"class":127},[117,1944,1945,1948,1950,1952,1954,1957,1959,1961,1963,1965,1967,1969,1971,1974,1976,1978,1981],{"class":119,"line":835},[117,1946,1947],{"class":197},"      paint",[117,1949,201],{"class":127},[117,1951,411],{"class":127},[117,1953,204],{"class":139},[117,1955,1956],{"class":363},"fill-color",[117,1958,140],{"class":139},[117,1960,201],{"class":127},[117,1962,204],{"class":139},[117,1964,425],{"class":143},[117,1966,140],{"class":139},[117,1968,149],{"class":127},[117,1970,204],{"class":139},[117,1972,1973],{"class":363},"fill-opacity",[117,1975,140],{"class":139},[117,1977,201],{"class":127},[117,1979,1980],{"class":258}," 0.15",[117,1982,444],{"class":127},[117,1984,1985,1988,1990],{"class":119,"line":861},[117,1986,1987],{"class":127},"    }",[117,1989,281],{"class":180},[117,1991,284],{"class":127},[117,1993,1994,1996,1998,2000,2002],{"class":119,"line":873},[117,1995,1842],{"class":123},[117,1997,128],{"class":127},[117,1999,301],{"class":131},[117,2001,136],{"class":180},[117,2003,306],{"class":127},[117,2005,2006,2008,2010,2012,2014,2016],{"class":119,"line":882},[117,2007,1901],{"class":197},[117,2009,201],{"class":127},[117,2011,204],{"class":139},[117,2013,1801],{"class":143},[117,2015,140],{"class":139},[117,2017,212],{"class":127},[117,2019,2020,2022,2024,2026,2028,2030],{"class":119,"line":891},[117,2021,1916],{"class":197},[117,2023,201],{"class":127},[117,2025,204],{"class":139},[117,2027,119],{"class":143},[117,2029,140],{"class":139},[117,2031,212],{"class":127},[117,2033,2034,2036,2038,2040,2042,2044],{"class":119,"line":896},[117,2035,1932],{"class":197},[117,2037,201],{"class":127},[117,2039,204],{"class":139},[117,2041,1756],{"class":143},[117,2043,140],{"class":139},[117,2045,212],{"class":127},[117,2047,2048,2050,2052,2054,2056,2058,2060,2062,2064,2066,2068,2070,2072,2074,2076,2078,2080],{"class":119,"line":909},[117,2049,1947],{"class":197},[117,2051,201],{"class":127},[117,2053,411],{"class":127},[117,2055,204],{"class":139},[117,2057,416],{"class":363},[117,2059,140],{"class":139},[117,2061,201],{"class":127},[117,2063,204],{"class":139},[117,2065,425],{"class":143},[117,2067,140],{"class":139},[117,2069,149],{"class":127},[117,2071,204],{"class":139},[117,2073,434],{"class":363},[117,2075,140],{"class":139},[117,2077,201],{"class":127},[117,2079,773],{"class":258},[117,2081,444],{"class":127},[117,2083,2084,2086,2088],{"class":119,"line":925},[117,2085,1987],{"class":127},[117,2087,281],{"class":180},[117,2089,284],{"class":127},[117,2091,2092],{"class":119,"line":940},[117,2093,2094],{"class":127},"  }\n",[117,2096,2097],{"class":119,"line":955},[117,2098,2099],{"class":127},"}\n",[117,2101,2102],{"class":119,"line":974},[117,2103,291],{"emptyLinePlaceholder":290},[117,2105,2106],{"class":119,"line":985},[117,2107,2108],{"class":165},"\u002F\u002F Find a quarter section in Alberta\n",[117,2110,2111,2114,2116,2118,2120,2122,2124],{"class":119,"line":996},[117,2112,2113],{"class":131},"searchAndFlyTo",[117,2115,136],{"class":135},[117,2117,140],{"class":139},[117,2119,16],{"class":143},[117,2121,140],{"class":139},[117,2123,281],{"class":135},[117,2125,284],{"class":127},[10,2127,2128,2129,2132,2133,2136,2137,2140,2141,2144],{},"The API base URL is ",[14,2130,2131],{},"https:\u002F\u002Fdeveloper.townshipcanada.com"," and all requests require an ",[14,2134,2135],{},"Authorization: Bearer YOUR_API_KEY"," header. The search endpoint is ",[14,2138,2139],{},"\u002Fv1\u002Fsearch\u002Flegal-location"," with a ",[14,2142,2143],{},"location"," query parameter.",[10,2146,2147],{},[27,2148],{"alt":2149,"src":2150},"Search result highlighting a quarter section boundary on a DLS grid map","\u002Fimages\u002Fblog\u002Fusing-township-api-with-mapbox\u002Fsearch-result.webp",[32,2152,2154],{"id":2153},"making-grid-cells-clickable","Making grid cells clickable",[10,2156,2157,2158,2160],{},"For the well site tracking use case, field staff also need to click any grid cell and see its legal land description. Add a click handler on the township layer to show a popup with the cell's ",[14,2159,100],{}," from the vector tile feature properties:",[70,2162,2164],{"className":111,"code":2163,"language":113,"meta":78,"style":78},"map.on(\"click\", \"ab_twp\", (e) => {\n  if (e.features.length === 0) return;\n\n  new mapboxgl.Popup()\n    .setLngLat(e.lngLat)\n    .setHTML(`\u003Cstrong>${e.features[0].properties.descriptor || \"Township\"}\u003C\u002Fstrong>`)\n    .addTo(map);\n});\n\nmap.on(\"mouseenter\", \"ab_twp\", () => (map.getCanvas().style.cursor = \"pointer\"));\nmap.on(\"mouseleave\", \"ab_twp\", () => (map.getCanvas().style.cursor = \"\"));\n",[14,2165,2166,2204,2230,2234,2247,2264,2320,2334,2342,2346,2411],{"__ignoreMap":78},[117,2167,2168,2170,2172,2174,2176,2178,2181,2183,2185,2187,2189,2191,2193,2195,2198,2200,2202],{"class":119,"line":120},[117,2169,124],{"class":123},[117,2171,128],{"class":127},[117,2173,132],{"class":131},[117,2175,136],{"class":135},[117,2177,140],{"class":139},[117,2179,2180],{"class":143},"click",[117,2182,140],{"class":139},[117,2184,149],{"class":127},[117,2186,204],{"class":139},[117,2188,319],{"class":143},[117,2190,140],{"class":139},[117,2192,149],{"class":127},[117,2194,1252],{"class":127},[117,2196,2197],{"class":1123},"e",[117,2199,281],{"class":127},[117,2201,156],{"class":155},[117,2203,159],{"class":127},[117,2205,2206,2208,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228],{"class":119,"line":162},[117,2207,1249],{"class":1142},[117,2209,1252],{"class":180},[117,2211,2197],{"class":123},[117,2213,128],{"class":127},[117,2215,1263],{"class":123},[117,2217,128],{"class":127},[117,2219,1278],{"class":1277},[117,2221,1281],{"class":1201},[117,2223,259],{"class":258},[117,2225,281],{"class":180},[117,2227,1288],{"class":1142},[117,2229,284],{"class":127},[117,2231,2232],{"class":119,"line":169},[117,2233,291],{"emptyLinePlaceholder":290},[117,2235,2236,2238,2240,2242,2244],{"class":119,"line":194},[117,2237,1536],{"class":1201},[117,2239,1539],{"class":123},[117,2241,128],{"class":127},[117,2243,1605],{"class":131},[117,2245,2246],{"class":180},"()\n",[117,2248,2249,2251,2253,2255,2257,2259,2262],{"class":119,"line":215},[117,2250,1569],{"class":127},[117,2252,1572],{"class":131},[117,2254,136],{"class":180},[117,2256,2197],{"class":123},[117,2258,128],{"class":127},[117,2260,2261],{"class":123},"lngLat",[117,2263,1564],{"class":180},[117,2265,2266,2268,2270,2272,2274,2276,2278,2280,2282,2284,2287,2290,2292,2294,2296,2298,2301,2304,2306,2309,2311,2313,2316,2318],{"class":119,"line":250},[117,2267,1569],{"class":127},[117,2269,1612],{"class":131},[117,2271,136],{"class":180},[117,2273,226],{"class":139},[117,2275,1622],{"class":143},[117,2277,233],{"class":232},[117,2279,2197],{"class":236},[117,2281,128],{"class":127},[117,2283,1263],{"class":236},[117,2285,2286],{"class":135},"[",[117,2288,2289],{"class":258},"0",[117,2291,245],{"class":135},[117,2293,128],{"class":127},[117,2295,1338],{"class":236},[117,2297,128],{"class":127},[117,2299,2300],{"class":236},"descriptor ",[117,2302,2303],{"class":1201},"||",[117,2305,204],{"class":139},[117,2307,2308],{"class":143},"Township",[117,2310,140],{"class":139},[117,2312,240],{"class":232},[117,2314,2315],{"class":143},"\u003C\u002Fstrong>",[117,2317,226],{"class":139},[117,2319,1564],{"class":180},[117,2321,2322,2324,2326,2328,2330,2332],{"class":119,"line":264},[117,2323,1569],{"class":127},[117,2325,1705],{"class":131},[117,2327,136],{"class":180},[117,2329,124],{"class":123},[117,2331,281],{"class":180},[117,2333,284],{"class":127},[117,2335,2336,2338,2340],{"class":119,"line":275},[117,2337,240],{"class":127},[117,2339,281],{"class":135},[117,2341,284],{"class":127},[117,2343,2344],{"class":119,"line":287},[117,2345,291],{"emptyLinePlaceholder":290},[117,2347,2348,2350,2352,2354,2356,2358,2361,2363,2365,2367,2369,2371,2373,2375,2377,2379,2381,2383,2386,2388,2390,2393,2395,2398,2400,2402,2405,2407,2409],{"class":119,"line":294},[117,2349,124],{"class":123},[117,2351,128],{"class":127},[117,2353,132],{"class":131},[117,2355,136],{"class":135},[117,2357,140],{"class":139},[117,2359,2360],{"class":143},"mouseenter",[117,2362,140],{"class":139},[117,2364,149],{"class":127},[117,2366,204],{"class":139},[117,2368,319],{"class":143},[117,2370,140],{"class":139},[117,2372,149],{"class":127},[117,2374,152],{"class":127},[117,2376,156],{"class":155},[117,2378,1252],{"class":135},[117,2380,124],{"class":123},[117,2382,128],{"class":127},[117,2384,2385],{"class":131},"getCanvas",[117,2387,1242],{"class":135},[117,2389,128],{"class":127},[117,2391,2392],{"class":123},"style",[117,2394,128],{"class":127},[117,2396,2397],{"class":123},"cursor",[117,2399,1139],{"class":127},[117,2401,204],{"class":139},[117,2403,2404],{"class":143},"pointer",[117,2406,140],{"class":139},[117,2408,1761],{"class":135},[117,2410,284],{"class":127},[117,2412,2413,2415,2417,2419,2421,2423,2426,2428,2430,2432,2434,2436,2438,2440,2442,2444,2446,2448,2450,2452,2454,2456,2458,2460,2462,2465,2467],{"class":119,"line":309},[117,2414,124],{"class":123},[117,2416,128],{"class":127},[117,2418,132],{"class":131},[117,2420,136],{"class":135},[117,2422,140],{"class":139},[117,2424,2425],{"class":143},"mouseleave",[117,2427,140],{"class":139},[117,2429,149],{"class":127},[117,2431,204],{"class":139},[117,2433,319],{"class":143},[117,2435,140],{"class":139},[117,2437,149],{"class":127},[117,2439,152],{"class":127},[117,2441,156],{"class":155},[117,2443,1252],{"class":135},[117,2445,124],{"class":123},[117,2447,128],{"class":127},[117,2449,2385],{"class":131},[117,2451,1242],{"class":135},[117,2453,128],{"class":127},[117,2455,2392],{"class":123},[117,2457,128],{"class":127},[117,2459,2397],{"class":123},[117,2461,1139],{"class":127},[117,2463,2464],{"class":139}," \"\"",[117,2466,1761],{"class":135},[117,2468,284],{"class":127},[10,2470,2471,2472,2474,2475,2478],{},"Attach the same handler to ",[14,2473,918],{}," and ",[14,2476,2477],{},"ab_lsd"," layers so the popup works at every zoom level.",[32,2480,2482],{"id":2481},"beyond-the-basics","Beyond the basics",[10,2484,2485],{},"The setup above covers the core pattern. From here you can extend the map in several directions:",[10,2487,2488,2492],{},[2489,2490,2491],"strong",{},"Data layers"," — Township Canada also serves petroleum field boundaries, municipal boundaries, parks, water bodies, and road networks as vector tiles. Adding them follows the same source-and-layer pattern. A layer toggle panel lets users show and hide context layers without reloading anything.",[10,2494,2495,2498,2499,2502,2503,2506],{},[2489,2496,2497],{},"Autocomplete search"," — The autocomplete endpoint at ",[14,2500,2501],{},"https:\u002F\u002Fdeveloper.townshipcanada.com\u002Fautocomplete\u002Flegal-location"," returns matching legal land descriptions as the user types. Pass a ",[14,2504,2505],{},"proximity"," parameter with the map's current centre to bias results toward the visible area — useful when field staff are already zoomed into a specific region.",[10,2508,2509,2512,2513,2517],{},[2489,2510,2511],{},"Batch plotting"," — If you need to drop hundreds of well sites on the map at once from a spreadsheet, the ",[44,2514,2516],{"href":2515},"\u002Fguides\u002Fapi-integration","Batch API"," can convert a list of legal land descriptions to coordinates in a single request.",[10,2519,2520,2523,2524,2526],{},[2489,2521,2522],{},"NTS grids for BC"," — For work in British Columbia, the NTS (National Topographic System) tilesets cover the same use cases. The ",[44,2525,1082],{"href":1081}," has the full tileset list for both systems.",[32,2528,2530],{"id":2529},"next-step","Next step",[10,2532,2533,2534,2538],{},"The ",[44,2535,2537],{"href":2536},"\u002Fguides\u002Fmapbox-integration","Mapbox integration guide"," has the complete working HTML file — search box, autocomplete, layer toggles, and all grid levels — with full code you can copy, drop in your API keys, and run directly in a browser. It's a good starting point before adapting the pattern to a framework like React or Vue.",[10,2540,2541,2542,2544,2545,2549],{},"Get your API key from the ",[44,2543,57],{"href":56}," and you can have a working survey grid map in under an hour. Questions about the API or specific use cases? The ",[44,2546,2548],{"href":2547},"\u002Fabout","About page"," has contact details, and our team is familiar with the oil and gas, agri, and land management workflows this kind of tool supports.",[32,2551,2553],{"id":2552},"related-guides","Related guides",[37,2555,2556,2562,2568,2574,2579],{},[40,2557,2558,2561],{},[44,2559,2560],{"href":2536},"Mapbox Integration Guide"," — Full working example with all grid levels, autocomplete, and layer toggles",[40,2563,2564,2567],{},[44,2565,2566],{"href":1081},"Maps API Vector Tiles"," — Complete tileset reference for DLS and NTS grids",[40,2569,2570,2573],{},[44,2571,2572],{"href":2515},"API Integration Guide"," — API endpoints, authentication, and key management",[40,2575,2576,2578],{},[44,2577,57],{"href":56}," — Subscribe to APIs and manage your keys",[40,2580,2581,2584],{},[44,2582,2583],{"href":2547},"What is a Legal Land Description?"," — Background on DLS, NTS, and how the survey systems work",[2392,2586,2587],{},"html pre.shiki code .sSC40, html code.shiki .sSC40{--shiki-light:#90A4AE;--shiki-default:#B07D48;--shiki-dark:#BD976A}html pre.shiki code .soVBu, html code.shiki .soVBu{--shiki-light:#39ADB5;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .sljsM, html code.shiki .sljsM{--shiki-light:#6182B8;--shiki-default:#59873A;--shiki-dark:#80A665}html pre.shiki code .snCua, html code.shiki .snCua{--shiki-light:#90A4AE;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .sbYkP, html code.shiki .sbYkP{--shiki-light:#39ADB5;--shiki-default:#B5695977;--shiki-dark:#C98A7D77}html pre.shiki code .sTbE_, html code.shiki .sTbE_{--shiki-light:#91B859;--shiki-default:#B56959;--shiki-dark:#C98A7D}html pre.shiki code .sIOqK, html code.shiki .sIOqK{--shiki-light:#9C3EDA;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .s9Tkl, html code.shiki .s9Tkl{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#A0ADA0;--shiki-default-font-style:inherit;--shiki-dark:#758575DD;--shiki-dark-font-style:inherit}html pre.shiki code .sLdnO, html code.shiki .sLdnO{--shiki-light:#E53935;--shiki-default:#999999;--shiki-dark:#666666}html pre.shiki code .suXOh, html code.shiki .suXOh{--shiki-light:#E53935;--shiki-default:#998418;--shiki-dark:#B8A965}html pre.shiki code .s8XtY, html code.shiki .s8XtY{--shiki-light:#39ADB5;--shiki-default:#1E754F;--shiki-dark:#4D9375}html pre.shiki code .su_V2, html code.shiki .su_V2{--shiki-light:#90A4AE;--shiki-default:#B56959;--shiki-dark:#C98A7D}html pre.shiki code .s7CZa, html code.shiki .s7CZa{--shiki-light:#F76D47;--shiki-default:#2F798A;--shiki-dark:#4C9A91}html pre.shiki code .sQtxO, html code.shiki .sQtxO{--shiki-light:#E53935;--shiki-default:#B56959;--shiki-dark:#C98A7D}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 .s5Kfy, html code.shiki .s5Kfy{--shiki-light:#9C3EDA;--shiki-default:#AB5959;--shiki-dark:#CB7676}html pre.shiki code .sqOPj, html code.shiki .sqOPj{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#B07D48;--shiki-default-font-style:inherit;--shiki-dark:#BD976A;--shiki-dark-font-style:inherit}html pre.shiki code .siDh9, html code.shiki .siDh9{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#1E754F;--shiki-default-font-style:inherit;--shiki-dark:#4D9375;--shiki-dark-font-style:inherit}html pre.shiki code .sVsLi, html code.shiki .sVsLi{--shiki-light:#39ADB5;--shiki-default:#AB5959;--shiki-dark:#CB7676}html pre.shiki code .s131V, html code.shiki .s131V{--shiki-light:#90A4AE;--shiki-default:#998418;--shiki-dark:#B8A965}",{"title":78,"searchDepth":162,"depth":162,"links":2589},[2590,2591,2592,2593,2594,2595,2596],{"id":34,"depth":162,"text":35},{"id":61,"depth":162,"text":62},{"id":1086,"depth":162,"text":1087},{"id":2153,"depth":162,"text":2154},{"id":2481,"depth":162,"text":2482},{"id":2529,"depth":162,"text":2530},{"id":2552,"depth":162,"text":2553},"2026-04-14","Add DLS township, section, and LSD grid layers to a Mapbox GL JS map. Search legal land descriptions, display boundaries, and identify grid cells on click.","md",{"category":2601,"author":2602},"tutorial","Township Canada","\u002Fblog\u002Fusing-township-api-with-mapbox",{"title":5,"description":2598},"blog\u002Fusing-township-api-with-mapbox",[2607,2608,2609,2610],"Tutorial","API","Mapbox","Developer","wKGzxa2xi1LgdzA4t7kC9AA1mK0nNOFbMDn3uoph90k"]