2f:[] 2d:{"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"},{"id":45,"value":"Add another tile layer consisting of isolines of equal elevation generalized up to zoom 9.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":11,"value":"","pinned":false,"hidden":false,"mode":"html"},{"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"},{"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"},{"id":13,"value":"import {\n secret2,\n nextbillion,\n parameters\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"styling = html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}