GeoInfo: coordinates of NW/SE corner, hide mouse when out

src/GeoInfo.js

@@ -15,9 +15,15 @@ register_hook('init', function () {
   updateTabHeader(tab.header)
   tab.header.title = lang('geo-info')
 
+  let domBBoxNW = document.createElement('div')
+  tab.content.appendChild(domBBoxNW)
+
   let domCenter = document.createElement('div')
   tab.content.appendChild(domCenter)
 
+  let domBBoxSE = document.createElement('div')
+  tab.content.appendChild(domBBoxSE)
+
   let domMouse = document.createElement('div')
   tab.content.appendChild(domMouse)
 
@@ -25,7 +31,10 @@ register_hook('init', function () {
   tab.content.appendChild(domLocation)
 
   global.map.on('move', () => {
-    domCenter.innerHTML = '<i class="fas fa-crosshairs"></i> ' + formatCoord(map.getCenter().wrap())
+    let bounds = map.getBounds()
+    domBBoxNW.innerHTML = '▛ ' + formatCoord(bounds.getNorthWest().wrap())
+    domCenter.innerHTML = '<i class="fas fa-crosshairs"></i> ' + formatCoord(bounds.getCenter().wrap())
+    domBBoxSE.innerHTML = '▟ ' + formatCoord(bounds.getSouthEast().wrap())
     updateTabHeader(tab.header)
   })
 
@@ -33,6 +42,10 @@ register_hook('init', function () {
     domMouse.innerHTML = '<i class="fas fa-mouse-pointer"></i> ' + formatCoord(e.latlng.wrap())
   })
 
+  global.map.on('mouseout', (e) => {
+    domMouse.innerHTML = ''
+  })
+
   global.map.on('locationfound', (e) => {
     domLocation.innerHTML = '<i class="fas fa-map-marker-alt"></i> ' + formatCoord(e.latlng.wrap())
   })