Mapbox / Leaflet.Markercluster getLayers()
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.2/leaflet.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<div id="map"></div>
<div id="dvInfo"></div>
CSS
/* Map */
#map {
height: 440px;
}
JavaScript
var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
});
var map = L.map('map')
.setView([50.5, 30.51], 15)
.addLayer(osm);
var markers = new L.FeatureGroup();
map.on('popupopen', function () {
$('.link').click(function (e) {
createDialog();
});
});
function getRandomLatLng(map) {
var bounds = map.getBounds(),
southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng - southWest.lng,
latSpan = northEast.lat - southWest.lat;
return new L.LatLng(
southWest.lat + latSpan * Math.random(),
southWest.lng + lngSpan * Math.random());
}
var markerClusters = L.markerClusterGroup();
function populate() {
for (var i = 0; i < 10; i++) {
var marker = new L.marker(getRandomLatLng(map));
marker.bindPopup("<a class=\'link\' ><p>Lorem ipsum dolor sit</p>Permit:'" + i + "'</a>'", {
showOnMouseOver: true
});
markerClusters.addLayer(marker);
}
return false;
}
function createDialog() {
$.ajax({
dataType: 'html',
// Try loading data without new JavaScript, or at least code that do not collide with already loaded script.
// Otherwise (like loading this very page with "/") all script initialization code will run again, document id's will be duplicated, and weird things will happen.
url: 'http://a.tile.openstreetmap.org/0/0/0.png',
success: function (data) {
$('#dvInfo').html(data);
}
});
}
map.addLayer(markerClusters);
populate();