GeoInfo: format icons via css

src/GeoInfo.css

@@ -1,22 +1,58 @@
 .geo-info > div {
   display: flex;
+  position: relative;
   align-items: end;
   margin-top: 0.5em;
 }
-.geo-info > div:first-of-type,
+.geo-info > div:first-of-type {
+  margin-top: 0;
+}
 .geo-info > div.empty {
   margin-top: 0;
+  display: none;
 }
-.geo-info > div > .icon {
-  width: 15px;
-  height: 15px;
+.geo-info > div::before {
+  width: 16px;
+  height: 16px;
+  content: ' ';
   margin-right: 0.5em;
 }
-.geo-info > div > i.icon {
-  display: flex;
+
+.geo-info > .bbox-nw-corner::before {
+  background: url("../img/geo-info-bbox-nw.svg");
+}
+.geo-info > .bbox-center::before {
+  background: url("../img/geo-info-bbox-center.svg");
+}
+.geo-info > .bbox-se-corner::before {
+  background: url("../img/geo-info-bbox-se.svg");
+}
+.geo-info > .object-shape::before {
+  background: url("../img/geo-info-object-shape.svg");
+}
+.geo-info > .object-nw-corner::before {
+  background: url("../img/geo-info-object-nw.svg");
+}
+.geo-info > .object-center::before {
+  background: url("../img/geo-info-object-center.svg");
+}
+.geo-info > .object-se-corner::before {
+  background: url("../img/geo-info-object-se.svg");
+}
+.geo-info > .zoom::before,
+.geo-info > .location::before,
+.geo-info > .mouse::before {
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  font-size: 1.25em;
+  text-align: center;
+}
+.geo-info > .zoom::before {
+  content: "\f689";
 }
-.geo-info > div > i.icon::before {
-  margin: auto;
+.geo-info > .location::before {
+  content: "\f3c5";
 }
-.geo-info > div > .value {
+.geo-info > .mouse::before {
+  content: "\f245";
 }

src/GeoInfo.js

@@ -19,29 +19,33 @@ register_hook('init', function () {
   tab.header.title = lang('geoinfo:header')
 
   let domZoom = document.createElement('div')
+  domZoom.className = 'zoom'
   domZoom.title = lang('geoinfo:zoom')
   tab.content.appendChild(domZoom)
 
   let domBBoxNW = document.createElement('div')
+  domBBoxNW.className = 'bbox-nw-corner'
   domBBoxNW.title = lang('geoinfo:nw-corner')
   tab.content.appendChild(domBBoxNW)
 
   let domCenter = document.createElement('div')
+  domCenter.className = 'bbox-center'
   domCenter.title = lang('geoinfo:center')
   tab.content.appendChild(domCenter)
 
   let domBBoxSE = document.createElement('div')
+  domBBoxSE.className = 'bbox-se-corner'
   domBBoxSE.title = lang('geoinfo:se-corner')
   tab.content.appendChild(domBBoxSE)
 
   let domMouse = document.createElement('div')
+  domMouse.className = 'mouse empty'
   domMouse.title = lang('geoinfo:mouse')
-  domMouse.className = 'empty'
   tab.content.appendChild(domMouse)
 
   let domLocation = document.createElement('div')
   domLocation.title = lang('geoinfo:location')
-  domLocation.className = 'empty'
+  domLocation.className = 'location empty'
   tab.content.appendChild(domLocation)
 
   function getPrecision () {
@@ -58,12 +62,12 @@ register_hook('init', function () {
     let scale = formatUnits.distance(global.map.getMetersPerPixel())
     let precision = getPrecision()
 
-    domZoom.innerHTML = '<i class="fas fa-search-location icon"></i><span class="value">z' + Math.round(global.map.getZoom()) + ', ' + scale + '/px</span>'
+    domZoom.innerHTML = '<span class="value">z' + Math.round(global.map.getZoom()) + ', ' + scale + '/px</span>'
 
     let bounds = map.getBounds()
-    domBBoxNW.innerHTML = '<img class="icon" src="img/geo-info-bbox-nw.svg"/><span class="value">' + formatUnits.coord(bounds.getNorthWest().wrap(), { precision }) + '</span>'
-    domCenter.innerHTML = '<img class="icon" src="img/geo-info-bbox-center.svg"/><span class="value">' + formatUnits.coord(bounds.getCenter().wrap(), { precision }) + '</span>'
-    domBBoxSE.innerHTML = '<img class="icon" src="img/geo-info-bbox-se.svg"/>' + formatUnits.coord(bounds.getSouthEast().wrap(), { precision }) + '</span>'
+    domBBoxNW.innerHTML = '<span class="value">' + formatUnits.coord(bounds.getNorthWest().wrap(), { precision }) + '</span>'
+    domCenter.innerHTML = '<span class="value">' + formatUnits.coord(bounds.getCenter().wrap(), { precision }) + '</span>'
+    domBBoxSE.innerHTML = '<span class="value">' + formatUnits.coord(bounds.getSouthEast().wrap(), { precision }) + '</span>'
     updateTabHeader(tab.header)
   }
 
@@ -75,8 +79,8 @@ register_hook('init', function () {
 
     if (e) {
       let precision = getPrecision()
-      domMouse.innerHTML = '<i class="fas fa-mouse-pointer icon"></i><span class="value">' + formatUnits.coord(e.latlng.wrap(), { precision }) + '</span>'
-      domMouse.className = ''
+      domMouse.innerHTML = '<span class="value">' + formatUnits.coord(e.latlng.wrap(), { precision }) + '</span>'
+      domMouse.classList.remove('empty')
     } else {
       removeMouse()
     }
@@ -87,7 +91,7 @@ register_hook('init', function () {
   function removeMouse () {
     lastMouseEvent = null
     domMouse.innerHTML = ''
-    domMouse.className = 'empty'
+    domMouse.classList.add('empty')
   }
 
   let lastLocation
@@ -97,8 +101,8 @@ register_hook('init', function () {
     }
 
     if (e) {
-      domLocation.innerHTML = '<i class="fas fa-map-marker-alt icon"></i><span class="value">' + formatUnits.coord(e.latlng.wrap()) + '</span>'
-      domLocation.className = ''
+      domLocation.innerHTML = '<span class="value">' + formatUnits.coord(e.latlng.wrap(), { precision: 5 }) + '</span>'
+      domLocation.classList.remove('empty')
     }
   }
 
@@ -137,21 +141,21 @@ function geoInfoShowDetails (data, category, div) {
   let length = turf.length(geojson) * 1000
 
   if (area !== 0 || length !== 0) {
-    result += '<div>' +
-      '<img class="icon" src="img/geo-info-object-shape.svg"/><span class="value">' +
+    result += '<div class="object-shape">' +
+      '<span class="value">' +
       lang('geoinfo:length') + ': ' + formatUnits.distance(length) +
       (area === 0 ? '' : ', ' + lang('geoinfo:area') + ': ' + formatUnits.area(area)) +
       '</span></div>'
   }
 
   if (ob.bounds.minlat !== ob.bounds.maxlat || ob.bounds.minlon !== ob.bounds.maxlon) {
-    result += '<div title="' + lang('geoinfo:nw-corner') + '"><img class="icon" src="img/geo-info-object-nw.svg"/><span class="value">' + formatUnits.coord({ lat: ob.bounds.minlat, lng: ob.bounds.maxlon }) + '</span></div>'
+    result += '<div class="object-nw-corner" title="' + lang('geoinfo:nw-corner') + '"><span class="value">' + formatUnits.coord({ lat: ob.bounds.minlat, lng: ob.bounds.maxlon }) + '</span></div>'
   }
 
-  result += '<div title="' + lang('geoinfo:centroid') + '"><img class="icon" src="img/geo-info-object-center.svg"/><span class="value">' + formatUnits.coord({ lat: ob.center.lat, lng: ob.center.lon }) + '</span></div>'
+  result += '<div class="object-center" title="' + lang('geoinfo:centroid') + '"><span class="value">' + formatUnits.coord({ lat: ob.center.lat, lng: ob.center.lon }) + '</span></div>'
 
   if (ob.bounds.minlat !== ob.bounds.maxlat || ob.bounds.minlon !== ob.bounds.maxlon) {
-    result += '<div title="' + lang('geoinfo:se-corner') + '"><img class="icon" src="img/geo-info-object-se.svg"/><span class="value">' + formatUnits.coord({ lat: ob.bounds.maxlat, lng: ob.bounds.minlon }) + '</span></div>'
+    result += '<div class="object-se-corner" title="' + lang('geoinfo:se-corner') + '"><span class="value">' + formatUnits.coord({ lat: ob.bounds.maxlat, lng: ob.bounds.minlon }) + '</span></div>'
   }
 
   result += '</div>'