Leaflet Markercluster

by designworksinteractive

HTML

<script src="https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.2.0/mapbox.css">
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />

<!-- Example data. -->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/135743/realworld.388.js"></script>

<div id='map'></div>

CSS

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

JavaScript

L.mapbox.accessToken = 'pk.eyJ1Ijoib2xpdmVyc2V0dGxlIiwiYSI6ImNqZHpwdmNpOTR0c3MycXFvZHJtZjY1aWgifQ.ZdfHhx7OBreGfj48PukkMA';
    var map = L.mapbox.map('map')
        .setView([-37.82, 175.215], 14)
        .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

    var markers = new L.MarkerClusterGroup();

    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]), {
            icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}), 
            title: title
        });
        marker.bindPopup(title);
        markers.addLayer(marker);
    }

    map.addLayer(markers);