Merge pull request #87 from deolekar/master

Sidebar dynamically changes on change in map bound
tomickigrzegorz · Feb 20, 2024 · d7258a3 · d7258a3
2 parents 5132459 + 16a9f2f
commit d7258a3
Show file tree

Hide file tree

Showing 6 changed files with 198 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .vscode
 tests/
-node_modules
+node_modules
+.DS_Store
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:.
 
+75 [dynamic-data-on-sidebar](https://tomickigrzegorz.github.io/leaflet-examples/#75.dynamic-data-on-sidebar)  
 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)  

diff --git a/docs/75.dynamic-data-on-sidebar/index.html b/docs/75.dynamic-data-on-sidebar/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>dynamic data on sidebar</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/[email protected]/dist/leaflet.css"
+    />
+    <link rel="stylesheet" href="style.css" />
+    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+  </head>
+
+  <body>
+    <div class="flex mapid">
+      <div id="map"></div>
+      <div id="sidebar"></div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/docs/75.dynamic-data-on-sidebar/script.js b/docs/75.dynamic-data-on-sidebar/script.js
@@ -0,0 +1,89 @@
+/* eslint-disable no-undef */
+/**
+ * data on sidebar
+ */
+
+// config map
+let config = {
+  minZoom: 7,
+  maxZoom: 18,
+};
+// magnification with which the map will start
+const zoom = 11;
+// co-ordinates
+const lat = 22.72299;
+const lng = 75.864716;
+
+// 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);
+
+// --------------------------------------------------
+
+const sidebar = document.getElementById("sidebar");
+
+function createSidebarElements(layer) {
+  const el = `<div class="sidebar-el" data-marker="${layer._leaflet_id}">${layer
+    .getLatLng()
+    .toString()}</div>`;
+
+  const temp = document.createElement("div");
+  temp.innerHTML = el.trim();
+  const htmlEl = temp.firstChild;
+
+  L.DomEvent.on(htmlEl, "click", zoomToMarker);
+  sidebar.insertAdjacentElement("beforeend", htmlEl);
+}
+
+function zoomToMarker(e) {
+  const clickedEl = e.target;
+  const markerId = clickedEl.getAttribute("data-marker");
+  const marker = fg.getLayer(markerId);
+  const getLatLong = marker.getLatLng();
+
+  marker.bindPopup(getLatLong.toString()).openPopup();
+}
+
+// coordinate array points
+const points = [
+  [23.45610, 75.42270],
+  [22.72299, 75.864716],
+  [22.962187, 76.05011],
+  [23.187076, 75.769958],
+  [22.243344, 76.133881],
+];
+
+const fg = L.featureGroup().addTo(map);
+
+points.forEach((point) => {
+  const marker = L.marker(point).addTo(fg);
+  const getLatLong = marker.getLatLng();
+  marker.bindPopup(getLatLong.toString());
+
+});
+
+listMarkers();
+
+//Create Elements for markers in bound
+function listMarkers() {
+  map.eachLayer(function (layer) {
+    if (layer instanceof L.Marker) {
+      if (map.getBounds().contains(layer.getLatLng()) == true) {
+        createSidebarElements(layer);
+      }
+    }
+  });
+}
+
+//Event fired when user stopped dragging the map
+map.on('moveend', function (e) {
+  sidebar.innerHTML = '';
+  listMarkers();
+});
+
diff --git a/docs/75.dynamic-data-on-sidebar/style.css b/docs/75.dynamic-data-on-sidebar/style.css
@@ -0,0 +1,79 @@
+*,
+:after,
+:before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+}
+
+body,
+html,
+#map {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  min-height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #f1f1f1;
+}
+
+.mapid {
+  min-height: 100%;
+}
+
+.flex {
+  display: flex;
+  flex-direction:row;
+}
+
+.mapid #map {
+  width: calc(100% - 20%);
+}
+
+#sidebar {
+  width: 20%;
+  background: #fff;
+}
+
+.sidebar-el {
+  padding: 5px 10px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.sidebar-el:hover {
+  background: #f1f1f1;
+}
+
+/* Small Screen*/
+@media (max-width: 450px) {
+  .flex {
+    display: flex;
+    flex-direction:column;
+  }
+
+  .mapid #map {
+    height: calc(100% - 20%);
+    width: auto;
+  }
+
+  #sidebar {
+    height: 20%;
+    width: auto;
+    overflow-y: scroll;
+    background: #fff;
+  }
+}
diff --git a/docs/menu.json b/docs/menu.json
@@ -440,5 +440,10 @@
     "link": "74.open-popup-markercluster-from-outside",
     "text": "Open popup markercluster from outside",
     "position": "--pos-right: 10px, --pos-top: 10px"
+  },
+  {
+    "link": "75.dynamic-data-on-sidebar",
+    "text": "Dynamic data on sidebar",
+    "position": "--pos-right: 10px, --pos-top: 10px"
   }
 ]