Old school D3 from simpler times

All examples By author By category About

wboykinm

Full window Github gist

Clustering: unicode hexagon character as markercluster icon, two levels of popups

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Markercluster</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; background-color: #000; }
  #map { position:absolute; top:0; bottom:0; width:100%; background-color: #000; }
  .hex {
    width: 40px;
		height: 40px;
    color: #9bd2ce;
    text-align: center;
    text-shadow:
      -0.5px -0.5px 0 #49ada6,  
      0.5px -0.5px 0 #49ada6,
      -0.5px 0.5px 0 #49ada6,
      0.5px 0.5px 0 #49ada6;
  }
  .leaflet-div-icon {
    background-color:rgba(0,0,0,0);
    border:0px;
  }
</style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script type="text/javascript" src="customers.js"></script>
<div id='map'></div>

<script>
  L.mapbox.accessToken = 'pk.eyJ1IjoiZmFyYWRheTIiLCJhIjoiTUVHbDl5OCJ9.buFaqIdaIM3iXr1BOYKpsQ';
    var map = L.mapbox.map('map').setView([40,-98],4);
    L.mapbox.styleLayer('mapbox://styles/faraday2/0fd3756a').addTo(map);

var markers = new L.MarkerClusterGroup({ 
    spiderfyOnMaxZoom: false, 
    showCoverageOnHover: false,
    singleMarkerMode: true,
    maxClusterRadius: 120,
		iconCreateFunction: function(cluster) {
      markers.on('clustermouseover', function(c) {
        var popup = L.popup()
          .setLatLng(c.layer.getLatLng())
          .setContent('<h2>' + c.layer._childCount +' customers</h2>')
          .openOn(map);
        }).on('clustermouseout',function(c){
           map.closePopup();
        }).on('clusterclick',function(c){
           map.closePopup();
        }); 
      var clusterSize = function(count) {
        return (count < 2) ? 16 :
          (count >= 2 && count <= 10) ? 32 :
          (count > 10 && count <= 50) ? 48 :
          64
      };
      return new L.DivIcon({
        iconSize: [40, 40],
        html: '<div class="hex" style="font-size:' + clusterSize(cluster.getChildCount())  + 'px">&#x2B22;</div>'
      });
		}
  });
  
  var featureLayer = L.geoJson(customerPoints, {
    onEachFeature: function(feature, layer) {
      var popupText = 'Customer: ' + feature.properties.person;
      layer.bindPopup(popupText)
      layer.on('mouseover', function (e) {
        this.openPopup();
      });
      layer.on('mouseout', function (e) {
        this.closePopup();
      });
    }
  })

markers.addLayer(featureLayer);
  map.addLayer(markers);
  
  featureLayer.on('ready', function() {
    map.fitBounds(featureLayer.getBounds());
  });
</script>

</body>
</html>

https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js

https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js