2d:null 2e:["$","title",null,{"children":"Clustered Point Display and Selection Demo | NB.AI Solutions Team | Observable"}] 33:Tedb,async function loadPolygonToolActions( nbmap, draw ) { // events firing from the polygon draw tool nbmap.on('draw.create', updateSelectionArea); nbmap.on('draw.delete', updateSelectionArea); nbmap.on('draw.update', updateSelectionArea); nbmap.on('draw.modechange', updateSelectionArea); function updateSelectionArea(e) { console.log(e); let polygon = draw.getAll(); let mapPoints = []; console.log(polygon); mutable customerPoints = undefined; if (nbmap.map.getLayer('customers')) { nbmap.map.removeLayer('customers'); } if (nbmap.map.getLayer('customers-cluster-count')) { nbmap.map.removeLayer('customers-cluster-count'); } if (nbmap.map.getLayer('unclustered-customer')) { nbmap.map.removeLayer('unclustered-customer'); } randomPoints.pointsArray.forEach(ptLocation => { let turfPoint = turf.point([ptLocation.longitude,ptLocation.latitude]); try { if (turf.booleanPointInPolygon(turfPoint,turf.polygon(polygon.features[0].geometry.coordinates))) { mapPoints.push(ptLocation); } } catch { // we haven't defined a complete polygon so capture all points mapPoints.push(ptLocation); } }); let firstSymbolId; const layers = nbmap.map.getStyle().layers; for (const layer of layers) { if (layer.type === 'symbol') { firstSymbolId = layer.id; break; } } // remove points layer and then readd selected points based on geofence let customersjson = { type: 'FeatureCollection', features: [] }; mapPoints.forEach( (pt, i) => { let feature = { type: 'Feature', properties: { business: pt.business, name: pt.name, phone: pt.phone }, geometry: { type: 'Point', coordinates: [pt.longitude,pt.latitude] } } customersjson.features.push(feature); }); // passing these points out to a workbook cell mutable customerPoints = customersjson; if (!nbmap.map.getSource('customers')) { nbmap.map.addSource('customers', { type: 'geojson', data: null, cluster: true, clusterRadius: 20, clusterMaxZoom: 14 }); } nbmap.map.getSource('customers').setData(customersjson); if (nbmap.map.getLayer('customers')) { nbmap.map.removeLayer('customers'); } nbmap.map.addLayer({ type: 'circle', source: 'customers', id: 'customers', filter: ['has', 'point_count'], paint: { 'circle-color': [ 'step', ['get', 'point_count'], '#51bbd6', 100, '#51bbd6', 750, '#51bbd6' ], 'circle-radius': 5, "circle-radius": ["case", ["get", "cluster"], 10, 5], 'circle-stroke-opacity': 0.4, 'circle-stroke-width': 1.5 } }, firstSymbolId); if (nbmap.map.getLayer('customers-cluster-count')) { nbmap.map.removeLayer('customers-cluster-count'); } nbmap.map.addLayer({ id:'customers-cluster-count', type: 'symbol', source: 'customers', layout: { 'text-field': '{point_count_abbreviated}', }, paint: { 'text-color': 'white' } }); if (nbmap.map.getLayer('unclustered-customer')) { nbmap.map.removeLayer('unclustered-customer'); } nbmap.map.addLayer({ id: 'unclustered-customer', type: 'circle', source: 'customers', filter: ['!', ['has', 'point_count']], paint: { 'circle-color': '#93CEA3', 'circle-radius': 10, 'circle-stroke-width': 1, 'circle-stroke-color': '#fff' } }); } } 34:Tc66,drawToolStyle = { let style = [ // ACTIVE (being drawn) // line stroke { "id": "gl-draw-line", "type": "line", "filter": ["all", ["==", "$type", "LineString"], ["!=", "mode", "static"]], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#D20C0C", "line-dasharray": [0.2, 2], "line-width": 2 } }, // polygon fill { "id": "gl-draw-polygon-fill", "type": "fill", "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]], "paint": { "fill-color": "#8058a0", "fill-outline-color": "#8058a0", "fill-opacity": 0.2 } }, // polygon mid points { 'id': 'gl-draw-polygon-midpoint', 'type': 'circle', 'filter': ['all', ['==', '$type', 'Point'], ['==', 'meta', 'midpoint']], 'paint': { 'circle-radius': 3, 'circle-color': '#fbb03b' } }, // polygon outline stroke // This doesn't style the first edge of the polygon, which uses the line stroke styling instead { "id": "gl-draw-polygon-stroke-active", "type": "line", "filter": ["all", ["==", "$type", "Polygon"], ["!=", "mode", "static"]], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#D20C0C", "line-dasharray": [0.2, 2], "line-width": 2 } }, // vertex point halos { "id": "gl-draw-polygon-and-line-vertex-halo-active", "type": "circle", "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]], "paint": { "circle-radius": 5, "circle-color": "#FFF" } }, // vertex points { "id": "gl-draw-polygon-and-line-vertex-active", "type": "circle", "filter": ["all", ["==", "meta", "vertex"], ["==", "$type", "Point"], ["!=", "mode", "static"]], "paint": { "circle-radius": 3, "circle-color": "#D20C0C", } }, // INACTIVE (static, already drawn) // line stroke { "id": "gl-draw-line-static", "type": "line", "filter": ["all", ["==", "$type", "LineString"], ["==", "mode", "static"]], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#000", "line-width": 3 } }, // polygon fill { "id": "gl-draw-polygon-fill-static", "type": "fill", "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]], "paint": { "fill-color": "#000", "fill-outline-color": "#000", "fill-opacity": 0.1 } }, // polygon outline { "id": "gl-draw-polygon-stroke-static", "type": "line", "filter": ["all", ["==", "$type", "Polygon"], ["==", "mode", "static"]], "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-color": "#000", "line-width": 3 } } ]; return style; }35:T607,html``36:[] 31:{"id":"7a6262810b520020","slug":"clustered-point-display-and-selection-demo","title":"Clustered Point Display and Selection Demo","thumbnail":"88b9dbf16d144341ab65d617958c4886a1150f6902fa98f424b933fd449dd9b6","access_level":"public","create_time":"$D2023-01-19T16:10:40.857Z","update_time":"$D2025-12-08T19:25:44.179Z","view_time":null,"first_public_time":"$D2023-01-26T12:53:12.716Z","has_unpublished_edits":null,"fork":false,"stars":1,"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":313,"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":5,"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":"Clustered Point Display and Selection Demo","cells":[{"id":0,"value":"# Clustered Point Display and Selection Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"A basic description of the use case would be: A web application that displays a map of a city, with randomized points plotted on it. The user can then use a Draw tool to draw a geofence, or a boundary, on the map. Once the geofence is drawn, the application will highlight the points (clustered) that fall within the boundary, allowing the user to easily identify and select specific locations within a specific area of interest. The user can also edit the geofence by dragging the points or the edges of the boundary, and rerun the selection process. This demo can be useful in many use cases such as location-based analytics, real estate, and logistics planning.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"---\nInitialize the [NB.ai SDK](https://docs.nextbillion.ai) with your API key. You only need to do this once.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof apiKey = secret2(\"apiKey\", {\n title: \"NextBillion.ai API Key\",\n submit: \"Set\",\n description: \"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":33,"value":"{\n nextbillion.setApiKey(apiKey);\n return html`Set API key
nextbillion.setApiKey(${apiKey.substr(0,4)}....)`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"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":54,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"---\nImport the NB.ai WebSDK along with some other helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import {\n nextbillion,\n parameters,\n secret2\n} from \"@nbai/nextbillion-ai-dependencies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof panel = Inputs.form(parameters, {\n template: (v) => htl.html`\n

\n ${v.city}\n ${v.jobs}\n

\n\n`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`---\nCreate a collection of ${panel.jobs} random points in ${panel.city.name}. Click on the drawing tool to show the points and select a collection of points within a geofenced area. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"randomPoints = {\n let retval = null;\n try {\n let retval = axios({\n method: \"GET\",\n url: `https://m4aqpzp5ah6n7ilzunwyo5ma2u0ezqcc.lambda-url.us-east-2.on.aws/?region=${panel.city.value}&number=${panel.jobs}&vehicles=10&type=service`,\n headers: {\n } \n }).then(res=>res.data);\n return retval;\n } catch (err) {\n \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"myMap = {\n apiKey;\n await visibility();\n const container = html`

`;\n yield container;\n let pos = {\n lat: panel.city.centroid.split(\",\")[0],\n lng: panel.city.centroid.split(\",\")[1]\n };\n\n const nbmap = (container.value = new nextbillion.maps.Map({\n container: document.getElementById(\"map\"),\n center: pos,\n zoom: 8,\n maxZoom: 15,\n minZoom: 5,\n style: panel.styles.value,\n scrollZoom: true\n }));\n\n loadMapActions(nbmap);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"{\n if (customerPoints == undefined) {\n return md`---\nthis is our placeholder for the table that will show the selected points`;\n } else \n return Inputs.table(customerPoints.features, \n {\n columns: [\n \"properties\"],\n header: {\n properties: `Businesses within Geofence ${customerPoints.features.length}`\n },\n format: {\n properties: x => { return `${x.business}-${x.name}-${x.phone}`}\n },\n rows: 10,\n maxWidth: 600,\n multiple: false,\n required: false\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"async function loadMapActions(nbmap) {\n nbmap.map.on(\"load\", function () {\n let draw = new drawtool({\n displayControlsDefault: false,\n controls: {\n polygon: true,\n combine_features: false,\n uncombine_features: false,\n trash: true\n },\n styles: drawToolStyle\n });\n panel.city.onchange = function () {\n let pos = {\n lat: panel.city.centroid.split(\",\")[0],\n lng: panel.city.centroid.split(\",\")[1]\n };\n\n nbmap.map.flyTo({\n center: pos,\n zoom: 13,\n speed: 9.0,\n curve: 0.8\n });\n };\n //nbmap.map.addControl(draw, 'top-left');\n loadPolygonToolActions(nbmap, draw);\n nbmap.map.addControl(draw, \"top-left\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"mutable customerPoints = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"Axios is a JavaScript library that allows you to make HTTP requests from the browser or from a Node.js environment. It is a promise-based library that simplifies the process of making XMLHttpRequests (XHR) and handling responses. It can be used to make both GET and POST requests and supports a wide range of features such as automatic transformation of request and response data, handling of request and response headers, and the ability to cancel requests. In this demo, we are only using this library to call a service that generates the random points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"axios = {\n let axios = await require('axios');\n return axios;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"Turf.js is a JavaScript library for spatial analysis. It allows for the manipulation and analysis of geospatial data in a simple and efficient manner. The library provides a wide range of tools for performing tasks such as geospatial interpolation, data classification, and spatial statistics. In this demo we use the library to determine whether points are present within a given polygon/geofence region.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"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"},{"id":111,"value":"Mapbox GL Draw is an open-source JavaScript library that allows users to draw and edit geometries on a vector map such as the NB.ai mapping instance. It provides a set of APIs for creating and manipulating a variety of geometric shapes, such as points, lines, and polygons. The library also provides a user-friendly UI for drawing, editing, and deleting geometries on the map. The Draw tool supports multi-language, undo/redo, snapping to the grid, and can be easily customized to suit the needs of the application.\n\nIt's a powerful tool for creating and editing geospatial data on the fly, and it can be used in a variety of applications such as mapping, GIS, and location-based services.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"drawtool = {\n let drawtool = await require('@mapbox/mapbox-gl-draw');\n return drawtool;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"Draw allows for customization of the drawing tool's styles according to the Mapbox GL style specification. The style of the drawing tool can be customized using the styles option, which accepts a JavaScript object that defines the styles for different types of geometries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"