From c669bc72cd1cb70d1fef16210dce9ea1904b7958 Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Sat, 1 Jul 2017 02:04:59 -0400 Subject: [PATCH] Move imagery info from location panel to its own panel --- data/core.yaml | 9 ++- dist/locales/en.json | 12 ++-- modules/ui/panels/imagery.js | 110 ++++++++++++++++++++++++++++++++++ modules/ui/panels/index.js | 3 + modules/ui/panels/location.js | 72 ---------------------- 5 files changed, 127 insertions(+), 79 deletions(-) create mode 100644 modules/ui/panels/imagery.js diff --git a/data/core.yaml b/data/core.yaml index 0a40a0d49..a46e6b760 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -284,13 +284,16 @@ en: changeset: Changeset unknown: Unknown link_text: History on openstreetmap.org + imagery: + key: G + title: Imagery + zoom: Zoom + vintage: Vintage + unknown: Unknown location: key: L title: Location - zoom: Zoom - imagery_capture_dates: Imagery Capture Dates unknown_location: Unknown Location - unknown_imagery_age: Unknown Imagery Age measurement: key: M title: Measurement diff --git a/dist/locales/en.json b/dist/locales/en.json index c28197caa..3729d70db 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -361,13 +361,17 @@ "unknown": "Unknown", "link_text": "History on openstreetmap.org" }, + "imagery": { + "key": "G", + "title": "Imagery", + "zoom": "Zoom", + "vintage": "Vintage", + "unknown": "Unknown" + }, "location": { "key": "L", "title": "Location", - "zoom": "Zoom", - "imagery_capture_dates": "Imagery Capture Dates", - "unknown_location": "Unknown Location", - "unknown_imagery_age": "Unknown Imagery Age" + "unknown_location": "Unknown Location" }, "measurement": { "key": "M", diff --git a/modules/ui/panels/imagery.js b/modules/ui/panels/imagery.js new file mode 100644 index 000000000..15b697268 --- /dev/null +++ b/modules/ui/panels/imagery.js @@ -0,0 +1,110 @@ +import * as d3 from 'd3'; +import _ from 'lodash'; +import { t } from '../../util/locale'; + + +export function uiPanelImagery(context) { + var background = context.background(); + var currSource = null; + var currZoom = ''; + var currVintage = ''; + + + function redraw(selection) { + if (d3.selectAll('.infobox.hide').size()) return; // infobox is hidden + + if (currSource !== background.baseLayerSource().name()) { + currSource = background.baseLayerSource().name(); + currZoom = ''; + currVintage = ''; + } + + selection.html(''); + + var list = selection + .append('ul') + .attr('class', 'imagery-info'); + + list + .append('li') + .text(currSource); + + list + .append('li') + .text(t('infobox.imagery.zoom') + ': ') + .append('span') + .attr('class', 'zoom') + .text(currZoom); + + list + .append('li') + .text(t('infobox.imagery.vintage') + ': ') + .append('span') + .attr('class', 'vintage') + .text(currVintage); + + if (!currVintage) { + debouncedGetVintage(selection); + } + } + + + var debouncedGetVintage = _.debounce(getVintage, 250); + function getVintage(selection) { + var tile = d3.select('.layer-background img'); + if (tile.empty()) return; + + var tiledata = tile.datum(), + zoom = tiledata[2] || Math.floor(context.map().zoom()), + center = context.map().center(); + + currZoom = String(zoom); + selection.selectAll('.zoom') + .text(currZoom); + + background.baseLayerSource().getVintage(center, currZoom, function(err, result) { + if (!result) { + currVintage = t('infobox.imagery.unknown'); + } else { + if (result.start || result.end) { + currVintage = (result.start || '?'); + if (result.start !== result.end) { + currVintage += ' - ' + (result.end || '?'); + } + } else { + currVintage = t('infobox.imagery.unknown'); + } + } + + selection.selectAll('.vintage') + .text(currVintage); + }); + } + + + var panel = function(selection) { + selection.call(redraw); + + context.map() + .on('drawn.info-imagery', function() { + selection.call(redraw); + }) + .on('move.info-imagery', function() { + selection.call(debouncedGetVintage); + }); + + }; + + panel.off = function() { + context.map() + .on('drawn.info-imagery', null) + .on('move.info-imagery', null); + }; + + panel.id = 'imagery'; + panel.title = t('infobox.imagery.title'); + panel.key = t('infobox.imagery.key'); + + + return panel; +} diff --git a/modules/ui/panels/index.js b/modules/ui/panels/index.js index a7a4e2ed1..e83df2706 100644 --- a/modules/ui/panels/index.js +++ b/modules/ui/panels/index.js @@ -1,13 +1,16 @@ export * from './history'; +export * from './imagery'; export * from './location'; export * from './measurement'; import { uiPanelHistory } from './history'; +import { uiPanelImagery } from './imagery'; import { uiPanelLocation } from './location'; import { uiPanelMeasurement } from './measurement'; export var uiInfoPanels = { history: uiPanelHistory, + imagery: uiPanelImagery, location: uiPanelLocation, measurement: uiPanelMeasurement, }; diff --git a/modules/ui/panels/location.js b/modules/ui/panels/location.js index ea5a6b1a3..ffb4c9b0a 100644 --- a/modules/ui/panels/location.js +++ b/modules/ui/panels/location.js @@ -5,10 +5,7 @@ import { services } from '../../services'; export function uiPanelLocation(context) { - var background = context.background(); var currLocation = ''; - var currImagerySource = null; - var currImageryDates = ''; var OSM_PRECISION = 7; @@ -45,39 +42,6 @@ export function uiPanelLocation(context) { .append('li') .text(coordStr); - list - .append('li') - .text(t('infobox.location.zoom') + ': ' + context.map().zoom().toFixed(2)); - - - // Imagery Info - if (currImagerySource !== background.baseLayerSource().name()) { - currImagerySource = background.baseLayerSource().name(); - currImageryDates = ''; - } - - 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') @@ -104,29 +68,6 @@ export function uiPanelLocation(context) { } - 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(); - - background.baseLayerSource().getVintage(center, zoom, function(err, result) { - if (!result) { - currImageryDates = t('infobox.location.unknown_imagery_age'); - } else { - if (result.start || result.end) { - currImageryDates = (result.start || '?') + ' - ' + (result.end || '?'); - } else { - currImageryDates = t('infobox.location.unknown_imagery_age'); - } - } - - selection.selectAll('.imagery-dates') - .text(currImageryDates); - }); - } - - var panel = function(selection) { selection.call(redraw); @@ -134,24 +75,11 @@ export function uiPanelLocation(context) { .on('mousemove.info-location', function() { selection.call(redraw); }); - - context.map() - .on('drawn.info-location', function() { - selection.call(redraw); - }) - .on('move.info-location', function() { - selection.call(debouncedGetImageryDates); - }); - }; panel.off = function() { context.surface() .on('mousemove.info-location', null); - - context.map() - .on('drawn.info-location', null) - .on('move.info-location', null); }; panel.id = 'location';