[{"data":1,"prerenderedAt":776},["ShallowReactive",2],{"doc-\u002Fdocs\u002Fquickstart":3,"docs-nav":773},{"id":4,"title":5,"body":6,"description":765,"extension":766,"meta":767,"navigation":184,"order":768,"path":769,"seo":770,"stem":771,"__hash__":772},"docs\u002Fdocs\u002Fquickstart.md","Quickstart",{"type":7,"value":8,"toc":756},"minimark",[9,13,22,27,59,65,69,72,140,151,155,158,235,246,331,334,338,344,489,508,512,651,668,672,675,728,732,753],[10,11,5],"h1",{"id":12},"quickstart",[14,15,16,17,21],"p",{},"Zero to a rendered map in under a minute. The clock starts at ",[18,19,20],"code",{},"npm i"," and stops when the map paints.",[23,24,26],"h2",{"id":25},"_1-install","1. Install",[28,29,34],"pre",{"className":30,"code":31,"language":32,"meta":33,"style":33},"language-bash shiki shiki-themes github-light github-dark","npm i @unmap\u002Fsdk\n# or: pnpm add @unmap\u002Fsdk\n","bash","",[18,35,36,52],{"__ignoreMap":33},[37,38,41,45,49],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sScJk","npm",[37,46,48],{"class":47},"sZZnC"," i",[37,50,51],{"class":47}," @unmap\u002Fsdk\n",[37,53,55],{"class":39,"line":54},2,[37,56,58],{"class":57},"sJ8bj","# or: pnpm add @unmap\u002Fsdk\n",[14,60,61,64],{},[18,62,63],{},"maplibre-gl"," ships as a dependency, so there is nothing else to install for a basic map.",[23,66,68],{"id":67},"_2-add-a-container","2. Add a container",[14,70,71],{},"Anywhere in your page, give the map a box with a height:",[28,73,77],{"className":74,"code":75,"language":76,"meta":33,"style":33},"language-html shiki shiki-themes github-light github-dark","\u003Cdiv id=\"map\" style=\"height: 400px\">\u003C\u002Fdiv>\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl\u002Fdist\u002Fmaplibre-gl.css\" \u002F>\n","html",[18,78,79,114],{"__ignoreMap":33},[37,80,81,85,89,92,95,98,101,103,106,109,111],{"class":39,"line":40},[37,82,84],{"class":83},"sVt8B","\u003C",[37,86,88],{"class":87},"s9eBZ","div",[37,90,91],{"class":43}," id",[37,93,94],{"class":83},"=",[37,96,97],{"class":47},"\"map\"",[37,99,100],{"class":43}," style",[37,102,94],{"class":83},[37,104,105],{"class":47},"\"height: 400px\"",[37,107,108],{"class":83},">\u003C\u002F",[37,110,88],{"class":87},[37,112,113],{"class":83},">\n",[37,115,116,118,121,124,126,129,132,134,137],{"class":39,"line":54},[37,117,84],{"class":83},[37,119,120],{"class":87},"link",[37,122,123],{"class":43}," rel",[37,125,94],{"class":83},[37,127,128],{"class":47},"\"stylesheet\"",[37,130,131],{"class":43}," href",[37,133,94],{"class":83},[37,135,136],{"class":47},"\"https:\u002F\u002Funpkg.com\u002Fmaplibre-gl\u002Fdist\u002Fmaplibre-gl.css\"",[37,138,139],{"class":83}," \u002F>\n",[14,141,142,143,146,147,150],{},"In a bundler you can ",[18,144,145],{},"import 'maplibre-gl\u002Fdist\u002Fmaplibre-gl.css'"," instead of the ",[18,148,149],{},"\u003Clink>",".",[23,152,154],{"id":153},"_3-render","3. Render",[14,156,157],{},"Three lines. This is the whole Hello World:",[28,159,163],{"className":160,"code":161,"language":162,"meta":33,"style":33},"language-ts shiki shiki-themes github-light github-dark","import { Unmap } from '@unmap\u002Fsdk'\n\nconst map = new Unmap({ key: 'um_live_...', container: '#map', center: [-114.07, 51.05] })\n","ts",[18,164,165,180,186],{"__ignoreMap":33},[37,166,167,171,174,177],{"class":39,"line":40},[37,168,170],{"class":169},"szBVR","import",[37,172,173],{"class":83}," { Unmap } ",[37,175,176],{"class":169},"from",[37,178,179],{"class":47}," '@unmap\u002Fsdk'\n",[37,181,182],{"class":39,"line":54},[37,183,185],{"emptyLinePlaceholder":184},true,"\n",[37,187,189,192,196,199,202,205,208,211,214,217,220,223,226,229,232],{"class":39,"line":188},3,[37,190,191],{"class":169},"const",[37,193,195],{"class":194},"sj4cs"," map",[37,197,198],{"class":169}," =",[37,200,201],{"class":169}," new",[37,203,204],{"class":43}," Unmap",[37,206,207],{"class":83},"({ key: ",[37,209,210],{"class":47},"'um_live_...'",[37,212,213],{"class":83},", container: ",[37,215,216],{"class":47},"'#map'",[37,218,219],{"class":83},", center: [",[37,221,222],{"class":169},"-",[37,224,225],{"class":194},"114.07",[37,227,228],{"class":83},", ",[37,230,231],{"class":194},"51.05",[37,233,234],{"class":83},"] })\n",[14,236,237,238,241,242,245],{},"That paints a Calgary basemap. Swap ",[18,239,240],{},"center"," and ",[18,243,244],{},"style"," to move it:",[28,247,249],{"className":160,"code":248,"language":162,"meta":33,"style":33},"new Unmap({\n  key: 'um_live_...',\n  container: '#map',\n  style: 'montreal',       \u002F\u002F 'calgary' | 'montreal' | 'iqaluit', or a style URL\n  center: [-73.5673, 45.5017],\n  zoom: 11,\n})\n",[18,250,251,261,271,280,295,314,325],{"__ignoreMap":33},[37,252,253,256,258],{"class":39,"line":40},[37,254,255],{"class":169},"new",[37,257,204],{"class":43},[37,259,260],{"class":83},"({\n",[37,262,263,266,268],{"class":39,"line":54},[37,264,265],{"class":83},"  key: ",[37,267,210],{"class":47},[37,269,270],{"class":83},",\n",[37,272,273,276,278],{"class":39,"line":188},[37,274,275],{"class":83},"  container: ",[37,277,216],{"class":47},[37,279,270],{"class":83},[37,281,283,286,289,292],{"class":39,"line":282},4,[37,284,285],{"class":83},"  style: ",[37,287,288],{"class":47},"'montreal'",[37,290,291],{"class":83},",       ",[37,293,294],{"class":57},"\u002F\u002F 'calgary' | 'montreal' | 'iqaluit', or a style URL\n",[37,296,298,301,303,306,308,311],{"class":39,"line":297},5,[37,299,300],{"class":83},"  center: [",[37,302,222],{"class":169},[37,304,305],{"class":194},"73.5673",[37,307,228],{"class":83},[37,309,310],{"class":194},"45.5017",[37,312,313],{"class":83},"],\n",[37,315,317,320,323],{"class":39,"line":316},6,[37,318,319],{"class":83},"  zoom: ",[37,321,322],{"class":194},"11",[37,324,270],{"class":83},[37,326,328],{"class":39,"line":327},7,[37,329,330],{"class":83},"})\n",[14,332,333],{},"That is the 60-second mark. Everything below is optional.",[23,335,337],{"id":336},"add-geocoding","Add geocoding",[14,339,340,343],{},[18,341,342],{},".geocoder"," is always available, with or without a map:",[28,345,347],{"className":160,"code":346,"language":162,"meta":33,"style":33},"const unmap = new Unmap({ key: 'um_live_...' })\n\n\u002F\u002F Full-text search\nconst results = await unmap.geocoder.search('Château Frontenac')\n\n\u002F\u002F Type-ahead (fires on each keystroke)\nconst hints = await unmap.geocoder.autocomplete('rue ste-c', { lang: 'fr', limit: 5 })\n\n\u002F\u002F Reverse geocode a coordinate\nconst here = await unmap.geocoder.reverse(-114.07, 51.05)\n",[18,348,349,369,373,378,405,409,414,449,454,460],{"__ignoreMap":33},[37,350,351,353,356,358,360,362,364,366],{"class":39,"line":40},[37,352,191],{"class":169},[37,354,355],{"class":194}," unmap",[37,357,198],{"class":169},[37,359,201],{"class":169},[37,361,204],{"class":43},[37,363,207],{"class":83},[37,365,210],{"class":47},[37,367,368],{"class":83}," })\n",[37,370,371],{"class":39,"line":54},[37,372,185],{"emptyLinePlaceholder":184},[37,374,375],{"class":39,"line":188},[37,376,377],{"class":57},"\u002F\u002F Full-text search\n",[37,379,380,382,385,387,390,393,396,399,402],{"class":39,"line":282},[37,381,191],{"class":169},[37,383,384],{"class":194}," results",[37,386,198],{"class":169},[37,388,389],{"class":169}," await",[37,391,392],{"class":83}," unmap.geocoder.",[37,394,395],{"class":43},"search",[37,397,398],{"class":83},"(",[37,400,401],{"class":47},"'Château Frontenac'",[37,403,404],{"class":83},")\n",[37,406,407],{"class":39,"line":297},[37,408,185],{"emptyLinePlaceholder":184},[37,410,411],{"class":39,"line":316},[37,412,413],{"class":57},"\u002F\u002F Type-ahead (fires on each keystroke)\n",[37,415,416,418,421,423,425,427,430,432,435,438,441,444,447],{"class":39,"line":327},[37,417,191],{"class":169},[37,419,420],{"class":194}," hints",[37,422,198],{"class":169},[37,424,389],{"class":169},[37,426,392],{"class":83},[37,428,429],{"class":43},"autocomplete",[37,431,398],{"class":83},[37,433,434],{"class":47},"'rue ste-c'",[37,436,437],{"class":83},", { lang: ",[37,439,440],{"class":47},"'fr'",[37,442,443],{"class":83},", limit: ",[37,445,446],{"class":194},"5",[37,448,368],{"class":83},[37,450,452],{"class":39,"line":451},8,[37,453,185],{"emptyLinePlaceholder":184},[37,455,457],{"class":39,"line":456},9,[37,458,459],{"class":57},"\u002F\u002F Reverse geocode a coordinate\n",[37,461,463,465,468,470,472,474,477,479,481,483,485,487],{"class":39,"line":462},10,[37,464,191],{"class":169},[37,466,467],{"class":194}," here",[37,469,198],{"class":169},[37,471,389],{"class":169},[37,473,392],{"class":83},[37,475,476],{"class":43},"reverse",[37,478,398],{"class":83},[37,480,222],{"class":169},[37,482,225],{"class":194},[37,484,228],{"class":83},[37,486,231],{"class":194},[37,488,404],{"class":83},[14,490,491,492,228,495,228,498,228,501,504,505,150],{},"Each result carries ",[18,493,494],{},"name",[18,496,497],{},"layer",[18,499,500],{},"lng",[18,502,503],{},"lat",", and an optional structured ",[18,506,507],{},"address",[23,509,511],{"id":510},"add-routing","Add routing",[28,513,515],{"className":160,"code":514,"language":162,"meta":33,"style":33},"const unmap = new Unmap({ key: 'um_live_...' })\n\n\u002F\u002F A route between two [lng, lat] points\nconst route = await unmap.router.route([-114.07, 51.05], [-113.99, 51.05], { mode: 'auto' })\nconsole.log(route.distanceMeters, route.durationSeconds)\n\n\u002F\u002F Reachability: how far in 10 and 20 minutes\nconst bands = await unmap.router.isochrone([-114.07, 51.05], { minutes: [10, 20] })\n",[18,516,517,535,539,544,592,603,607,612],{"__ignoreMap":33},[37,518,519,521,523,525,527,529,531,533],{"class":39,"line":40},[37,520,191],{"class":169},[37,522,355],{"class":194},[37,524,198],{"class":169},[37,526,201],{"class":169},[37,528,204],{"class":43},[37,530,207],{"class":83},[37,532,210],{"class":47},[37,534,368],{"class":83},[37,536,537],{"class":39,"line":54},[37,538,185],{"emptyLinePlaceholder":184},[37,540,541],{"class":39,"line":188},[37,542,543],{"class":57},"\u002F\u002F A route between two [lng, lat] points\n",[37,545,546,548,551,553,555,558,561,564,566,568,570,572,575,577,580,582,584,587,590],{"class":39,"line":282},[37,547,191],{"class":169},[37,549,550],{"class":194}," route",[37,552,198],{"class":169},[37,554,389],{"class":169},[37,556,557],{"class":83}," unmap.router.",[37,559,560],{"class":43},"route",[37,562,563],{"class":83},"([",[37,565,222],{"class":169},[37,567,225],{"class":194},[37,569,228],{"class":83},[37,571,231],{"class":194},[37,573,574],{"class":83},"], [",[37,576,222],{"class":169},[37,578,579],{"class":194},"113.99",[37,581,228],{"class":83},[37,583,231],{"class":194},[37,585,586],{"class":83},"], { mode: ",[37,588,589],{"class":47},"'auto'",[37,591,368],{"class":83},[37,593,594,597,600],{"class":39,"line":297},[37,595,596],{"class":83},"console.",[37,598,599],{"class":43},"log",[37,601,602],{"class":83},"(route.distanceMeters, route.durationSeconds)\n",[37,604,605],{"class":39,"line":316},[37,606,185],{"emptyLinePlaceholder":184},[37,608,609],{"class":39,"line":327},[37,610,611],{"class":57},"\u002F\u002F Reachability: how far in 10 and 20 minutes\n",[37,613,614,616,619,621,623,625,628,630,632,634,636,638,641,644,646,649],{"class":39,"line":451},[37,615,191],{"class":169},[37,617,618],{"class":194}," bands",[37,620,198],{"class":169},[37,622,389],{"class":169},[37,624,557],{"class":83},[37,626,627],{"class":43},"isochrone",[37,629,563],{"class":83},[37,631,222],{"class":169},[37,633,225],{"class":194},[37,635,228],{"class":83},[37,637,231],{"class":194},[37,639,640],{"class":83},"], { minutes: [",[37,642,643],{"class":194},"10",[37,645,228],{"class":83},[37,647,648],{"class":194},"20",[37,650,234],{"class":83},[14,652,653,656,657,660,661,656,664,667],{},[18,654,655],{},"route()"," returns a GeoJSON ",[18,658,659],{},"LineString","; ",[18,662,663],{},"isochrone()",[18,665,666],{},"FeatureCollection"," you can drop straight onto the map.",[23,669,671],{"id":670},"using-a-demo-key","Using a demo key",[14,673,674],{},"Want to try before you get a key? The public demo key is rate-limited and safe to embed. Point it at the deployed gateway:",[28,676,678],{"className":160,"code":677,"language":162,"meta":33,"style":33},"new Unmap({\n  key: 'um_test_793cf0c9cb8f4f5cf12bbdebdd96b59532b38876fbe5d14d',\n  gateway: 'https:\u002F\u002Funmap-gateway.mepa1363.workers.dev',\n  container: '#map',\n  style: 'iqaluit',\n})\n",[18,679,680,688,697,707,715,724],{"__ignoreMap":33},[37,681,682,684,686],{"class":39,"line":40},[37,683,255],{"class":169},[37,685,204],{"class":43},[37,687,260],{"class":83},[37,689,690,692,695],{"class":39,"line":54},[37,691,265],{"class":83},[37,693,694],{"class":47},"'um_test_793cf0c9cb8f4f5cf12bbdebdd96b59532b38876fbe5d14d'",[37,696,270],{"class":83},[37,698,699,702,705],{"class":39,"line":188},[37,700,701],{"class":83},"  gateway: ",[37,703,704],{"class":47},"'https:\u002F\u002Funmap-gateway.mepa1363.workers.dev'",[37,706,270],{"class":83},[37,708,709,711,713],{"class":39,"line":282},[37,710,275],{"class":83},[37,712,216],{"class":47},[37,714,270],{"class":83},[37,716,717,719,722],{"class":39,"line":297},[37,718,285],{"class":83},[37,720,721],{"class":47},"'iqaluit'",[37,723,270],{"class":83},[37,725,726],{"class":39,"line":316},[37,727,330],{"class":83},[23,729,731],{"id":730},"next-steps","Next steps",[733,734,735,745],"ul",{},[736,737,738,739,744],"li",{},"Read the ",[740,741,743],"a",{"href":742},"\u002Fdocs\u002Foverview","Overview"," for the full option and method reference.",[736,746,747,748,752],{},"See the ",[740,749,751],{"href":750},"\u002F#demo","live demo"," on the landing page for a working city switcher.",[244,754,755],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":33,"searchDepth":54,"depth":54,"links":757},[758,759,760,761,762,763,764],{"id":25,"depth":54,"text":26},{"id":67,"depth":54,"text":68},{"id":153,"depth":54,"text":154},{"id":336,"depth":54,"text":337},{"id":510,"depth":54,"text":511},{"id":670,"depth":54,"text":671},{"id":730,"depth":54,"text":731},"Render a live Canadian map in under 60 seconds.","md",{},0,"\u002Fdocs\u002Fquickstart",{"title":5,"description":765},"docs\u002Fquickstart","3cLlo3fiUTaAl2fJlKO0DXVlis296GOtim7h6ZRKJhc",[774,775],{"path":769,"title":5,"order":768},{"path":742,"title":743,"order":40},1783031325721]