OpenStreetBrowser
/
OpenStreetBrowser
2
0
Fork 0
Code Issues 2 Pull Requests Releases Wiki Activity
Browse Source

GeoInfo: format icons via css

master
Stephan Bösch-Plepelits 5 years ago
parent
e042370d1e
commit
3341747dfa
2 changed files with 65 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      src/GeoInfo.css
  2. 36
      src/GeoInfo.js

54
src/GeoInfo.css
View File

@ -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";
}

36
src/GeoInfo.js
View File

@ -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>'

Write Preview
Loading…
Cancel
Save