GeoInfo: show bbox and center for map objects

lang/en.json

@@ -25,6 +25,7 @@
     "geoinfo:mouse": "Mouse position",
     "geoinfo:location": "Current location",
     "geoinfo:zoom": "Zoom level",
+    "geoinfo:header": "Geometry",
     "header:attributes": "Attributes",
     "header:export": "Export",
     "header:osm_meta": "OSM Meta",

src/GeoInfo.js

@@ -14,7 +14,7 @@ register_hook('init', function () {
   global.tabs.add(tab)
 
   updateTabHeader(tab.header)
-  tab.header.title = lang('geo-info')
+  tab.header.title = lang('geoinfo:header')
 
   let domZoom = document.createElement('div')
   tab.content.appendChild(domZoom)
@@ -62,6 +62,29 @@ register_hook('init', function () {
   })
 })
 
+register_hook('show-details', (data, category, dom, callback) => {
+  let div = document.createElement('div')
+  dom.appendChild(div)
+
+  let ob = data.object
+  let result = '<div class="geo-info"><h3>' + lang('geoinfo:header') + '</h3>'
+
+  if (ob.bounds.minlat !== ob.bounds.maxlat || ob.bounds.minlon !== ob.bounds.maxlon) {
+    result += '<div title="' + lang('geoinfo:nw-corner') + '"><span class="icon">▛</span>' + formatCoord({ lat: ob.bounds.minlat, lng: ob.bounds.maxlon }) + '</div>'
+  }
+
+  result += '<div title="' + lang('geoinfo:center') + '"><i class="fas fa-crosshairs icon"></i>' + formatCoord({ lat: ob.center.lat, lng: ob.center.lon }) + '</div>'
+
+  if (ob.bounds.minlat !== ob.bounds.maxlat || ob.bounds.minlon !== ob.bounds.maxlon) {
+    result += '<div title="' + lang('geoinfo:se-corner') + '"><span class="icon">▟</span>' + formatCoord({ lat: ob.bounds.maxlat, lng: ob.bounds.minlon }) + '</div>'
+  }
+
+  result += '</div>'
+  div.innerHTML = result
+
+  callback()
+})
+
 function updateTabHeader (header) {
   if (!global.map._loaded) {
     return