Sex offender GeoJSON, ready for a map layer.

import { Map } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';

// "/api/map/viewport" is a route on YOUR server.
// It adds the secret key and passes the request on.
const map = new Map({
  container: 'map',
  style: 'https://tiles.openfreemap.org/styles/liberty',
  center: [-87.6298, 41.8781],
  zoom: 10,
});

map.on('load', () => {
  // The clusters arrive ready-made: no "cluster: true" here.
  map.addSource('people', {
    type: 'geojson',
    data: { type: 'FeatureCollection', features: [] },
  });
  map.addLayer({
    id: 'clusters',
    type: 'circle',
    source: 'people',
    filter: ['has', 'point_count'],
    paint: {
      'circle-color': '#1d4ed8',
      'circle-radius': ['step', ['get', 'point_count'], 16, 50, 22, 500, 30],
    },
  });
  map.addLayer({
    id: 'cluster-count',
    type: 'symbol',
    source: 'people',
    filter: ['has', 'point_count'],
    layout: {
      'text-field': ['get', 'point_count_abbreviated'],
      'text-font': ['Noto Sans Regular'],
      'text-size': 12,
    },
    paint: { 'text-color': '#ffffff' },
  });
  map.addLayer({
    id: 'pins',
    type: 'circle',
    source: 'people',
    filter: ['!', ['has', 'point_count']],
    paint: { 'circle-color': '#b91c1c', 'circle-radius': 6 },
  });
  refresh();
});

map.on('moveend', refresh);

async function refresh() {
  const b = map.getBounds();
  const query = new URLSearchParams({
    bbox: [b.getWest(), b.getSouth(), b.getEast(), b.getNorth()].join(','),
    zoom: String(Math.floor(map.getZoom())),
    format: 'geojson',
  });
  const res = await fetch('/api/map/viewport?' + query);
  if (res.ok) map.getSource('people').setData(await res.json());
}

map.on('click', 'clusters', (e) => {
  const p = e.features[0].properties;
  // MapLibre hands array properties back as JSON text.
  const [west, south, east, north] = JSON.parse(p.bbox);
  const cam = map.cameraForBounds([[west, south], [east, north]], {
    padding: 48,
  });
  map.easeTo({
    center: cam.center,
    zoom: Math.max(p.expansion_zoom, Math.min(cam.zoom, 17)),
  });
});