Point layer cluster (point helper)

This example showcases how to generate a cluster map using the point layer helper with its default configurations. To replicate this example, download the US schools sample data.

If your map contains a layer with a significant number of points, you have the option to configure clustering, which aids in visually extracting valuable information from your data. This is where a cluster map, also referred to as a bubble map, proves to be beneficial.

When you activate clustering, point features that are a certain distance apart on the screen are grouped into a cluster. The size of the cluster or bubble corresponds to the number of markers it contains. By zooming in closer on your map, you can view the individual points and interact with them.

Cluster maps are an excellent tool for determining the quantity of data points located within a specific region. If you need to measure density, a heat map is also highly effective and can incorporate your numeric values.

By default, the label is displayed, indicating the number of elements contained within each cluster.


npm install --save @maptiler/sdk

main.js

import { Map, MapStyle, config, helpers } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
    container: 'map',
    zoom: 3.2,
    center: [-98.84, 38.28],
    style: MapStyle.DATAVIZ.LIGHT
});

map.on('load', async function () {
  await helpers.addPoint(map, {
    data: 'schools.geojson',
    cluster: true,
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Point layer cluster (point helper) | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point helper</title>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
<style>
  body {margin: 0; padding: 0;}
  #map {position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>
<div id="map"></div>

<script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
        container: 'map',
        zoom: 3.2,
        center: [-98.84, 38.28],
        style: maptilersdk.MapStyle.DATAVIZ.LIGHT
    });

    map.on('load', async function () {
      await maptilersdk.helpers.addPoint(map, {
        data: 'schools.geojson',
        cluster: true,
      });
    });

</script>
</body>
</html>

Point layer cluster (point helper)

main.js

index.html

style.css

HTML clusters with custom properties

Point layer (point helper)

Heatmap layer (heatmap helper)

Point filtering by property

Point layer cluster (point helper)

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

HTML clusters with custom properties

Point layer (point helper)

Heatmap layer (heatmap helper)

Point filtering by property