From dc4ada33b5e6b2fe2ffc66577ce280252426440a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stephan=20B=C3=B6sch-Plepelits?= <skunk@xover.mud.at>
Date: Sun, 2 Feb 2020 14:44:49 +0100
Subject: [PATCH] GeoInfo: tooltip, styling

---
 lang/en.json    |  5 +++++
 src/GeoInfo.css |  6 ++++++
 src/GeoInfo.js  | 11 ++++++-----
 3 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 src/GeoInfo.css

diff --git a/lang/en.json b/lang/en.json
index 6fec9ec6..e6424747 100644
--- a/lang/en.json
+++ b/lang/en.json
@@ -19,6 +19,11 @@
     "filter:title": "Title",
     "filter:type": "Type",
     "form_element:please_select": "-- please select --",
+    "geoinfo:nw-corner": "Northwestern corner",
+    "geoinfo:center": "Center",
+    "geoinfo:se-corner": "Southeastern corner",
+    "geoinfo:mouse": "Mouse position",
+    "geoinfo:location": "Current location",
     "header:attributes": "Attributes",
     "header:export": "Export",
     "header:osm_meta": "OSM Meta",
diff --git a/src/GeoInfo.css b/src/GeoInfo.css
new file mode 100644
index 00000000..519f88b7
--- /dev/null
+++ b/src/GeoInfo.css
@@ -0,0 +1,6 @@
+.geo-info .icon {
+  text-align: center;
+  width: 1em;
+  margin-right: 0.5em;
+  display: inline-block;
+}
diff --git a/src/GeoInfo.js b/src/GeoInfo.js
index 0420c223..5abd0734 100644
--- a/src/GeoInfo.js
+++ b/src/GeoInfo.js
@@ -1,4 +1,5 @@
 const tabs = require('modulekit-tabs')
+require('./GeoInfo.css')
 
 function formatCoord (coord) {
   return coord.lat.toFixed(5) + ' ' + coord.lng.toFixed(5)
@@ -32,14 +33,14 @@ register_hook('init', function () {
 
   global.map.on('move', () => {
     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())
+    domBBoxNW.innerHTML = '<span title="' + lang('geoinfo:nw-corner') + '"><span class="icon">▛</span>' + formatCoord(bounds.getNorthWest().wrap()) + '</span>'
+    domCenter.innerHTML = '<span title="' + lang('geoinfo:center') + '"><i class="fas fa-crosshairs icon"></i>' + formatCoord(bounds.getCenter().wrap()) + '</span>'
+    domBBoxSE.innerHTML = '<span title="' + lang('geoinfo:se-corner') + '"><span class="icon">▟</span>' + formatCoord(bounds.getSouthEast().wrap()) + '</span>'
     updateTabHeader(tab.header)
   })
 
   global.map.on('mousemove', (e) => {
-    domMouse.innerHTML = '<i class="fas fa-mouse-pointer"></i> ' + formatCoord(e.latlng.wrap())
+    domMouse.innerHTML = '<span title="' + lang('geoinfo:mouse') + '"><i class="fas fa-mouse-pointer icon"></i>' + formatCoord(e.latlng.wrap()) + '</span>'
   })
 
   global.map.on('mouseout', (e) => {
@@ -47,7 +48,7 @@ register_hook('init', function () {
   })
 
   global.map.on('locationfound', (e) => {
-    domLocation.innerHTML = '<i class="fas fa-map-marker-alt"></i> ' + formatCoord(e.latlng.wrap())
+    domLocation.innerHTML = '<span title="' + lang('geoinfo:location') + '"><i class="fas fa-map-marker-alt"></i> ' + formatCoord(e.latlng.wrap()) + '</span>'
   })
 })