leaflet: Reimplement coordinate box on bottom left

I'd move the event setup into addTo, but JS is utter garbage and thinks
"this" in a function callback like that should be whatever, not where you
actually define it.

overviewer_core/data/js_src/overviewer.js

@@ -14,6 +14,7 @@ overviewer.map = null;
 overviewer.worldCtrl = null;
 overviewer.layerCtrl = null;
 overviewer.compass = null;
+overviewer.coord_box = null;
 overviewer.current_world = null;
 
 /// Records the current layer by name (if any) of each world

overviewer_core/data/js_src/util.js

@@ -38,6 +38,37 @@ overviewer.util = {
 
         document.getElementById('NoJSWarning').remove();
 
+        overviewer.coordBoxClass = L.Control.extend({
+            options: {
+                position: 'bottomleft',
+            },
+            initialize: function() {
+                this.coord_box = L.DomUtil.create('div', 'coordbox');
+            },
+            render: function(latlng) {
+                var currWorld = overviewer.current_world;
+                if (currWorld == null) {return;}
+
+                var currTileset = overviewer.current_layer[currWorld];
+                if (currTileset == null) {return;}
+
+                var ovconf = currTileset.tileSetConfig;
+
+                w_coords = overviewer.util.fromLatLngToWorld(latlng.lat, latlng.lng, ovconf);
+
+                var r_x = Math.floor(Math.floor(w_coords.x / 16.0) / 32.0);
+                var r_z = Math.floor(Math.floor(w_coords.z / 16.0) / 32.0);
+                var r_name = "r." + r_x + "." + r_z + ".mca";
+
+                this.coord_box.innerHTML = "<strong>X</strong> " +
+                                           Math.round(w_coords.x) +
+                                           " <strong>Z</strong> " + Math.round(w_coords.z) +
+                                           " (" + r_name + ")";
+            },
+            onAdd: function() {
+                return this.coord_box;
+            }
+        });
         overviewer.compassClass = L.Control.extend({
             initialize: function(imagedict, options) {
                 L.Util.setOptions(this, options);
@@ -193,6 +224,7 @@ overviewer.util = {
         overviewer.worldCtrl = new overviewer.control();
         overviewer.compass = new overviewer.compassClass(
             overviewerConfig.CONST.image.compass);
+        overviewer.coord_box = new overviewer.coordBoxClass();
         
 
         $.each(overviewerConfig.worlds, function(idx, world_name) {
@@ -203,6 +235,11 @@ overviewer.util = {
 
         overviewer.compass.addTo(overviewer.map);
         overviewer.worldCtrl.addTo(overviewer.map);
+        overviewer.coord_box.addTo(overviewer.map);
+
+        overviewer.map.on('mousemove', function(ev) {
+            overviewer.coord_box.render(ev.latlng);
+        });
 
         $.each(overviewerConfig.tilesets, function(idx, obj) {
             var myLayer = new L.tileLayer('', {

overviewer_core/data/web_assets/index.html

@@ -8,8 +8,6 @@
 <meta name="generator" content="Minecraft-Overviewer {version}" />
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 
-<link rel="stylesheet" href="overviewer.css" type="text/css" />
-
 <script type="text/javascript" src="jquery.min.js"></script>
 
 <script type="text/javascript" src="overviewerConfig.js"></script>
@@ -18,6 +16,7 @@
 
 <link rel="stylesheet" href="leaflet.css" />
 <script src="leaflet.js"></script>
+<link rel="stylesheet" href="overviewer.css" type="text/css" />
 
 </head>
 

overviewer_core/data/web_assets/overviewer.css

@@ -164,3 +164,12 @@ div.worldcontrol select {
     color: #333;
     font-size: 1.2em;
 }
+
+.leaflet-container .coordbox {
+    box-shadow: none;
+    font-size: 11px;
+    background: rgba(255, 255, 255, 0.7);
+    margin: 0;
+    padding: 0 5px;
+    color: #333;
+}