feat: add coordinate display to map

template/includes/head.twig

@@ -31,6 +31,7 @@
     {% if pageTitle == 'Map' %}
       <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
       <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/leaflet-mouse-position@1.2.0/src/L.Control.MousePosition.min.js"></script>
 
       <style>
         #map { height: 100vh; }
@@ -52,6 +53,17 @@
         img.leaflet-tile {
           image-rendering: pixelated;
         }
+
+        .leaflet-control-mouseposition {
+          background: rgba(255, 255, 255, 0.8);
+
+          margin: 0 !important;
+          padding: 6px;
+
+          width: calc(100% - 2 * 6px);
+
+          text-align: end;
+        }
       </style>
     {% endif %}
   

template/map.twig

@@ -51,7 +51,7 @@
   let map = L.map('map', {
     layers: [mapLayer, markers],
     crs: L.CRS.Simple,
-  }).setView([0, 0], 4);
+  }).setView([0, 0], 2);
 
   let baseMaps = {
     "Overworld": mapLayer
@@ -62,6 +62,11 @@
   };
 
   let layerControl = L.control.layers(baseMaps, overlayMaps).addTo(map);
+
+  L.control.mousePosition({
+    position: 'bottomright',
+    separator: '; '
+  }).addTo(map);
 </script>
 
 {% include 'includes/foot.twig' %}