Leaflet debug page

Basic Marker Clustering

This is the basic example demonstrating marker clustering functionality. Markers are automatically grouped into clusters based on proximity.

Features:

Click clusters to see marker count in console
Click individual markers for alerts
Add or remove markers dynamically

import { Map, TileLayer, Marker, LatLng } from 'leaflet';
import { MarkerClusterGroup } from 'leaflet.markercluster';

const tiles = new TileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png');
const map = new Map('map', { center: [50.5, 30.51], zoom: 15, layers: [tiles] });

const markers = new MarkerClusterGroup();

// Add markers
for (let i = 0; i < 100; i++) {
  const m = new Marker(randomLatLng);
  markers.addLayer(m);
}

map.addLayer(markers);

Interactive Controls: