2b:null 2c:["$","title",null,{"children":"Create Styled Clusters of Points on Map | NB.AI Solutions Team | Observable"}] 31:T1945,clusterMap = { apiKey; const container = html`

`; yield container; let pos = { lat: 34.01645, lng: -118.144 }; const nbmap = (container.value = new nextbillion.maps.Map({ container: document.getElementById("map"), center: pos, zoom: 10, maxZoom: 15, minZoom: 5, style: "https://api.nextbillion.io/maps/dark/style.json", scrollZoom: true })); // filters for classifying vehicles into five categories based on capacity var capacity1 = ["<", ["get", "capacity"], 2]; var capacity2 = [ "all", [">=", ["get", "capacity"], 2], ["<", ["get", "capacity"], 3] ]; var capacity3 = [ "all", [">=", ["get", "capacity"], 3], ["<", ["get", "capacity"], 4] ]; var capacity4 = [ "all", [">=", ["get", "capacity"], 4], ["<", ["get", "capacity"], 5] ]; var capacity5 = [">=", ["get", "capacity"], 5]; // colors to use for the categories var colors = ["#e2daea", "#b7a5c6", "#816796", "#844faf", "#8726d6"]; nbmap.on("load", function () { nbmap.map.addSource("vehicles", { type: "geojson", data: vehicleLocations, cluster: true, clusterRadius: 80, clusterProperties: { // keep separate counts for each capacity category in a cluster capacity1: ["+", ["case", capacity1, 1, 0]], capacity2: ["+", ["case", capacity2, 1, 0]], capacity3: ["+", ["case", capacity3, 1, 0]], capacity4: ["+", ["case", capacity4, 1, 0]], capacity5: ["+", ["case", capacity5, 1, 0]] } }); // circle and symbol layers for rendering individual earthquakes (unclustered points) nbmap.map.addLayer({ id: "vehicle_circle", type: "circle", source: "vehicles", filter: ["!=", "cluster", true], paint: { "circle-color": [ "case", capacity1, colors[0], capacity2, colors[1], capacity3, colors[2], capacity4, colors[3], colors[4] ], "circle-opacity": 0.6, "circle-radius": 12 } }); nbmap.map.addLayer({ id: "vehicle_label", type: "symbol", source: "vehicles", filter: ["!=", "cluster", true], layout: { "text-field": [ "number-format", ["get", "capacity"], { "min-fraction-digits": 0, "max-fraction-digits": 0 } ], "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"], "text-size": 10 }, paint: { "text-color": ["case", ["<", ["get", "capacity"], 3], "black", "white"] } }); // objects for caching and keeping track of HTML marker objects (for performance) var markers = {}; var markersOnScreen = {}; function updateMarkers() { var newMarkers = {}; var features = nbmap.map.querySourceFeatures("vehicles"); // for every cluster on the screen, create an HTML marker for it (if we didn't yet), // and add it to the map if it's not there already for (var i = 0; i < features.length; i++) { var coords = features[i].geometry.coordinates; var props = features[i].properties; if (!props.cluster) continue; var id = props.cluster_id; var marker = markers[id]; if (!marker) { var el = createDonutChart(props); marker = new nextbillion.maps.Marker(el) .setLngLat(coords) .addTo(nbmap.map); markers[id] = marker; } newMarkers[id] = marker; if (!markersOnScreen[id]) marker.addTo(nbmap.map); } // for every marker we've added previously, remove those that are no longer visible for (id in markersOnScreen) { if (!newMarkers[id]) markersOnScreen[id].remove(); } markersOnScreen = newMarkers; } // after the GeoJSON data is loaded, update markers on the screen and do so on every map move/moveend nbmap.map.on("data", function (e) { if (e.sourceId !== "vehicles" || !e.isSourceLoaded) return; nbmap.map.on("move", updateMarkers); nbmap.map.on("moveend", updateMarkers); updateMarkers(); }); }); // code for creating an SVG donut chart from feature properties function createDonutChart(props) { var offsets = []; var counts = [ props.capacity1, props.capacity2, props.capacity3, props.capacity4, props.capacity5 ]; var total = 0; for (var i = 0; i < counts.length; i++) { offsets.push(total); total += counts[i]; } var fontSize = total >= 1000 ? 22 : total >= 100 ? 20 : total >= 10 ? 18 : 16; var r = total >= 1000 ? 50 : total >= 100 ? 32 : total >= 10 ? 24 : 18; var r0 = Math.round(r * 0.6); var w = r * 2; var html = '

"; var el = document.createElement("div"); el.innerHTML = html; return el.firstChild; } function donutSegment(start, end, r, r0, color) { if (end - start === 1) end -= 0.00001; var a0 = 2 * Math.PI * (start - 0.25); var a1 = 2 * Math.PI * (end - 0.25); var x0 = Math.cos(a0), y0 = Math.sin(a0); var x1 = Math.cos(a1), y1 = Math.sin(a1); var largeArc = end - start > 0.5 ? 1 : 0; return [ '' ].join(" "); } }32:[] 2f:{"id":"d79cf1b679c31620","slug":null,"title":"Create Styled Clusters of Points on Map","thumbnail":"e57e660376eb4e11c3d6f435ef220a7dd47099d915a97e9334e0b7202b61454f","access_level":"public","create_time":"$D2023-01-29T14:16:15.673Z","update_time":"$D2025-06-27T17:41:05.525Z","view_time":null,"first_public_time":"$D2023-01-29T14:51:01.077Z","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":89,"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":0,"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":"Create Styled Clusters of Points on Map","cells":[{"id":0,"value":"# [Create Styled Clusters of Points on Map](https://docs.nextbillion.ai)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"html`Display a map that contains clustered points in a region that represent the number of vehicles. The cluster will contain a donut chart that indicates the number of each vehicle's capacity. When the points are unclustered, the individual points will display the vehicle capacity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"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":9,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"html`

Create 1000 random vehicles in Los Angeles with random capacity 1-5

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"vehicleLocations = {\n let retval = null;\n retval = await fetch(\n `https://m4aqpzp5ah6n7ilzunwyo5ma2u0ezqcc.lambda-url.us-east-2.on.aws/?region=la&number=1000&vehicles=10&type=service`\n ).then((response) => response.json());\n\n let randomPoints = {\n type: \"FeatureCollection\",\n features: []\n };\n retval.pointsArray.forEach((pt, i) => {\n let feature = {\n type: \"Feature\",\n properties: {\n business: pt.business,\n name: pt.name,\n phone: pt.phone,\n capacity: Math.floor(Math.random() * 5 + 1)\n },\n geometry: {\n type: \"Point\",\n coordinates: [pt.longitude, pt.latitude]\n }\n };\n randomPoints.features.push(feature);\n });\n return randomPoints;\n //return retval;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import {\n secret2,\n nextbillion,\n styles,\n routeStyles\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"styling = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"