Leaflet with Control Layer and MarkerCluster

by alfannas

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<div id='map'></div>

CSS

#map {
			width: 600px;
			height: 400px;
		}

JavaScript

var cities = L.layerGroup();

	L.marker([39.61, -105.02]).bindPopup('This is Littleton, CO.').addTo(cities),
	L.marker([39.74, -104.99]).bindPopup('This is Denver, CO.').addTo(cities),
	L.marker([39.73, -104.8]).bindPopup('This is Aurora, CO.').addTo(cities),
	L.marker([39.77, -105.23]).bindPopup('This is Golden, CO.').addTo(cities);
  
  var province = L.layerGroup();

	L.marker([39.62, -105.02]).bindPopup('This is Littleton, CO.').addTo(province),
	L.marker([39.75, -104.99]).bindPopup('This is Denver, CO.').addTo(province),
	L.marker([39.74, -104.8]).bindPopup('This is Aurora, CO.').addTo(province),
	L.marker([39.78, -105.23]).bindPopup('This is Golden, CO.').addTo(province);


	var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>',
		mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';

	var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
		streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

	var map = L.map('map', {
		center: [39.73, -104.99],
		zoom: 10,
		layers: [grayscale, cities]
	});

	var baseLayers = {
		"Grayscale": grayscale,
		"Streets": streets
	};

	var overlays = {
		"Cities": cities,
    "Province": province
	};

	L.control.layers(baseLayers, overlays).addTo(map);
  
var markers = L.markerClusterGroup();

markers.addLayer(L.marker(new L.LatLng(39.7626713,-105.0412023)).bindPopup("hello"));
markers.addLayer(L.marker(new L.LatLng(39.718848, -104.952625)).bindPopup("hello"));

markers.addLayer(L.marker(new L.LatLng(39.718848, -104.952625)).bindPopup("hello"));

markers.addLayer(L.marker(new L.LatLng(39.718848, -104.952625)).bindPopup("hello"));

map.addLayer(markers);