Merge pull request #81 from tomickigrzegorz:new-examples

New examples, refactoring
tomickigrzegorz · Dec 9, 2023 · 2fef17b · 2fef17b
2 parents eab0760 + 6cc119d
commit 2fef17b
Show file tree

Hide file tree

Showing 11 changed files with 244 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,8 @@ Here is a working live demo : https://tomickigrzegorz.github.io/leaflet-examples
 
 > Work in progress :smiley: Suggestions welcome :bulb:.
 
+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)  
 70 [polygon-with-gradien](https://tomickigrzegorz.github.io/leaflet-examples/#70.polygon-with-gradien)  
 69 [simple-jump-marker](https://tomickigrzegorz.github.io/leaflet-examples/#69.simple-jump-marker)  

diff --git a/docs/72.add-rectangle-over-click-tiles/index.html b/docs/72.add-rectangle-over-click-tiles/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Add rectangle over click tiles</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="style.css" />
+  </head>
+
+  <body>
+    <div id="map"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/docs/72.add-rectangle-over-click-tiles/script.js b/docs/72.add-rectangle-over-click-tiles/script.js
@@ -0,0 +1,74 @@
+/* eslint-disable no-undef */
+/**
+ * add rectangle over click tiles
+ */
+
+// config map
+let config = {
+  minZoom: 7,
+  maxZoom: 18,
+};
+// magnification with which the map will start
+const zoom = 18;
+// co-ordinates
+const lat = 52.22977;
+const lng = 21.01178;
+
+// 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);
+
+// ----------------------------------------------
+// convert lat lng and zoom on rectangle when click on map
+
+map.on("click", (e) => {
+  const { lat, lng } = e.latlng;
+  const zoom = map.getZoom();
+
+  const { x, y } = getTileNumber(lat, lng, zoom);
+
+  const rectangle = L.rectangle(
+    [
+      [tile2lat(y, zoom), tile2lon(x, zoom)],
+      [tile2lat(parseInt(y) + 1, zoom), tile2lon(parseInt(x) + 1, zoom)],
+    ],
+    {
+      color: "#ff7800",
+      weight: 1,
+    }
+  ).addTo(map);
+});
+
+// convert lat lng to tile lon
+function tile2lon(x, z) {
+  return (x / Math.pow(2, z)) * 360 - 180;
+}
+
+// convert lat lng to tile lat
+function tile2lat(y, z) {
+  const n = Math.PI - (2 * Math.PI * y) / Math.pow(2, z);
+  return (180 / Math.PI) * Math.atan(0.5 * (Math.exp(n) - Math.exp(-n)));
+}
+
+// generate tile lat, lng
+function getTileNumber(lat, lng, zoom) {
+  const xtile = parseInt(Math.floor(((lng + 180) / 360) * (1 << zoom)));
+  const ytile = parseInt(
+    Math.floor(
+      ((1 -
+        Math.log(
+          Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
+        ) /
+          Math.PI) /
+        2) *
+        (1 << zoom)
+    )
+  );
+  return { x: xtile, y: ytile };
+}
diff --git a/docs/72.add-rectangle-over-click-tiles/style.css b/docs/72.add-rectangle-over-click-tiles/style.css
@@ -0,0 +1,26 @@
+*,
+: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;
+}
diff --git a/docs/73.change-tile-style-when-click/index.html b/docs/73.change-tile-style-when-click/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>change tile style when click</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="style.css" />
+  </head>
+
+  <body>
+    <div id="map"></div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/docs/73.change-tile-style-when-click/script.js b/docs/73.change-tile-style-when-click/script.js
@@ -0,0 +1,62 @@
+/* eslint-disable no-undef */
+/**
+ * change tile style when click
+ */
+
+// config map
+let config = {
+  minZoom: 7,
+  maxZoom: 18,
+};
+// magnification with which the map will start
+const zoom = 18;
+// co-ordinates
+const lat = 52.22977;
+const lng = 21.01178;
+
+// 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);
+
+// ------------------------------------------------------
+// click on map
+
+map.on("click", (e) => {
+  const { lat, lng } = e.latlng;
+
+  // find image with specific src
+  const img = document.querySelector(
+    `img[src="https://tile.openstreetmap.org/${getTileNumber(lat, lng)}.png"]`
+  );
+
+  img.style.filter = "grayscale(100%)";
+  img.style.border = "1px solid #000";
+  img.style.borderRadius = "10px";
+  img.style.padding = "5px";
+  img.style.backgroundColor = "white";
+});
+
+// convert lat, lng to tile number
+function getTileNumber(lat, lng) {
+  const currentZoom = map.getZoom();
+
+  const xtile = parseInt(Math.floor(((lng + 180) / 360) * (1 << currentZoom)));
+  const ytile = parseInt(
+    Math.floor(
+      ((1 -
+        Math.log(
+          Math.tan((lat * Math.PI) / 180) + 1 / Math.cos((lat * Math.PI) / 180)
+        ) /
+          Math.PI) /
+        2) *
+        (1 << currentZoom)
+    )
+  );
+  return `${currentZoom}/${xtile}/${ytile}`;
+}
diff --git a/docs/73.change-tile-style-when-click/style.css b/docs/73.change-tile-style-when-click/style.css
@@ -0,0 +1,26 @@
+*,
+: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;
+}
diff --git a/docs/menu.json b/docs/menu.json
@@ -425,5 +425,15 @@
     "info": "Example based on: <a href='https://stackoverflow.com/questions/59419337/how-to-add-text-below-a-marker-in-leaflet' target='_blank'>How to add text below a marker in leaflet?</a>, of course, also take a look at the styles",
     "position": "--pos-right: 10px, --pos-top: 10px",
     "style": true
