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="http://www.mapbox.com/mapbox.js"></script>
/assets/realworld.388.js
<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);
    
    var addressPoints = [
[-37.8210922667, 175.2209316333, "2"],
[-37.8210819833, 175.2213903167, "3"],
[-37.8210881833, 175.2215004833, "3A"],
[-37.8211946833, 175.2213655333, "1"],
[-37.8209458667, 175.2214051333, "5"],
[-37.8208292333, 175.2214374833, "7"],
[-37.8325816, 175.2238798667, "537"],
[-37.8315855167, 175.2279767, "454"],
[-37.8096336833, 175.2223743833, "176"],
[-37.80970685, 175.2221815833, "178"],
[-37.8102146667, 175.2211562833, "190"],
[-37.8088037167, 175.2242227, "156"],
[-37.8112330167, 175.2193425667, "210"],
[-37.8116368667, 175.2193005167, "212"],
[-37.80812645, 175.2255449333, "146"],
[-37.8080231333, 175.2286383167, "125"],
[-37.8089538667, 175.2222222333, "174"],
[-37.8080905833, 175.2275400667, "129"],
[-37.808811, 175.2227592833, "172"],
[-37.80832975, 175.2276898167, "131"],
[-37.8089395333, 175.2281710333, "133"],
[-37.8093421, 175.2274883167, "135"],
[-37.8084820833, 175.22601925, "137"],
[-37.80881015, 175.22622865, "139"],
[-37.8090947667, 175.2263585667, "141"],
[-37.8092962333, 175.2244872333, "147"],
[-37.8091016667, 175.2249140167, "145"],
[-37.8088785167, 175.2253611667, "143"],
[-37.80825965, 175.22530115, "148"],
[-37.80995685, 175.2238554333, "153"],
[-37.80975435, 175.2238417833, "151"],
[-37.80950755,...