Move imagery info from location panel to its own panel

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

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",

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;
+}

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,
 };

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