2f:[] 2d:{"title":"GeoJSON Layer on NB.ai Map","cells":[{"id":0,"value":"# [GeoJSON Layer on NB.ai Map](https://docs.nextbillion.ai)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"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":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"{\n nextbillion.setApiKey(apiKey.value);\n return html`Set API key
nextbillion.setApiKey(${apiKey.value.substr(\n 0,\n 4\n )}....)`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"html`Add the stylesheet for the NB.ai SDK
<link href=\"https://maps-gl.nextbillion.io/maps/v2/api/css\" rel=\"stylesheet\">`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":37,"value":"viewof geojsonFile = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"geojsonRender = {\n let geoJSONContent = JSON.parse(fileData);\n if (nbmap.map.getSource(\"geojson-source\")) {\n if (nbmap.map.getLayer(\"uploaded-geojson\")) {\n nbmap.map.removeLayer(\"uploaded-geojson\");\n }\n nbmap.map.removeSource(\"geojson-source\");\n }\n\n nbmap.map.addSource(\"geojson-source\", {\n type: \"geojson\",\n data: geoJSONContent\n });\n\n if (nbmap.map.getLayer(\"uploaded-geojson\")) {\n nbmap.map.removeLayer(\"uploaded-geojson\");\n }\n nbmap.map.addLayer({\n id: \"uploaded-geojson\",\n type: \"fill\",\n source: \"geojson-source\",\n paint: {\n \"fill-color\": \"#e88d8d\",\n \"fill-opacity\": 0.4\n }\n });\n return geoJSONContent;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"geojsonMap = {\n apiKey;\n const container = html`

`;\n yield container;\n let originMarker = null;\n let pos = {\n lat: inputData_a.city.centroid.split(\",\")[0],\n lng: inputData_a.city.centroid.split(\",\")[1]\n };\n mutable nbmap = container.value = new nextbillion.maps.Map({\n container: document.getElementById(\"nbmap\"),\n center: pos,\n zoom: 9,\n maxZoom: 15,\n minZoom: 5,\n style: inputData_a.styles.value,\n scrollZoom: true\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"mutable nbmap = undefined","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"params = {\n let newBase = new Date(new Date().getTime() + 86400 * 1000);\n\n const inputs = {\n city: Inputs.select(cities, {\n label: \"Select city\",\n format: (x) => x.name,\n value: cities.find((t) => t.name === \"Columbus\")\n }),\n styles: Inputs.select(styles, {\n label: \"Map Style\",\n format: (x) => x.name,\n value: styles.find((t) => t.name === \"Day\")\n }),\n fillColor: Inputs.color({ label: \"Fill Color\", value: \"#888888\" }),\n fillOpacity: Inputs.range([0, 1], {\n label: \"Fill Opacity\",\n step: 0.1,\n placeholder: \"0-1\",\n value: 0.2\n })\n };\n return inputs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"mutable inputData_a = Object({\n city: {\n name: \"Los Angeles\",\n centroid: \"34.01645908,-117.8443661\",\n value: \"la\"\n },\n styles: {\n name: \"Day\",\n value: \"https://api.nextbillion.io/maps/streets/style.json\"\n },\n fillColor: {\n name: \"Fill Color\",\n value: \"#888888\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"fileData = Files.text(geojsonFile)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import {\n secret2,\n nextbillion,\n styles,\n cities\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"styling = html`\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}