leaflet-markercluster

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.css">
<link rel="stylesheet" href="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/MarkerCluster.Default.css">
<script src="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/dist/leaflet.markercluster.js"></script>
<script src="//rawgit.com/Leaflet/Leaflet.markercluster/leaflet-0.7/example/realworld.10000.js"></script>
<div id="map"></div>

CSS

body {
  margin: 0;
}

#map {
  height: 100vh;
}

JavaScript

var tiles = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="//openstreetmap.org/copyright">Kaswork</a> contributors, Points &copy 2012 LINZ'
});

var map = L.map('map', {
  center: L.latLng(-37.89, 175.46),
  zoom: 13,
  layers: [tiles]
});

var mcg = L.markerClusterGroup({
  chunkedLoading: true,
  //singleMarkerMode: true,
  spiderfyOnMaxZoom: false
});

for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
  var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title });
  marker.bindPopup(title);
  mcg.addLayer(marker);
}

map.addLayer(mcg);