feat: Open popup markercluster from outside

tomickigrzegorz · Dec 18, 2023 · 664bfa4 · 664bfa4
1 parent bd9a175
commit 664bfa4
Show file tree

Hide file tree

Showing 5 changed files with 173 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ Here is a working live demo : https://tomickigrzegorz.github.io/leaflet-examples
 
 > Work in progress :smiley: Suggestions welcome :bulb:.
 
+74 [open-popup-markercluster-from-outside](https://tomickigrzegorz.github.io/leaflet-examples/#74.open-popup-markercluster-from-outside)  
 73 [change-tile-style-when-click](https://tomickigrzegorz.github.io/leaflet-examples/#73.change-tile-style-when-click)  
 72 [add-rectangle-over-click-tiles](https://tomickigrzegorz.github.io/leaflet-examples/#72.add-rectangle-over-click-tiles)  
 71 [text-below-a-marker](https://tomickigrzegorz.github.io/leaflet-examples/#71.text-below-a-marker)  

diff --git a/docs/74.open-popup-markercluster-from-outside/index.html b/docs/74.open-popup-markercluster-from-outside/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Marker grouping width markercluster plugin</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
+    />
+
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
+    />
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+
+  <body>
+    <div id="map"></div>
+    <div class="markercluster"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/docs/74.open-popup-markercluster-from-outside/script.js b/docs/74.open-popup-markercluster-from-outside/script.js
@@ -0,0 +1,88 @@
+/* eslint-disable no-undef */
+/**
+ * Open popup markercluster from outside
+ */
+
+// config map
+let config = {
+  minZoom: 6,
+  maxZoom: 18,
+};
+// magnification with which the map will start
+const zoom = 6;
+// coordinates
+const lat = 51.9189046;
+const lng = 19.1343786;
+
+// coordinate array with popup text
+let points = [
+  [52.22922544734814, 21.008997559547428, "point 1"],
+  [52.22941930482576, 21.009861230850223, "point 2"],
+  [52.22966244690615, 21.011084318161014, "point 3"],
+  [52.22980701724154, 21.01167440414429, "point 4"],
+  [52.22998444382795, 21.012511253356937, "point 5"],
+  [52.230188154960125, 21.013487577438358, "point 6"],
+  [52.230299867119605, 21.01395428180695, "point 7"],
+  [51.26191485308451, 17.753906250000004, "point 8"],
+  [51.23440735163461, 17.578125000000004, "point 9"],
+  [50.84757295365389, 17.753906250000004, "point 10"],
+  [50.90303283111257, 18.061523437500004, "point 11"],
+  [51.04139389812637, 17.446289062500004, "point 12"],
+];
+
+// calling map
+const map = L.map("map", config).setView([lat, lng], zoom);
+
+// Used to load and display tile layers on the map
+// Most tile servers require attribution, which you can set under `Layer`
+L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  attribution:
+    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+}).addTo(map);
+
+// L.MarkerClusterGroup extends L.FeatureGroup
+// by clustering the markers contained within
+let markers = L.markerClusterGroup();
+let markerList = [];
+
+// Add markers to the layer
+for (let i = 0; i < points.length; i++) {
+  const [lat, lng, title] = points[i];
+
+  let marker = L.marker(new L.LatLng(lat, lng)).bindPopup(title);
+  markerList.push(marker);  
+  markers.addLayer(marker);
+}
+
+// Add all markers to map
+map.addLayer(markers);
+
+// Add list of markers
+const markerCluster = document.querySelector(".markercluster");
+markerCluster.insertAdjacentElement("beforeend", document.createElement("ul"));
+
+// add list of markers to markercluster
+points.map((point, index) => {
+  const [lat, lng, title] = point;
+  const li = document.createElement("li");
+  li.innerHTML = `<a href="#" data-index="${index}">${title}</a>`;
+  markerCluster.querySelector("ul").appendChild(li);
+});
+
+// add event listener to list of markers
+document.querySelectorAll(".markercluster ul li a").forEach((a,idx) => {
+  a.addEventListener("click", (e) => {
+    e.preventDefault();
+
+    // get index of marker
+    const index = e.target.dataset.index;
+
+    const m = markerList[index];
+
+    // zoom to marker and open popup
+    markers.zoomToShowLayer(m, () => { 
+      m.openPopup();
+    });
+  });
+});
+
diff --git a/docs/74.open-popup-markercluster-from-outside/style.css b/docs/74.open-popup-markercluster-from-outside/style.css
@@ -0,0 +1,47 @@
+*,
+:after,
+:before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+}
+
+body,
+html,
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  position: relative;
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #f1f1f1;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.markercluster {
+  position: absolute;
+  bottom: 20px;
+  right: 10px;
+  z-index: 999;
+  background-color: #fff;
+  padding: 10px;
+}
diff --git a/docs/menu.json b/docs/menu.json
@@ -435,5 +435,10 @@
     "link": "73.change-tile-style-when-click",
     "text": "change tile style when click",
     "position": "--pos-right: 10px, --pos-top: 10px"
+  },
+  {
+    "link": "74.open-popup-markercluster-from-outside",
+    "text": "Open popup markercluster from outside",
+    "position": "--pos-right: 10px, --pos-top: 10px"
   }
 ]