Comments (5)
jasomdotnet
commented on June 9, 2024
1
Okey, here we go. This is first locally working example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.50000.1.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.50000.2.js"></script>
</head>
<body>
<div id="progress"><div id="progress-bar"></div></div>
<div id="map"></div>
<link rel="stylesheet" href="leaflet.css" />
<script src="leaflet-src.js"></script>
<link rel="stylesheet" href="MarkerCluster.css" />
<link rel="stylesheet" href="MarkerCluster.Default.css" />
<script src="leaflet.markercluster-src.js"></script>
<script src="leaflet.markercluster.layersupport-src.js"></script>
<script >
var tiles = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points © 2012 LINZ'
} ),
latlng = L.latLng( -37.82, 175.24 );
var map = L.map( 'map', { center: latlng, zoom: 13, layers: [ tiles ] } );
var progress = document.getElementById( 'progress' );
var progressBar = document.getElementById( 'progress-bar' );
var mcgLayerSupportGroup = L.markerClusterGroup.layerSupport( {
chunkedLoading: true,
chunkInterval: 100,
chunkProgress: updateProgressBar
} ),
control = L.control.layers( null, null, { collapsed: false } );
var group1 = L.layerGroup( fillMarkerList( addressPoints ) ); // 25k points
var group2 = L.layerGroup( fillMarkerList( addressPoints2 ) ); // 25k points
var group3 = L.layerGroup( fillMarkerList( addressPoints ) ); // 25k points
var group4 = L.layerGroup( fillMarkerList( addressPoints2 ) ); // 25k points
//var superGroup = L.layerGroup([group1, group2, group3, group4]);
mcgLayerSupportGroup.addTo( map );
mcgLayerSupportGroup.checkIn( [ group1, group2, group3, group4 ] );
control.addOverlay( group1, 'First quarter' );
control.addOverlay( group2, 'Second quarter' );
control.addOverlay( group3, 'Third quarter' );
control.addOverlay( group4, 'Fourth quarter' );
//control.addOverlay(superGroup, 'Super Group');
control.addTo( map );
group1.addTo( map ); // Adding to map or to AutoMCG are now equivalent.
group2.addTo( map );
group3.addTo( map );
group4.addTo( map );
//mcgLayerSupportGroup.addLayer(superGroup);
function updateProgressBar( processed, total, elapsed, layersArray ) {
console.log( "updateProgressBar" );
if ( elapsed > 200 ) {
// if it takes more than a second to load, display the progress bar:
progress.style.display = 'block';
progressBar.style.width = Math.round( processed / total * 100 ) + '%';
}
if ( processed === total ) {
// all markers processed - hide the progress bar:
progress.style.display = 'none';
}
}
function fillMarkerList( addressPointsSource ) {
var markerList = [ ];
for ( var i = 0; i < addressPointsSource.length; i++ ) {
var a = addressPointsSource[i];
var title = a[2];
var marker = L.marker( L.latLng( a[0], a[1] ), {
title: title
} );
marker.bindPopup( title );
markerList.push( marker );
}
return markerList;
}
</script>
</body>
</html>
Pasting the code here so it may help somebody. Also linked this template from here.
Note: do not use resources left on unpkg.com, download them locally. You will find download links in example files when you open console.
from leaflet.markercluster.layersupport.
ghybs
commented on June 9, 2024
1
Hi,
I am glad you managed to get an example to your liking.
It is true the demo was not meant to be reproduced, but only to provide a live trial.
The quick guide was there for that. But maybe a working bootstrapping example would have provided an intermediate step.
from leaflet.markercluster.layersupport.
jasomdotnet
commented on June 9, 2024
OMFG, I found it, what a feeling! It is in mcgLayerSupport-controlLayers-realworld.388.js file in the same folder. #ReverseEngineeringRetro
from leaflet.markercluster.layersupport.
jasomdotnet
commented on June 9, 2024
This morning I glued Leaflet.MarkerCluster.LayerSupport in my app and it is perfect!
I saw that quick guide text and for me it was too technical (js guy writes for js guys).
I was disappointed with "live trial" source code, because there was no direct script configuration.
For example original Leafleat tutorials are easy to follow. Plug-ins should follow the pattern.
from leaflet.markercluster.layersupport.
ghybs
commented on June 9, 2024
Closing due to inactivity.
PR welcome if someone can submit! 🙏
from leaflet.markercluster.layersupport.
Related Issues (20)
- Moving a marker throws an error and marker disappears HOT 3
- getBounds() doesn't return valid object HOT 6
- layersupport + freezable HOT 2
- checkOut throws error
- Leaflet Tag Filter Button and LayerSupport Plugins HOT 1
- How can I use this plugin in Angualr 2+? HOT 2
- Working with JSON data and Pie Chart HOT 1
- Can it be used without internet HOT 1
- Overlapping MarkerCluster popups? HOT 2
- Problem with passing options to MakerCluster HOT 2
- Change in element leaflet-control-layers-overlays HOT 2
- In mobile browsers, markers disappear HOT 1
- leaflet marker cluster HOT 3
- markersupport HOT 1
- Slider cluster with dynamic php data HOT 5
- The first demo popup unable to open HOT 5
- Simplify UMD wrapper like L.FeatureGroup.SubGroup HOT 1
- Is chunkedloading possible? HOT 2
- help with layersupport/leaflet slider HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from leaflet.markercluster.layersupport.