diff --git a/css/80_app.css b/css/80_app.css index 2a1e3184f..67e038b49 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -2720,7 +2720,8 @@ img.tile-removing { padding: 10px 0; } -.panel-content-location .location-name { +.panel-content-location .imagery-info, +.panel-content-location .location-info { padding-top: 10px; } diff --git a/data/core.yaml b/data/core.yaml index 8f29823d7..0a40a0d49 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -288,6 +288,7 @@ en: key: L title: Location zoom: Zoom + imagery_capture_dates: Imagery Capture Dates unknown_location: Unknown Location unknown_imagery_age: Unknown Imagery Age measurement: diff --git a/dist/locales/en.json b/dist/locales/en.json index 78a101e60..c28197caa 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -365,6 +365,7 @@ "key": "L", "title": "Location", "zoom": "Zoom", + "imagery_capture_dates": "Imagery Capture Dates", "unknown_location": "Unknown Location", "unknown_imagery_age": "Unknown Imagery Age" }, diff --git a/modules/renderer/background_source.js b/modules/renderer/background_source.js index c8b2cff63..a5c6a8c63 100644 --- a/modules/renderer/background_source.js +++ b/modules/renderer/background_source.js @@ -165,15 +165,22 @@ rendererBackgroundSource.Bing = function(data, dispatch) { '?zl=' + zoom + '&key=' + key + '&jsonp={callback}'; jsonpRequest(url, function(result) { - var error = (!result && 'Unknown Error') || result.errorDetails; - if (error) { - return callback(error); + var err = (!result && 'Unknown Error') || result.errorDetails; + if (err) { + return callback(err); } else { return callback(null, { - start: result.resourceSets[0].resources[0].vintageStart, - end: result.resourceSets[0].resources[0].vintageEnd + start: localeDateString(result.resourceSets[0].resources[0].vintageStart), + end: localeDateString(result.resourceSets[0].resources[0].vintageEnd) }); } + + function localeDateString(s) { + if (!s) return null; + var d = new Date(s); + if (isNaN(d.getTime())) return null; + return d.toLocaleDateString(); + } }); }; diff --git a/modules/ui/panels/location.js b/modules/ui/panels/location.js index acc2bbd1b..ea5a6b1a3 100644 --- a/modules/ui/panels/location.js +++ b/modules/ui/panels/location.js @@ -5,8 +5,10 @@ import { services } from '../../services'; export function uiPanelLocation(context) { - var lastLocation = ''; - var lastImagery = ''; + var background = context.background(); + var currLocation = ''; + var currImagerySource = null; + var currImageryDates = ''; var OSM_PRECISION = 7; @@ -47,57 +49,80 @@ export function uiPanelLocation(context) { .append('li') .text(t('infobox.location.zoom') + ': ' + context.map().zoom().toFixed(2)); - // Date of Imagery - selection - .append('p') - .attr('class', 'imagery-vintage') - .text(lastImagery); - // Location Name - selection - .append('p') - .attr('class', 'location-name') - .text(lastLocation); + // Imagery Info + if (currImagerySource !== background.baseLayerSource().name()) { + currImagerySource = background.baseLayerSource().name(); + currImageryDates = ''; + } - debouncedLocation(selection, coord); + var imageryList = selection + .append('ul') + .attr('class', 'imagery-info'); + + imageryList + .append('li') + .text(currImagerySource); + + imageryList + .append('li') + .text(t('infobox.location.imagery_capture_dates') + ':'); + + imageryList + .append('li') + .attr('class', 'imagery-dates') + .text(currImageryDates || ' '); + + if (!currImageryDates) { + debouncedGetImageryDates(selection); + } + + + // Location Info + selection + .append('div') + .attr('class', 'location-info') + .text(currLocation || ' '); + + debouncedGetLocation(selection, coord); } - var debouncedLocation = _.debounce(updateLocation, 250); - function updateLocation(selection, coord) { + var debouncedGetLocation = _.debounce(getLocation, 250); + function getLocation(selection, coord) { if (!services.geocoder) { - lastLocation = t('infobox.location.unknown_location'); - selection.selectAll('.location-name') - .text(lastLocation); + currLocation = t('infobox.location.unknown_location'); + selection.selectAll('.location-info') + .text(currLocation); } else { services.geocoder.reverse(coord, function(err, result) { - lastLocation = result ? result.display_name : t('infobox.location.unknown_location'); - selection.selectAll('.location-name') - .text(lastLocation); + currLocation = result ? result.display_name : t('infobox.location.unknown_location'); + selection.selectAll('.location-info') + .text(currLocation); }); } } - var debouncedImageryVintage = _.debounce(updateImageryVintage, 250); - function updateImageryVintage(selection) { + var debouncedGetImageryDates = _.debounce(getImageryDates, 250); + function getImageryDates(selection) { var tiledata = d3.select('.layer-background img').datum(), zoom = tiledata[2] || Math.floor(context.map().zoom()), center = context.map().center(); - context.background().baseLayerSource().getVintage(center, zoom, function(err, result) { + background.baseLayerSource().getVintage(center, zoom, function(err, result) { if (!result) { - lastImagery = t('infobox.location.unknown_imagery_age'); + currImageryDates = t('infobox.location.unknown_imagery_age'); } else { if (result.start || result.end) { - lastImagery = (result.start || '?') + ' - ' + (result.end || '?'); + currImageryDates = (result.start || '?') + ' - ' + (result.end || '?'); } else { - lastImagery = t('infobox.location.unknown_imagery_age'); + currImageryDates = t('infobox.location.unknown_imagery_age'); } } - selection.selectAll('.imagery-vintage') - .text(lastImagery); + selection.selectAll('.imagery-dates') + .text(currImageryDates); }); } @@ -115,7 +140,7 @@ export function uiPanelLocation(context) { selection.call(redraw); }) .on('move.info-location', function() { - selection.call(debouncedImageryVintage); + selection.call(debouncedGetImageryDates); }); };