2d:null 2e:["$","title",null,{"children":"Static Map Tile with Route | NB.AI Solutions Team | Observable"}] 33:T49f,routePolyline = { nextbillion.setApiKey(apiKey); const directionsService = new nextbillion.maps.DirectionsService(); let resp = await directionsService.route({ origin: { lng: panel.originPoint.split(",")[1], lat: panel.originPoint.split(",")[0] }, destination: { lng: panel.destinationPoint.split(",")[1], lat: panel.destinationPoint.split(",")[0] }, mode: panel.routeStyle.value }); let geojson = { type: "FeatureCollection", features: [ { type: "Feature", properties: {}, geometry: { coordinates: nextbillion.utils.polyline .decode(resp.routes[0].geometry, 6) .map((c) => c.reverse()), type: "LineString" } } ] }; // Here we are reducing the number of points that comprise // the polyline using a generalizatin/simplification of the line. // We need to reduce the number of points so we can build a URL that // doesn't exceed URI length limits - you will see 414 errors if too long let options = { tolerance: 0.001, highQuality: false }; let generalized = turf.simplify(geojson, options); return generalized; }34:T611,inputs = { const offset = new Date().getTimezoneOffset(); let newBase = new Date(new Date().getTime() + 86400 * 1000); let tmrwStart = new Date( `${newBase.toLocaleDateString("en-US")} 06:00:00 GMT${ offset >= 0 ? "+" : "" }${Math.round(offset / 60)}${ Math.abs(offset % 60) ? Math.abs(offset % 60) : "" }` ); const inputs = { departureTime: Inputs.datetime({ label: "Departure Time", value: tmrwStart.toISOString().slice(0, -1) }), routeStyle: Inputs.select(routeStyles, { label: "Route Profile", format: (x) => x.name, value: routeStyles.find((t) => t.name === "Automobile") }), mapStyle: Inputs.select( [ { name: "Day", value: "light" }, { name: "Night", value: "dark" } ], { label: "Map Style", format: (x) => x.name } ), originPoint: Inputs.text({ label: "Origin Point", value: "40.1177,-83.1265" }), destinationPoint: Inputs.text({ label: "Destination Point", value: "39.9991,-82.885" }), imageHeight: Inputs.text({ label: "Image Height", value: "600" }), imageWidth: Inputs.text({ label: "Image Width", value: "600" }), routeWidth: Inputs.text({ label: "Route Width", value: "3" }), mode: Inputs.select( [ { name: "Standard", value: "standard" }, { name: "Flexible", value: "flexible" } ], { label: "Options", format: (x) => x.name } ) }; return inputs; }35:[] 31:{"id":"cfcd89235deb35c5","slug":"static-map-tile-with-route","title":"Static Map Tile with Route","thumbnail":"031d3830df6905bc5309806dc80cf1aaebf08315b7129369c44c7da8b8d789f1","access_level":"public","create_time":"$D2023-04-19T13:29:27.842Z","update_time":"$D2025-06-20T17:52:51.515Z","view_time":null,"first_public_time":"$D2023-04-19T19:50:33.614Z","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":259,"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":"Static Map Tile with Route","cells":[{"id":0,"value":"# [Static Map Tile with Route](https://docs.nextbillion.ai)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"viewof panel = Inputs.form(inputs, {\n template: (v) => htl.html`\n

\n ${v.mapStyle}\n ${v.routeStyle}\n ${v.originPoint}\n ${v.destinationPoint}\n ${v.imageHeight}\n ${v.imageWidth}\n ${v.routeWidth}\n

\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof demoImage = staticMapImage()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"demoImage","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"inputs.mapStyle.value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"staticMapImage = function () {\n // use route polyline points to build static image request\n let pointArray = routePolyline.features[0].geometry.coordinates;\n\n let polyline = `path=stroke:blue|width:${panel.routeWidth}|fill:none`;\n\n pointArray.forEach((pt, idx) => {\n polyline += `|${pt[1]},${pt[0]}`;\n });\n\n // Add green marker at departure and red marker at end\n let markers = `markers=${pointArray[0][1]},${pointArray[0][0]},green|${\n pointArray[pointArray.length - 1][1]\n },${pointArray[pointArray.length - 1][0]},red`;\n const container = html`

`;\n\n container.value = null;\n var image = new Image();\n image.src = `https://api.nextbillion.io/maps/${panel.mapStyle.value}/static/auto/${panel.imageHeight}x${panel.imageWidth}.png?key=${apiKey}&attribution=false&${polyline}&${markers}`;\n\n image.onload = () => {\n container.value = image;\n container.dispatchEvent(new CustomEvent(\"input\"));\n };\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {\n secret2,\n nextbillion,\n routeStyles\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"turf = {\n let turf = await require(\"https://unpkg.com/@turf/turf@6/turf.min.js\");\n return turf;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"