Skip to content

Instantly share code, notes, and snippets.

@elevine

elevine/index_markercluster.html

Last active September 26, 2016 17:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save elevine/dcf2cd7c586b4eec5a26a79712b7f1bc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save elevine/dcf2cd7c586b4eec5a26a79712b7f1bc to your computer and use it in GitHub Desktop.
Download ZIP
Realtime Dyamic Leaflet MarkerCluster
Raw
index_markercluster.html
<head>
<style>
#map {
height: 100vh;
width: 100vw;
padding: 0px;
margin: 0px;
background: white;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<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.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<body>
<div id="map"/>
<script type="text/javascript">
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
}),
latlng = L.latLng(-37.82, 175.24);
var map = L.map('map', {center: latlng, zoom: 1, layers: [tiles]});
var markers = L.markerClusterGroup();
map.addLayer(markers);
var markersToRemove = [];
// removes the last set and adds a new set of the same size
var addAndRemove = function(){
var markersToAdd = [];
for (var i = 0; i < 1500; i++) {
var marker = L.marker(new L.LatLng(faker.address.latitude(), faker.address.latitude()));
markersToAdd.push(marker);
}
markers.addLayers(markersToAdd);
markers.removeLayers(markersToRemove);
markersToRemove = markersToAdd;
}
// removes a list of markers from the map
var removeMarkers = function(removeList){
markers.removeLayers(removeList);
}
// adds a bunch of markers to the map
var addToMap = function(){
for (var i = 0; i < 1000; i++) {
var marker = L.marker(new L.LatLng(faker.address.latitude(), faker.address.latitude()));
markers.addLayer(marker);
}
};
window.setInterval(addAndRemove, 500);
//window.setInterval(addToMap, 500);
</script>
</body>
Raw
index_prunecluster.html
<head>
<style>
#map {
height: 100vh;
width: 100vw;
padding: 0px;
margin: 0px;
background: white;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/LeafletStyleSheet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/PruneCluster.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<body>
<div id="map"/>
<script type="text/javascript">
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}),
latlng = L.latLng(-37.82, 175.24);
var map = L.map('map', {center: latlng, zoom: 1, layers: [tiles]});
var pruneCluster = new PruneClusterForLeaflet();
map.addLayer(pruneCluster);
var markersToRemove = [];
// removes the last set and adds a new set of the same size
var addAndRemove = function(){
pruneCluster.RemoveMarkers(markersToRemove);
for (var i = 0; i < 50000; i++) {
var marker = new PruneCluster.Marker(faker.address.latitude(), faker.address.latitude());
pruneCluster.RegisterMarker(marker);
markersToRemove.push(marker);
}
pruneCluster.ProcessView();
}
// removes a list of markers from the map
var removeMarkers = function(){
markers.removeLayers(markersToRemove);
markersToRemove = [];
}
// adds a bunch of markers to the map
var addToMap = function(){
for (var i = 0; i < 1000; i++) {
var marker = L.marker(new L.LatLng(faker.address.latitude(), faker.address.latitude()));
markers.addLayer(marker);
}
};
window.setInterval(addAndRemove, 500);
//window.setInterval(addToMap, 500);
</script>
</body> attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
}),
latlng = L.latLng(-37.82, 175.24);
var map = L.map('map', {center: latlng, zoom: 1, layers: [tiles]});
var pruneCluster = new PruneClusterForLeaflet();
map.addLayer(pruneCluster);
var markersToRemove = [];
// removes the last set and adds a new set of the same size
var addAndRemove = function(){
pruneCluster.RemoveMarkers(markersToRemove);
for (var i = 0; i < 50000; i++) {
var marker = new PruneCluster.Marker(faker.address.latitude(), faker.address.latitude());
pruneCluster.RegisterMarker(marker);
markersToRemove.push(marker);
}
pruneCluster.ProcessView();
}
// removes a list of markers from the map
var removeMarkers = function(){
markers.removeLayers(markersToRemove);
markersToRemove = [];
}
// adds a bunch of markers to the map
var addToMap = function(){
for (var i = 0; i < 1000; i++) {
var marker = L.marker(new L.LatLng(faker.address.latitude(), faker.address.latitude()));
markers.addLayer(marker);
}
};
window.setInterval(addAndRemove, 500);
//window.setInterval(addToMap, 500);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment