Old school D3 from simpler times

All examples By author By category About

1Cr18Ni9

Full window Github gist

Leaflet - markercluster

Leaflet.markercluster - 0.7

Options:

showCoverageOnHover
zoomToBoundsOnClick
spiderfyOnMaxZoom
removeOutsideVisibleBounds
animate
animateAddingMarkers
disableClusteringAtZoom:
maxClusterRadius
polygonOptions
singleMarkerMode
spiderLegPolylineOptions
spiderfyDistanceMultiplier
iconCreateFunction

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
	  <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
  
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
    <script src="leaflet.markercluster-src.js"></script>

<style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map{ width:100%; height:100%; }
  </style>
  
</head>

<body>
  
  
  <div id="map"></div>
  
  
  <script>
    var map = L.map("map", {
        //center: [35.10418, -106.62987],
        center: [31.113154680911418, -238.61920595169067],
        doubleClickZoom: false,
        zoom: 14
    });

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

var markers = L.markerClusterGroup({maxClusterRadius:120});

$.getJSON("clusterPoints.json", function(json){
        json.forEach(function(p){
            // L.marker([p[0], p[1]]).bindPopup(p[2]);
            markers.addLayer(L.marker([p[0], p[1]]).bindPopup(p[2]));
        });

map.addLayer(markers);
    });
    
    
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
    <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
      <link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
  
    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>
    <script src="leaflet.markercluster-src.js"></script>
  
​
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map{ width:100%; height:100%; }
  </style>
  
</head>
​
<body>
  
  
  <div id="map"></div>
  
  
  <script>
    var map = L.map("map", {
        //center: [35.10418, -106.62987],
        center: [31.113154680911418, -238.61920595169067],
        doubleClickZoom: false,
        zoom: 14
    });
​
​
    L
        .tileLayer("https://{s}.tile.osm.org/{z}/{x}/{y}.png", {
           attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ',
            maxZoom: 18
        })
        .addTo(map);
​
​
    var markers = L.markerClusterGroup({maxClusterRadius:120});
​
​
    $.getJSON("clusterPoints.json", function(json){
        json.forEach(function(p){
            // L.marker([p[0], p[1]]).bindPopup(p[2]);
            markers.addLayer(L.marker([p[0], p[1]]).bindPopup(p[2]));
        });
​
        map.addLayer(markers);
    });
    
    
  </script>
</body>
​
    

Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url

https://code.jquery.com/jquery-1.8.2.js

https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js