[Pkg-javascript-commits] [leaflet-markercluster] 22/31: Create pane example. Add second link to custom example.
Jonas Smedegaard
dr at jones.dk
Sun Oct 22 17:29:30 UTC 2017
This is an automated email from the git hooks/post-receive script.
js pushed a commit to annotated tag upstream/1.1.0_dfsg
in repository leaflet-markercluster.
commit 480c786986b893928bf00e5ca25b710a29b26f86
Author: ckrahe <chris at krahe.org>
Date: Wed Aug 16 21:45:28 2017 -0400
Create pane example. Add second link to custom example.
---
README.md | 4 +-
example/marker-clustering-pane.html | 98 +++++++++++++++++++++++++++++++++++++
2 files changed, 100 insertions(+), 2 deletions(-)
diff --git a/README.md b/README.md
index af9c759..3c71838 100644
--- a/README.md
+++ b/README.md
@@ -129,8 +129,8 @@ If you need to update the clusters icon (e.g. they are based on markers real-tim
* **singleMarkerMode**: If set to true, overrides the icon for all added markers to make them appear as a 1 size cluster. Note: the markers are not replaced by cluster objects, only their icon is replaced. Hence they still react to normal events, and option `disableClusteringAtZoom` does not restore their previous icon (see [#391](https://github.com/Leaflet/Leaflet.markercluster/issues/391)).
* **spiderLegPolylineOptions**: Allows you to specify [PolylineOptions](http://leafletjs.com/reference.html#polyline-options) to style spider legs. By default, they are `{ weight: 1.5, color: '#222', opacity: 0.5 }`.
* **spiderfyDistanceMultiplier**: Increase from 1 to increase the distance away from the center that spiderfied markers are placed. Use if you are using big marker icons (Default: 1).
-* **iconCreateFunction**: Function used to create the cluster icon [See default as example](https://github.com/Leaflet/Leaflet.markercluster/blob/15ed12654acdc54a4521789c498e4603fe4bf781/src/MarkerClusterGroup.js#L542).
-* **pane**: Map pane where the cluster icons will be added.
+* **iconCreateFunction**: Function used to create the cluster icon. See [the default implementation](https://github.com/Leaflet/Leaflet.markercluster/blob/15ed12654acdc54a4521789c498e4603fe4bf781/src/MarkerClusterGroup.js#L542) or the [custom example](example/marker-clustering-custom.html).
+* **pane**: Map pane where the cluster icons will be added. [See the pane example](example/marker-clustering-pane.html).
#### Chunked addLayers options
Options for the [addLayers](#bulk-adding-and-removing-markers) method. See [#357](https://github.com/Leaflet/Leaflet.markercluster/issues/357) for explanation on how the chunking works.
diff --git a/example/marker-clustering-pane.html b/example/marker-clustering-pane.html
new file mode 100644
index 0000000..6a1e095
--- /dev/null
+++ b/example/marker-clustering-pane.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Leaflet debug page</title>
+
+ <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
+ <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="screen.css" />
+
+ <link rel="stylesheet" href="../dist/MarkerCluster.css" />
+ <script src="../dist/leaflet.markercluster-src.js"></script>
+
+ <style>
+ .myclusterA {
+ width: 40px;
+ height: 40px;
+ background-color: greenyellow;
+ text-align: center;
+ font-size: 24px;
+ }
+ .myclusterB {
+ width: 40px;
+ height: 40px;
+ background-color: red;
+ text-align: center;
+ font-size: 24px;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div id="map"></div>
+
+ <script type="text/javascript">
+
+ 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'
+ }),
+ latlng = L.latLng(50.5, 30.51);
+
+ var map = L.map('map', {center: latlng, zoom: 15, layers: [tiles]});
+
+ //Define a pane above the default markerPane
+ map.createPane('paneB').style.zIndex = 610;
+
+ //Create two markerClusterGroups, one in the default markerPane, one in our custom pane
+ var markersA = createMarkerClusterGroup('myclusterA');
+ var markersB = createMarkerClusterGroup('myclusterB', 'paneB');
+
+ function createMarkerClusterGroup(className, pane) {
+ var mcg = L.markerClusterGroup({
+ maxClusterRadius: 120,
+ iconCreateFunction: function (cluster) {
+ var markers = cluster.getAllChildMarkers();
+ var n = 0;
+ for (var i = 0; i < markers.length; i++) {
+ n += markers[i].number;
+ }
+ return L.divIcon({ html: n, className: className, iconSize: L.point(40, 40) });
+ },
+ //Disable all of the defaults & specify the pane:
+ spiderfyOnMaxZoom: false, showCoverageOnHover: false, zoomToBoundsOnClick: false, pane: pane
+ });
+ return(mcg);
+ }
+
+ function populate(markers) {
+ for (var i = 0; i < 100; i++) {
+ var m = L.marker(getRandomLatLng(map), { title: i });
+ m.number = i;
+ markers.addLayer(m);
+ }
+ return false;
+ }
+
+ function getRandomLatLng(map) {
+ var bounds = map.getBounds(),
+ southWest = bounds.getSouthWest(),
+ northEast = bounds.getNorthEast(),
+ lngSpan = northEast.lng - southWest.lng,
+ latSpan = northEast.lat - southWest.lat;
+
+ return L.latLng(
+ southWest.lat + latSpan * Math.random(),
+ southWest.lng + lngSpan * Math.random());
+ }
+
+ populate(markersA);
+ populate(markersB);
+ map.addLayer(markersA);
+ map.addLayer(markersB);
+
+ </script>
+</body>
+</html>
--
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git
More information about the Pkg-javascript-commits
mailing list