Published
Edited
Jul 27, 2018
<html>
<head>
<meta charset=utf-8 />
<title></title>
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding :0;
}
.map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<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' />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<body>
<div id='map-cluster' class='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiaGFybGxvcyIsImEiOiJjamcyaXA2d2IxandwMzNwOWF2OWhlYmMxIn0.OtW1buMdQ9G60NkH2OGMfw';
var mapCluster = L.mapbox.map('map-cluster')
.setView([-22.752142,-43.175860], 11)
.addLayer(L.mapbox.tileLayer('mapbox.light'));
var data = 'https://gist.githubusercontent.com/harllos/6460980723dc6339df4065e9a8e905f5/raw/ec60987036ac3c9072f85960246c1145072a84b8/apoie_2607.geojson'
L.mapbox.featureLayer(data)
.on('ready', function(e) {
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
mapCluster.addLayer(clusterGroup);
var markers = new L.MarkerClusterGroup();
map.addLayer(markers);
});
</script>
</body>
</html>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