+  },
+  {
+    "link": "72.add-rectangle-over-click-tiles",
+    "text": "add rectangle over click tiles",
+    "position": "--pos-right: 10px, --pos-top: 10px"
+  },
+  {
+    "link": "73.change-tile-style-when-click",
+    "text": "change tile style when click",
+    "position": "--pos-right: 10px, --pos-top: 10px"
   }
 ]
diff --git a/docs/static/examples.css b/docs/static/examples.css
@@ -206,10 +206,10 @@ a.active-menu {
   }
 
   main {
-    padding: 20px;
+    padding: 10px;
   }
   header {
-    padding: 20px;
+    padding: 10px;
   }
 }
 

diff --git a/docs/static/github-corner.js b/docs/static/github-corner.js
@@ -1,6 +1,6 @@
 const githubConrner = `
 <a href="https://github.com/tomickigrzegorz/leaflet-examples" class="github-corner" aria-label="View source on GitHub"><svg
-  width="80" height="80" viewBox="0 0 250 250"
+  width="50" height="50" viewBox="0 0 250 250"
   style="fill:#333333; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
   <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
   <path

diff --git a/docs/static/script.js b/docs/static/script.js
@@ -139,9 +139,9 @@ document.addEventListener("DOMContentLoaded", () => {
         <a type="button" href="${detectUrl(
           filejs
         )}" target="_blank">open JS file</a> 
-        <a type="button" href="#" class="full-screen">full screen example</a>
         <a type="button" href="#" class="show-code-js">show JS code</a>
         <a type="button" href="#" class="show-code-css ${setHidden}">show CSS code</a>
+        <a type="button" href="#" class="full-screen">full screen example</a>
       </div>${dataInfoTeamplte}`;
 
     flex.innerHTML = template;
@@ -209,6 +209,7 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   document.addEventListener("click", (e) => {
+    e.stopPropagation();
     const target = e.target;
     if (target.classList.contains("show-code-js")) {
       target.classList.toggle("show-code");
@@ -219,7 +220,7 @@ document.addEventListener("DOMContentLoaded", () => {
       jsElement.classList.toggle("hidden");
 
       const cssElement = document.querySelector(`#code-place-css`);
-      cssElement.classList.add("hidden");
+      cssElement?.classList.add("hidden");
     }
 
     if (target.classList.contains("show-code-css")) {