From 1b10a03cc097fbfe9f070c5bb0169f00a3ee378d Mon Sep 17 00:00:00 2001
From: ringsaturn <ringsaturn.me@gmail.com>
Date: Mon, 11 Sep 2023 11:47:19 +0800
Subject: [PATCH] Fix zoom&bounds

---
 internal/handler/template/click.html | 157 +++++++++++++++------------
 1 file changed, 87 insertions(+), 70 deletions(-)
diff --git a/internal/handler/template/click.html b/internal/handler/template/click.html
index 3089a2b..6aec1d6 100644
--- a/internal/handler/template/click.html
+++ b/internal/handler/template/click.html
@@ -1,49 +1,65 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>TZF Server Clickable Debugger</title>
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
-  <style>
-    html, body, #map {
-      height: 100%;
-      margin: 0;
-      padding: 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="map"></div>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TZF Server Clickable Debugger</title>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    />
+    <style>
+      html,
+      body,
+      #map {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
 
-  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-  <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js"></script>
-  <script>
-    var map = L.map('map').setView([40.7128, -74.0060], 5);
+    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+    <script src="https://unpkg.com/axios@1.5.0/dist/axios.min.js"></script>
+    <script>
+      var southWest = L.latLng(-90, -180);
+      var northEast = L.latLng(90, 180);
+      var bounds = L.latLngBounds(southWest, northEast);
+      var map = L.map("map", {
+        maxBounds: bounds,
+        maxBoundsViscosity: 1,
+        worldCopyJump: true,
+        maxZoom: 18,
+        minZoom: 3,
+      }).setView([40.7128, -74.006], 5);
 
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      maxZoom: 19,
-      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
-    }).addTo(map);
+      L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        maxZoom: 19,
+        attribution:
+          'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
+      }).addTo(map);
 
-    var markers = [];
-    var polygons = [];
+      var markers = [];
+      var polygons = [];
 
-    map.on('click', function(e) {
-      var lng = e.latlng.wrap().lng.toFixed(4);
-      var lat = e.latlng.wrap().lat.toFixed(4);
+      map.on("click", function (e) {
+        var lng = e.latlng.wrap().lng.toFixed(4);
+        var lat = e.latlng.wrap().lat.toFixed(4);
 
-      axios.get('/api/v1/tz', {
-        params: {
-          lng: lng,
-          lat: lat
-        }
-      })
-      .then(function(response) {
-        var timezone = response.data.timezone;
-        var abbreviation = response.data.abbreviation;
-        var offset = response.data.offset;
-        var popupContent = `
+        axios
+          .get("/api/v1/tz", {
+            params: {
+              lng: lng,
+              lat: lat,
+            },
+          })
+          .then(function (response) {
+            var timezone = response.data.timezone;
+            var abbreviation = response.data.abbreviation;
+            var offset = response.data.offset;
+            var popupContent = `
           <b>Timezone:</b> ${timezone}<br>
           <b>Abbreviation:</b> ${abbreviation}<br>
           <b>Offset:</b> ${offset}<br>
@@ -51,40 +67,41 @@
           <b>Longitude:</b> ${lng}
         `;
 
-        var marker = L.marker(e.latlng).addTo(map);
-        marker.bindPopup(popupContent).openPopup();
-        markers.push(marker);
-      })
-      .catch(function(error) {
-        console.error(error);
-      });
+            var marker = L.marker(e.latlng).addTo(map);
+            marker.bindPopup(popupContent).openPopup();
+            markers.push(marker);
+          })
+          .catch(function (error) {
+            console.error(error);
+          });
 
-      axios.get('/api/v1/tz/geojson', {
-        params: {
-          lng: lng,
-          lat: lat
-        }
-      })
-      .then(function(response) {
-        var tzid = response.data.properties.tzid;
-        if (!isPolygonAdded(tzid)) {
-          var geojson = L.geoJSON(response.data).addTo(map);
-          polygons.push({tzid: tzid, geojson: geojson});
-        }
-      })
-      .catch(function(error) {
-        console.error(error);
+        axios
+          .get("/api/v1/tz/geojson", {
+            params: {
+              lng: lng,
+              lat: lat,
+            },
+          })
+          .then(function (response) {
+            var tzid = response.data.properties.tzid;
+            if (!isPolygonAdded(tzid)) {
+              var geojson = L.geoJSON(response.data).addTo(map);
+              polygons.push({ tzid: tzid, geojson: geojson });
+            }
+          })
+          .catch(function (error) {
+            console.error(error);
+          });
       });
-    });
 
-    function isPolygonAdded(tzid) {
-      for (var i = 0; i < polygons.length; i++) {
-        if (polygons[i].tzid === tzid) {
-          return true;
+      function isPolygonAdded(tzid) {
+        for (var i = 0; i < polygons.length; i++) {
+          if (polygons[i].tzid === tzid) {
+            return true;
+          }
         }
+        return false;
       }
-      return false;
-    }
-  </script>
-</body>
+    </script>
+  </body>
 </html>
