From 6addbba3400dbeeb54b2af7f704845202b1f953c Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Tue, 12 Sep 2017 14:51:01 -0400 Subject: [PATCH] reorganize metadata object, change display of meters --- dist/locales/en.json | 4 + modules/renderer/background_source.js | 103 ++++++++++++-------- modules/renderer/tile_layer.js | 2 +- modules/ui/panels/background.js | 131 +++++++++++--------------- 4 files changed, 127 insertions(+), 113 deletions(-) diff --git a/dist/locales/en.json b/dist/locales/en.json index 94691023f..cb0b2a075 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -354,6 +354,10 @@ "title": "Background", "zoom": "Zoom", "vintage": "Vintage", + "source": "Source", + "description": "Description", + "resolution": "Resolution", + "accuracy": "Accuracy", "unknown": "Unknown", "show_tiles": "Show Tiles", "hide_tiles": "Hide Tiles" diff --git a/modules/renderer/background_source.js b/modules/renderer/background_source.js index 1a0814f21..cb2f454d0 100644 --- a/modules/renderer/background_source.js +++ b/modules/renderer/background_source.js @@ -139,7 +139,9 @@ export function rendererBackgroundSource(data) { end: localeDateString(source.endDate) }; vintage.range = vintageRange(vintage); - callback(null, vintage); + + var metadata = { vintage: vintage }; + callback(null, metadata); }; @@ -200,8 +202,8 @@ rendererBackgroundSource.Bing = function(data, dispatch) { if (!cache[tileId]) { cache[tileId] = {}; } - if (cache[tileId] && cache[tileId].vintage) { - return callback(null, cache[tileId].vintage); + if (cache[tileId] && cache[tileId].metadata) { + return callback(null, cache[tileId].metadata); } jsonpRequest(url, function(result) { @@ -214,8 +216,10 @@ rendererBackgroundSource.Bing = function(data, dispatch) { end: localeDateString(result.resourceSets[0].resources[0].vintageEnd) }; vintage.range = vintageRange(vintage); - cache[tileId].vintage = vintage; - return callback(null, vintage); + + var metadata = { vintage: vintage }; + cache[tileId].metadata = metadata; + return callback(null, metadata); } }); }; @@ -244,57 +248,82 @@ rendererBackgroundSource.Esri = function(data) { var tileId = tileCoord.slice(0, 3).join('/'), zoom = Math.min(tileCoord[2], esri.scaleExtent[1]), centerPoint = center[0] + ',' + center[1], // long, lat (as it should be) - metadataLayer; - switch (true) { - case zoom >= 19: - metadataLayer = 3; - break; - case zoom >= 17: - metadataLayer = 2; - break; - case zoom >= 13: - metadataLayer = 0; - break; - default: - metadataLayer = 99; - } - // build up query using the layer appropriate to the current zoom - var url = 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/' + metadataLayer + '/query?returnGeometry=false&geometry=' + centerPoint + '&inSR=4326&geometryType=esriGeometryPoint&outFields=*&f=json&callback={callback}'; + metadataLayer, + vintage = {}, + metadata = {}; + + switch (true) { + case zoom >= 19: + metadataLayer = 3; + break; + case zoom >= 17: + metadataLayer = 2; + break; + case zoom >= 13: + metadataLayer = 0; + break; + default: + metadataLayer = 99; + } + + // build up query using the layer appropriate to the current zoom + var url = 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/' + metadataLayer + '/query?returnGeometry=false&geometry=' + centerPoint + '&inSR=4326&geometryType=esriGeometryPoint&outFields=*&f=json&callback={callback}'; if (!cache[tileId]) { cache[tileId] = {}; } - if (cache[tileId] && cache[tileId].vintage) { - return callback(null, cache[tileId].vintage); + if (cache[tileId] && cache[tileId].metadata) { + return callback(null, cache[tileId].metadata); } // accurate metadata is only available >= 13 if (metadataLayer === 99) { - callback(null, { - range: 'Unknown', - source: 'Unknown', - description: 'Unknown', - resolution: 'Unknown', - accuracy: 'Unknown' - }); + vintage = { + start: null, + end: null, + range: null + }; + metadata = { + vintage: null, + source: t('info_panels.background.unknown'), + description: t('info_panels.background.unknown'), + resolution: t('info_panels.background.unknown'), + accuracy: t('info_panels.background.unknown') + }; + + callback(null, metadata); + } else { jsonpRequest(url, function(result) { - var err = !result || result.features.length < 1; + var err; + if (!result) { + err = 'Unknown Error'; + } else if (result.features && result.features.length < 1) { + err = 'No Results'; + } else if (result.error && result.error.message) { + err = result.error.message; + } + if (err) { return callback(err); } else { - var vintage = { - // pass through the discrete capture date from metadata - range: localeDateString(result.features[0].attributes.SRC_DATE2), + // pass through the discrete capture date from metadata + var captureDate = localeDateString(result.features[0].attributes.SRC_DATE2); + vintage = { + start: captureDate, + end: captureDate, + range: captureDate + }; + metadata = { + vintage: vintage, source: result.features[0].attributes.NICE_NAME, description: result.features[0].attributes.NICE_DESC, resolution: result.features[0].attributes.SRC_RES, accuracy: result.features[0].attributes.SRC_ACC, - }; - cache[tileId].vintage = vintage; - return callback(null, vintage); + cache[tileId].metadata = metadata; + return callback(null, metadata); } }); } diff --git a/modules/renderer/tile_layer.js b/modules/renderer/tile_layer.js index 1e9927be2..88f2d9141 100644 --- a/modules/renderer/tile_layer.js +++ b/modules/renderer/tile_layer.js @@ -256,7 +256,7 @@ export function rendererTileLayer(context) { var span = d3.select(this); var center = context.projection.invert(tileCenter(d)); source.getMetadata(center, d, function(err, result) { - span.text((result && result.range) || + span.text((result && result.vintage && result.vintage.range) || t('info_panels.background.vintage') + ': ' + t('info_panels.background.unknown') ); }); diff --git a/modules/ui/panels/background.js b/modules/ui/panels/background.js index 393e5e8f4..c6e867a79 100644 --- a/modules/ui/panels/background.js +++ b/modules/ui/panels/background.js @@ -5,20 +5,18 @@ import { t } from '../../util/locale'; export function uiPanelBackground(context) { var background = context.background(); - var currSource = null; - var currZoom = ''; - var currVintage = ''; + var currSourceName = null; + var metadata = { zoom: '', vintage: '' }; + var metadataKeys = [ + 'zoom', 'vintage', 'source', 'description', 'resolution', 'accuracy' + ]; - var currProvider = ''; - var currDescription = ''; - var currResolution = ''; - var currAccuracy = ''; + var debouncedRedraw = _.debounce(redraw, 250); function redraw(selection) { - if (currSource !== background.baseLayerSource().name()) { - currSource = background.baseLayerSource().name(); - currZoom = ''; - currVintage = ''; + if (currSourceName !== background.baseLayerSource().name()) { + currSourceName = background.baseLayerSource().name(); + metadata = { zoom: '', vintage: '' }; } selection.html(''); @@ -29,52 +27,23 @@ export function uiPanelBackground(context) { list .append('li') - .text(currSource); + .text(currSourceName); - list - .append('li') - .text(t('info_panels.background.zoom') + ': ') - .append('span') - .attr('class', 'zoom') - .text(currZoom); + metadataKeys.forEach(function(k) { + list + .append('li') + .attr('class', 'background-info-list-' + k) + .classed('hide', !metadata[k]) + .text(t('info_panels.background.' + k) + ': ') + .append('span') + .attr('class', 'background-info-span-' + k) + .text(metadata[k]); + }); - list - .append('li') - .text(t('info_panels.background.vintage') + ': ') - .append('span') - .attr('class', 'vintage') - .text(currVintage); - - if (!currVintage) { + if (!metadata.vintage) { debouncedGetMetadata(selection); } - if (currSource === 'Esri World Imagery') { - list - .append('li') - .text(t('info_panels.background.source') + ': ') - .append('span') - .attr('class', 'source') - .text(currProvider); - list - .append('li') - .text(t('info_panels.background.description') + ': ') - .append('span') - .attr('class', 'description') - .text(currDescription); - list - .append('li') - .text(t('info_panels.background.resolution') + ': ') - .append('span') - .attr('class', 'resolution') - .text(currResolution); - list - .append('li') - .text(t('info_panels.background.accuracy') + ': ') - .append('span') - .attr('class', 'accuracy') - .text(currAccuracy); - } var toggle = context.getDebug('tile') ? 'hide_tiles' : 'show_tiles'; selection @@ -91,38 +60,50 @@ export function uiPanelBackground(context) { var debouncedGetMetadata = _.debounce(getMetadata, 250); + function getMetadata(selection) { var tile = d3.select('.layer-background img.tile-center'); // tile near viewport center if (tile.empty()) return; - var d = tile.datum(), + var sourceName = currSourceName, + d = tile.datum(), zoom = (d && d.length >= 3 && d[2]) || Math.floor(context.map().zoom()), center = context.map().center(); - currZoom = String(zoom); - selection.selectAll('.zoom') - .text(currZoom); + // update zoom + metadata.zoom = String(zoom); + selection.selectAll('.background-info-span-zoom') + .text(metadata.zoom); if (!d || !d.length >= 3) return; + background.baseLayerSource().getMetadata(center, d, function(err, result) { - currVintage = (result && result.range) || t('info_panels.background.unknown'); - selection.selectAll('.vintage') - .text(currVintage); - // metadata from Esri can tell us the specific provider - if (result.source) { - currSource = result.source; - selection.selectAll('.source') - .text(currSource); - currDescription = result.description; - selection.selectAll('.description') - .text(currDescription); - currResolution = result.resolution; - selection.selectAll('.resolution') - .text(currResolution + ' (m)'); - currAccuracy = result.accuracy; - selection.selectAll('.accuracy') - .text(currAccuracy + ' (m)'); - } + if (err || currSourceName !== sourceName) return; + + // update vintage + var vintage = result.vintage; + metadata.vintage = (vintage && vintage.range) || t('info_panels.background.unknown'); + selection.selectAll('.background-info-span-vintage') + .text(metadata.vintage); + + // update other metdata + _.without(metadataKeys, 'zoom', 'vintage') + .forEach(function(k) { + var val = result[k]; + + // append units to numeric data + if (k === 'resolution' || k === 'accuracy') { + if (val && isFinite(val)) { + val += ' m'; + } + } + + metadata[k] = val; + selection.selectAll('.background-info-list-' + k) + .classed('hide', !val) + .selectAll('.background-info-span-' + k) + .text(val); + }); }); } @@ -132,7 +113,7 @@ export function uiPanelBackground(context) { context.map() .on('drawn.info-background', function() { - selection.call(redraw); + selection.call(debouncedRedraw); }) .on('move.info-background', function() { selection.call(debouncedGetMetadata);