Exploring Clustered Point Display and Selection

Imagine a dynamic web application that unveils a city map adorned with randomly placed points. In this Technical Notebook, we explore an innovative tool that goes beyond mere aesthetics; it allows users to employ a Draw tool, creating geofences or boundaries on the map. Once drawn, the application intelligently highlights clustered points within the boundary, facilitating seamless identification and selection of specific locations within a targeted area of interest.

Key Features

The key features of the tool used in this notebook are as follows:

1. Geofence Creation and Modification

  • Users can easily draw geofences on the map using a user-friendly Draw tool.
  • The drawn boundaries can be edited by dragging points or adjusting the edges of the geofence.

2. Dynamic Point Clustering

  • The application automatically clusters points falling within the geofenced area.
  • Clusters are visually distinct, enhancing user experience and aiding in quick identification.

3. Interactive Selection Process

  • Users can select and manipulate specific points within the geofenced area.
  • The selection process is intuitive, allowing for efficient data exploration.

Use Cases

Clustered point display and selection can be employed in a variety of use cases and applications such as: 

Location-Based Analytics: Uncover valuable insights by analyzing points within specific geographic areas. Businesses can cut through the data clutter by focusing on specific geographies.

Real Estate: Streamline property searches by focusing on clustered points within desired regions. In the real estate business, precision is everything. Property searches are simplified by the use of clustered point display and selection. Dive into the most important regions, focusing on key clusters. 

Logistics Planning: Optimize routes and resource allocation based on points strategically located within geofenced zones. Logistics providers can improve operational efficiency and lower costs by strategically placing cluster points within geofenced areas. 

Implementation Guide

This section outlines the step-by-step process implemented in this technical notebook.

1. SDK Initialization

Initialize the NB.ai SDK with your API key using the provided code snippet.


nextbillion.setApiKey(your_api_key)

2. Stylesheet Integration

Add the NB.ai SDK stylesheet to your project for seamless integration.


link href="https://maps-gl.nextbillion.io/maps/v2/api/css" rel="stylesheet"

3. Dependencies Import

Import necessary dependencies for the NB.ai Web SDK.


import { nextbillion, parameters, cities, secret2 } from "@nbai/nextbillion-ai-dependencies"

4. Demo Setup

  • Choose a city (e.g., Los Angeles) and set the number of jobs (e.g., 25).
  • Generate a collection of 25 random points within Los Angeles.
  • Utilize the drawing tool to showcase points and select a collection within a geofenced area.

The following image showcases a snapshot of the Geofence generated by the tool.

clustered point display and selection

Businesses within Geofence 8

  • Swift and Sons – Kasey Lang – 448-511-4167
  • Harber PLC – Eddie Boyle – 902-331-4139
  • Ankunding Group – Vern Lemke – 802-197-8547
  • Rosenbaum Group – Marques Mraz – 419-558-3161
  • Wilkinson Group – Johann Murphy – 492-526-5065
  • Wolff and Sons – Edgardo Huel – 289-104-8057
  • Tillman PLC – Corene Schulist – 174-168-2594
  • Ernser LLC – Juliana Terry – 546-922-5116

Contact [email protected] to obtain your API key and kickstart your journey into the world of clustered point display and selection.

Access Notebook