2b:null 2c:["$","title",null,{"children":"Add Tile Source to Map | NB.AI Solutions Team | Observable"}] 31:[] 2f:{"id":"e5728202135ed1ea","slug":null,"title":"Add Tile Source to Map","thumbnail":"0231ef71fdf08917973c66bf7f93b827a0366fedca3b1d54731d359ec403572d","access_level":"public","create_time":"$D2023-01-27T21:49:33.107Z","update_time":"$D2025-03-29T00:42:50.315Z","view_time":null,"first_public_time":"$D2023-01-27T22:07:32.972Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team","avatar_url":"https://avatars-next.observableusercontent.com/7a25d1b5deb9c5290b12e4e0914aacdbd4196bb5c3a94c63a0fda0fe706d28b2","tier":"starter_2024"},"version":69,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null}],"members":[{"type":"individual","id":"bcb6b2e256659128","login":"jim-welch","name":"Jim Welch","avatar_url":"https://avatars-next.observableusercontent.com/6334ed2ccd004bd8ab34e9f05c047bf4ef291dea914767f26079d7756d073607","tier":null,"role":"editor"},{"type":"team","id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team","avatar_url":"https://avatars-next.observableusercontent.com/7a25d1b5deb9c5290b12e4e0914aacdbd4196bb5c3a94c63a0fda0fe706d28b2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"5e6955c88320d791","slug":"websdk-examples","title":"Platform - API and SDK Examples","owner":{"id":"05baed136f9134c1","login":"nbai","name":"NB.AI Solutions Team"}},"type":"notebook","body":{"title":"Add Tile Source to Map","cells":[{"id":0,"value":"# [Add Tile Source to Map](https://docs.nextbillion.ai)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":45,"value":"Add another tile layer consisting of isolines of equal elevation generalized up to zoom 9.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof apiKey = secret2(\"apiKey\", {\n title: \"NextBillion.ai API Key\",\n submit: \"Set\",\n description:\n \"Contact support@nextbillion.ai to get your API key\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n nextbillion.setApiKey(apiKey);\n return html`Set API key
nextbillion.setApiKey(${apiKey.substr(\n 0,\n 4\n )}....)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`Add the stylesheet for the NB.ai SDK
<link href=\"https://maps-gl.nextbillion.io/maps/v2/api/css\" rel=\"stylesheet\">`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"viewof panel = Inputs.form(parameters, {\n template: (v) => htl.html`\n

\n ${v.styles}\n ${v.city}\n

\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"terrainMap = {\n apiKey;\n const container = html`

`;\n yield container;\n let originMarker = null;\n let pos = {\n lat: panel.city.centroid.split(\",\")[0],\n lng: panel.city.centroid.split(\",\")[1]\n };\n const nbmap = (container.value = new nextbillion.maps.Map({\n container: document.getElementById(\"nbmap\"),\n center: pos,\n zoom: 11,\n maxZoom: 15,\n minZoom: 5,\n style: panel.styles.value,\n scrollZoom: true\n }));\n\n nbmap.map.on(\"load\", (e) => {\n nbmap.map.addSource(\"contours\", {\n type: \"vector\",\n url: `https://api.nextbillion.io/tiles/contours-v2/tiles.json?key=${apiKey}`\n });\n nbmap.map.addLayer({\n id: \"terrain-data\",\n type: \"line\",\n source: \"contours\",\n \"source-layer\": \"contour\",\n layout: {\n \"line-join\": \"round\",\n \"line-cap\": \"round\"\n },\n paint: {\n \"line-color\": \"#ff69b4\",\n \"line-width\": 2\n }\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import {\n secret2,\n nextbillion,\n parameters\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"styling = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"