Add mouse coord

ringsaturn · Sep 11, 2023 · 4e2b40c · 4e2b40c
1 parent fb17341
commit 4e2b40c
Showing 1 changed file with 20 additions and 0 deletions.
diff --git a/internal/handler/template/click.html b/internal/handler/template/click.html
@@ -20,6 +20,17 @@
   </head>
   <body>
     <div id="map"></div>
+    <span
+      id="mousecoord"
+      style="
+        display: block;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 9999;
+        background-color: white;
+      "
+    ></span>
 
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
@@ -33,6 +44,7 @@
         worldCopyJump: true,
         maxZoom: 18,
         minZoom: 3,
+        cursor: true,
       }).setView([40.7128, -74.006], 5);
 
       L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
@@ -44,6 +56,14 @@
       var markers = [];
       var polygons = [];
 
+      map.on("mousemove", function (e) {
+        var lng = e.latlng.wrap().lng.toFixed(4);
+        var lat = e.latlng.wrap().lat.toFixed(4);
+        document.getElementById(
+          "mousecoord"
+        ).innerHTML = `Lat: ${lat} Lng: ${lng}`;
+      });
+
       map.on("click", function (e) {
         var lng = e.latlng.wrap().lng.toFixed(4);
         var lat = e.latlng.wrap().lat.toFixed(4);