diff --git a/css/80_app.css b/css/80_app.css index 727f5ba44f..68bdd3b6fa 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2707,6 +2707,10 @@ img.tile-removing { position: relative; } +.panel-content-location .location-name { + padding-top: 10px; +} + .panel-content-measurement .button { position: absolute; background: #7092ff; diff --git a/data/core.yaml b/data/core.yaml index c5219023c2..2a044289f4 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -277,7 +277,6 @@ en: location: key: L title: Location - pointer: Pointer measurement: key: M title: Measurement diff --git a/dist/locales/en.json b/dist/locales/en.json index e3140f0f8a..d6f11033f5 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -352,8 +352,7 @@ "key": "I", "location": { "key": "L", - "title": "Location", - "pointer": "Pointer" + "title": "Location" }, "measurement": { "key": "M", diff --git a/modules/ui/info/location.js b/modules/ui/info/location.js index 1de1ef6b9a..056e8ec6ff 100644 --- a/modules/ui/info/location.js +++ b/modules/ui/info/location.js @@ -1,15 +1,21 @@ import * as d3 from 'd3'; +import _ from 'lodash'; import { t } from '../../util/locale'; +import { services } from '../../services'; export function uiPanelLocation(context) { + var lastLocation = ''; + var debouncedUpdate = _.debounce(updateLocation, 250); var OSM_PRECISION = 7; + function wrap(x, min, max) { var d = max - min; return ((x - min) % d + d) % d + min; } + function clamp(x, min, max) { return Math.max(min, Math.min(x, max)); } @@ -25,13 +31,39 @@ export function uiPanelLocation(context) { // Mouse coordinates var coord = context.map().mouseCoordinates(); + if (coord.some(isNaN)) { + coord = context.map().center(); + } + var coordStr = clamp(coord[1], -90, 90).toFixed(OSM_PRECISION) + ', ' + wrap(coord[0], -180, 180).toFixed(OSM_PRECISION); list .append('li') - .text(t('infobox.location.pointer') + ': ' + coordStr); + .text(coordStr); + + // Location Name + if (services.geocoder) { + selection + .append('p') + .attr('class', 'location-name') + .text(lastLocation); + + debouncedUpdate(selection, coord); + } + } + + + function updateLocation(selection, coord) { + if (!services.geocoder) return; + services.geocoder.reverse(coord, function(err, result) { + if (result) { + lastLocation = result.display_name; + selection.selectAll('.location-name') + .text(lastLocation); + } + }); }