diff --git a/README.md b/README.md index f0dc42c..1ad5a60 100644 --- 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 new file mode 100644 index 0000000..ed07969 --- /dev/null +++ b/docs/74.open-popup-markercluster-from-outside/index.html @@ -0,0 +1,32 @@ + + + + + + Marker grouping width markercluster plugin + + + + + + + + + + + + +
+
+ + + diff --git a/docs/74.open-popup-markercluster-from-outside/script.js b/docs/74.open-popup-markercluster-from-outside/script.js new file mode 100644 index 0000000..4a4cefd --- /dev/null +++ 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: + '© OpenStreetMap 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 = `${title}`; + 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 new file mode 100644 index 0000000..5eb5acd --- /dev/null +++ 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 index ae06ef7..2b50df8 100644 --- 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 index 20b3b61..9ed809b 100644 --- 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 index b1ebee1..7e24af9 100644 --- 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/fs.scandir@2.1.5": 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"