Merge pull request #82 from tomickigrzegorz:open-popup-markercluster-…

…from-outside Open popup markercluster from outside
tomickigrzegorz · Dec 18, 2023 · 87e5264 · 87e5264
2 parents 2fef17b + 664bfa4
commit 87e5264
Show file tree

Hide file tree

Showing 7 changed files with 208 additions and 29 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"
   }
 ]
diff --git a/package.json b/package.json
@@ -16,6 +16,6 @@
     "eslint": "^8.50.0",
     "http-server": "^14.1.1",
     "leaflet": "^1.9.4",
-    "prettier": "^3.0.3"
+    "prettier": "^3.1.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -19,10 +19,10 @@
   resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.8.1.tgz#8c4bb756cc2aa7eaf13cfa5e69c83afb3260c20c"
   integrity sha512-PWiOzLIUAjN/w5K17PoF4n6sKBw0gqLHPhywmYHP4t1VFQQVYeb1yWsJwnMVEMl3tUHME7X/SJPZLmtG7XBDxQ==
 
-"@eslint/eslintrc@^2.1.2":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.2.tgz#c6936b4b328c64496692f76944e755738be62396"
-  integrity sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -34,17 +34,17 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@eslint/js@8.50.0":
-  version "8.50.0"
-  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.50.0.tgz#9e93b850f0f3fa35f5fa59adfd03adae8488e484"
-  integrity sha512-NCC3zz2+nvYd+Ckfh87rA47zfu2QsQpvc6k1yzTk+b9KzRj0wkGa8LSoGOXN6Zv4lRf/EIoZ80biDh9HOI+RNQ==
+"@eslint/js@8.56.0":
+  version "8.56.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
+  integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
 
-"@humanwhocodes/config-array@^0.11.11":
-  version "0.11.11"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
-  integrity sha512-N2brEuAadi0CcdeMXUkhbZB84eskAc8MEX1By6qEchoVywSgXPIjou4rYsl0V3Hj0ZnuGycGCjdNgockbzeWNA==
+"@humanwhocodes/config-array@^0.11.13":
+  version "0.11.13"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
+  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.1"
+    "@humanwhocodes/object-schema" "^2.0.1"
     debug "^4.1.1"
     minimatch "^3.0.5"
 
@@ -53,10 +53,10 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
-"@humanwhocodes/object-schema@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/object-schema@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
+  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
 "@nodelib/[email protected]":
   version "2.1.5"
@@ -79,6 +79,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
+
 acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
@@ -244,18 +249,19 @@ eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.27.0:
-  version "8.50.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.50.0.tgz#2ae6015fee0240fcd3f83e1e25df0287f487d6b2"
-  integrity sha512-FOnOGSuFuFLv/Sa+FDVRZl4GGVAAFFi8LecRsI5a1tMO5HIE8nCm4ivAlzt4dT3ol/PaaGC0rJEEXQmHJBGoOg==
+eslint@^8.50.0:
+  version "8.56.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.56.0.tgz#4957ce8da409dc0809f99ab07a1b94832ab74b15"
+  integrity sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@eslint-community/regexpp" "^4.6.1"
-    "@eslint/eslintrc" "^2.1.2"
-    "@eslint/js" "8.50.0"
-    "@humanwhocodes/config-array" "^0.11.11"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.56.0"
+    "@humanwhocodes/config-array" "^0.11.13"
     "@humanwhocodes/module-importer" "^1.0.1"
     "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
     ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
@@ -717,10 +723,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.7.1:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
-  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+prettier@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
+  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
 
 punycode@^2.1.0:
   version "2.1.1"