2b:null 2c:["$","title",null,{"children":"GeoJSON Layer on NB.ai Map | NB.AI Solutions Team | Observable"}] 31:[] 2f:{"id":"adbed8c6e20255ba","slug":null,"title":"GeoJSON Layer on NB.ai Map","thumbnail":"8a98647389ef5062a0d9b359be0ae5774f51a5fd26dd8faa895adc428bc31f7e","access_level":"public","create_time":"$D2023-01-28T14:14:30.035Z","update_time":"$D2023-08-07T21:56:56.528Z","view_time":null,"first_public_time":"$D2023-01-28T15:46:21.103Z","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":168,"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":1,"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":"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"viewof geojsonFile = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"mutable nbmap = undefined","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"fileData = Files.text(geojsonFile)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"import {\n secret2,\n nextbillion,\n styles,\n cities\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"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"