2d:null 2e:["$","title",null,{"children":"NB.ai Maps SDK with Deck.gl - Animating Trip Data | NB.AI Solutions Team | Observable"}] 33:T676,getDeckGLMap = { await visibility; let container = html`

`; apiKey; let step = 6; let timerId = 0; const BLUE = [23, 184, 190]; const RED = [253, 128, 93]; const { TripsLayer, MapboxLayer } = deck; let pos = { lat: 40.715196585765504, lng: -73.97840470334431 }; const nbmap = (container.value = new nextbillion.maps.Map({ container, style: "https://api.nextbillion.io/maps/dark/style.json", center: pos, pitch: 45, zoom: 12, maxZoom: 18, minZoom: 10 })); nbmap.map.on("contextmenu", (e) => { clearTimeout(timerId); }); nbmap.map.on("click", (e) => { function f() { step += 1; const { TripsLayer, MapboxLayer } = deck; const BLUE = [23, 184, 190]; const RED = [253, 128, 93]; if (nbmap.map.getLayer("tripdata")) { nbmap.map.removeLayer("tripdata"); } const firstLabelLayerId = nbmap.map .getStyle() .layers.find((layer) => layer.type === "symbol").id; nbmap.map.addLayer( new MapboxLayer({ id: "tripdata", type: TripsLayer, data: trip_data, getPath: (d) => d.path, getTimestamps: (d) => d.timestamps, getColor: (d) => (d.vendor === 0 ? RED : BLUE), opacity: 0.5, widthMinPixels: 3, rounded: true, trailLength: 980, currentTime: step }), firstLabelLayerId ); timerId = setTimeout(f, 50); } clearTimeout(timerId); timerId = setTimeout(f, 50); }); nbmap.map.on("load", () => {}); return container; }34:[{"id":"e222d632b21ad5b471a9fe0fcb0f3bea730e74826370bf5e0117ff5a03ab9970b928b0bbfdc64fccd7da25ce129f2bb2e478c10b89debde1c8ae1ddcd89a0417","href":"https://static.observableusercontent.com/files/e222d632b21ad5b471a9fe0fcb0f3bea730e74826370bf5e0117ff5a03ab9970b928b0bbfdc64fccd7da25ce129f2bb2e478c10b89debde1c8ae1ddcd89a0417","name":"trips-v7.json","type":"application/json","lastModified":1675791514232.344,"size":1892958},{"id":"5177c1a18a0583354cece04e27a5b7e45f6cfdcec41cd2c9d57a96cca30bc0a458ab076aee6fa83c33cb0b581d14ab6a4dab0ee189f6420722e76bb18bbda1f8","href":"https://static.observableusercontent.com/files/5177c1a18a0583354cece04e27a5b7e45f6cfdcec41cd2c9d57a96cca30bc0a458ab076aee6fa83c33cb0b581d14ab6a4dab0ee189f6420722e76bb18bbda1f8","name":"trackingData.json","type":"application/json","lastModified":1699645523000.846,"size":20461}] 31:{"id":"ee428de3b1ea2f98","slug":"nb-ai-maps-sdk-with-deck-gl-animating-trip-data","title":"NB.ai Maps SDK with Deck.gl - Animating Trip Data","thumbnail":"e7f41df67e2682d3c227ec072513e23881cd7a388b3d5ebb0b94c34c8c8b3a56","access_level":"public","create_time":"$D2023-02-07T17:11:45.210Z","update_time":"$D2025-05-14T14:23:39.883Z","view_time":null,"first_public_time":"$D2023-02-07T22:10:46.217Z","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":"NB.ai Maps SDK with Deck.gl - Animating Trip Data","cells":[{"id":0,"value":"# NB.ai Maps SDK with Deck.gl - Animating Trip Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"deck.gl is an open sourced project originally developed at Uber to facilitate WebGL-based visualizations of large data sets. In this sample, we show how the [NB.ai maps SDK](https://docs.nextbillion.ai) can easily interleave deck.gl content into an interactive data visualization.\n\nWe'll take advantage of a fairly well known dataset of NYC Taxi Trip data and create an animation of the points of each journey using the deck.gl TripsLayer module. Clicking on the map will move the timeline for each trip forward and the trail of the path taken by each taxi is shown in the deck.gl layer. Right clicking on the map will stop the progression of the timeline. The colors of the lines are determined based on the 'vendor' setting in the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"nextbillion = {\n let nextbillion = await require(\"@nbai/nbmap-gl@2.3.5\");\n return nextbillion;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"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":24,"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":135,"value":"md`Click on the map to start the trips data animation. Right click to pause`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"trip_data = await FileAttachment(\"trips-v7.json\").json({\n typed: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import { secret2 } from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"deck = require.alias({ h3: {}, s2Geometry: {} })(\"deck.gl@8.8.23/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"