diff --git a/img/geo-info-bbox-center.svg b/img/geo-info-bbox-center.svg
new file mode 100644
index 00000000..5a2efd42
--- /dev/null
+++ b/img/geo-info-bbox-center.svg
@@ -0,0 +1,99 @@
+
+
+
+
diff --git a/img/geo-info-bbox-none.svg b/img/geo-info-bbox-none.svg
new file mode 100644
index 00000000..d649e5be
--- /dev/null
+++ b/img/geo-info-bbox-none.svg
@@ -0,0 +1,99 @@
+
+
+
+
diff --git a/img/geo-info-bbox-nw.svg b/img/geo-info-bbox-nw.svg
new file mode 100644
index 00000000..be1d8ba3
--- /dev/null
+++ b/img/geo-info-bbox-nw.svg
@@ -0,0 +1,99 @@
+
+
+
+
diff --git a/img/geo-info-bbox-se.svg b/img/geo-info-bbox-se.svg
new file mode 100644
index 00000000..b5278e91
--- /dev/null
+++ b/img/geo-info-bbox-se.svg
@@ -0,0 +1,99 @@
+
+
+
+
diff --git a/img/geo-info-object-center.svg b/img/geo-info-object-center.svg
new file mode 100644
index 00000000..b220fbdd
--- /dev/null
+++ b/img/geo-info-object-center.svg
@@ -0,0 +1,104 @@
+
+
+
+
diff --git a/img/geo-info-object-none.svg b/img/geo-info-object-none.svg
new file mode 100644
index 00000000..a124cd54
--- /dev/null
+++ b/img/geo-info-object-none.svg
@@ -0,0 +1,104 @@
+
+
+
+
diff --git a/img/geo-info-object-nw.svg b/img/geo-info-object-nw.svg
new file mode 100644
index 00000000..e351505a
--- /dev/null
+++ b/img/geo-info-object-nw.svg
@@ -0,0 +1,104 @@
+
+
+
+
diff --git a/img/geo-info-object-se.svg b/img/geo-info-object-se.svg
new file mode 100644
index 00000000..f04865e5
--- /dev/null
+++ b/img/geo-info-object-se.svg
@@ -0,0 +1,104 @@
+
+
+
+
diff --git a/img/geo-info-object-shape.svg b/img/geo-info-object-shape.svg
new file mode 100644
index 00000000..9423fdc2
--- /dev/null
+++ b/img/geo-info-object-shape.svg
@@ -0,0 +1,109 @@
+
+
+
+
diff --git a/src/GeoInfo.css b/src/GeoInfo.css
index 519f88b7..9d0b66cc 100644
--- a/src/GeoInfo.css
+++ b/src/GeoInfo.css
@@ -1,6 +1,22 @@
-.geo-info .icon {
- text-align: center;
- width: 1em;
+.geo-info > div {
+ display: flex;
+ align-items: end;
+ margin-top: 0.5em;
+}
+.geo-info > div:first-of-type,
+.geo-info > div.empty {
+ margin-top: 0;
+}
+.geo-info > div > .icon {
+ width: 15px;
+ height: 15px;
margin-right: 0.5em;
- display: inline-block;
+}
+.geo-info > div > i.icon {
+ display: flex;
+}
+.geo-info > div > i.icon::before {
+ margin: auto;
+}
+.geo-info > div > .value {
}
diff --git a/src/GeoInfo.js b/src/GeoInfo.js
index 9b1c4ace..5d5f1fde 100644
--- a/src/GeoInfo.js
+++ b/src/GeoInfo.js
@@ -19,32 +19,40 @@ register_hook('init', function () {
tab.header.title = lang('geoinfo:header')
let domZoom = document.createElement('div')
+ domZoom.title = lang('geoinfo:zoom')
tab.content.appendChild(domZoom)
let domBBoxNW = document.createElement('div')
+ domBBoxNW.title = lang('geoinfo:nw-corner')
tab.content.appendChild(domBBoxNW)
let domCenter = document.createElement('div')
+ domCenter.title = lang('geoinfo:center')
tab.content.appendChild(domCenter)
let domBBoxSE = document.createElement('div')
+ domBBoxSE.title = lang('geoinfo:se-corner')
tab.content.appendChild(domBBoxSE)
let domMouse = document.createElement('div')
+ 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'
tab.content.appendChild(domLocation)
function updateMapView () {
let scale = formatUnits.distance(global.map.getMetersPerPixel())
- domZoom.innerHTML = 'z' + Math.round(global.map.getZoom()) + ', ' + scale + '/px'
+ domZoom.innerHTML = 'z' + Math.round(global.map.getZoom()) + ', ' + scale + '/px'
let bounds = map.getBounds()
- domBBoxNW.innerHTML = '▛' + formatUnits.coord(bounds.getNorthWest().wrap()) + ''
- domCenter.innerHTML = '' + formatUnits.coord(bounds.getCenter().wrap()) + ''
- domBBoxSE.innerHTML = '▟' + formatUnits.coord(bounds.getSouthEast().wrap()) + ''
+ domBBoxNW.innerHTML = '
' + formatUnits.coord(bounds.getNorthWest().wrap()) + ''
+ domCenter.innerHTML = '
' + formatUnits.coord(bounds.getCenter().wrap()) + ''
+ domBBoxSE.innerHTML = '
' + formatUnits.coord(bounds.getSouthEast().wrap()) + ''
updateTabHeader(tab.header)
}
@@ -55,7 +63,8 @@ register_hook('init', function () {
}
if (e) {
- domMouse.innerHTML = '' + formatUnits.coord(e.latlng.wrap()) + ''
+ domMouse.innerHTML = '' + formatUnits.coord(e.latlng.wrap()) + ''
+ domMouse.className = ''
} else {
removeMouse()
}
@@ -66,6 +75,7 @@ register_hook('init', function () {
function removeMouse () {
lastMouseEvent = null
domMouse.innerHTML = ''
+ domMouse.className = 'empty'
}
let lastLocation
@@ -75,7 +85,8 @@ register_hook('init', function () {
}
if (e) {
- domLocation.innerHTML = ' ' + formatUnits.coord(e.latlng.wrap()) + ''
+ domLocation.innerHTML = '' + formatUnits.coord(e.latlng.wrap()) + ''
+ domLocation.className = ''
}
}
@@ -114,20 +125,21 @@ function geoInfoShowDetails (data, category, div) {
let length = turf.length(geojson) * 1000
if (area !== 0 || length !== 0) {
- result += '' +
+ result += '
' +
+ '
' +
lang('geoinfo:length') + ': ' + formatUnits.distance(length) +
(area === 0 ? '' : ', ' + lang('geoinfo:area') + ': ' + formatUnits.area(area)) +
- ''
+ '
▛' + formatUnits.coord({ lat: ob.bounds.minlat, lng: ob.bounds.maxlon }) + '
'
+ result += '
' + formatUnits.coord({ lat: ob.bounds.minlat, lng: ob.bounds.maxlon }) + '' + formatUnits.coord({ lat: ob.center.lat, lng: ob.center.lon }) + '
'
+ result += '
' + formatUnits.coord({ lat: ob.center.lat, lng: ob.center.lon }) + '▟' + formatUnits.coord({ lat: ob.bounds.maxlat, lng: ob.bounds.minlon }) + '
'
+ result += '
' + formatUnits.coord({ lat: ob.bounds.maxlat, lng: ob.bounds.minlon }) + '