Skip to content

Commit

Permalink
- Several changes around data sheet loading
Browse files Browse the repository at this point in the history 
  * Added ability to check for loaded status of EarthTime (i.e. all sheets/UI loaded)
  * Refactored how sheet paths are loaded
- Added dotmapsServerHost config option
  • Loading branch information
@pdille
pdille committed Oct 1, 2019
1 parent de7911a commit b4f85c4
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 92 deletions.
23 changes: 10 additions & 13 deletions examples/webgl-timemachine/csvFileLayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -496,7 +496,6 @@ CsvFileLayer.prototype.loadLayersFromTsv = function loadLayersFromTsv(layerDefin
CsvFileLayer.prototype.loadLayers = function loadLayers(path) {
if (path == csvlayersLoadedPath) return;
csvlayersLoadedPath = path;
var url = path;

var that = this;

Expand All @@ -506,27 +505,25 @@ CsvFileLayer.prototype.loadLayers = function loadLayers(path) {
$("#csvlayers_table").empty();
that.layers = [];

if (path.indexOf(".tsv") != -1) {
// Load local version of the csv .tsv file
if (path.endsWith(".tsv")) {
$.ajax({
url: path,
dataType: "text",
success: function(tsvdata) {
that.loadLayersFromTsv(tsvdata);
}
});
return;
} else if (path.indexOf("http") != 0) {
var docId = path.split('.')[0];
var tabId = path.split('.')[1];
url = 'https://docs.google.com/spreadsheets/d/' + docId + '/edit';
if (tabId) {
url += '#gid=' + tabId;
} else {
// If necessary, expand docTab share path
if (path.indexOf("http") != 0) {
path = docTabToGoogleSheetUrl(path);
}
// Load csv layers from Google Sheets style URL
org.gigapan.Util.gdocToJSON(path, function(tsvdata) {
that.loadLayersFromTsv(tsvdata);
});
}
org.gigapan.Util.gdocToJSON(url, function(tsvdata) {
that.loadLayersFromTsv(tsvdata);
});

};

// Takes in UTC time, returns ISO string date format
Expand Down
191 changes: 112 additions & 79 deletions examples/webgl-timemachine/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,7 @@
var showFullScreenButton = parseConfigOption({optionName: "showFullScreenButton", optionDefaultValue: false, exposeOptionToUrlHash: true});
var showThumbnailTool = parseConfigOption({optionName: "showThumbnailTool", optionDefaultValue: true, exposeOptionToUrlHash: false});
var thumbnailServerHost = parseConfigOption({optionName: "thumbnailServerHost", optionDefaultValue: undefined, exposeOptionToUrlHash: false});
var dotmapsServerHost = parseConfigOption({optionName: "dotmapsServerHost", optionDefaultValue: "https://dotmaptiles.createlab.org/", exposeOptionToUrlHash: false});
var headlessClientHost = parseConfigOption({optionName: "headlessClientHost", optionDefaultValue: undefined, exposeOptionToUrlHash: false});
var usePresentationClicker = parseConfigOption({optionName: "usePresentationClicker", optionDefaultValue: false, exposeOptionToUrlHash: false});
var enableThemeHamburgerButton = parseConfigOption({optionName: "enableThemeHamburgerButton", optionDefaultValue: false, exposeOptionToUrlHash: false});
Expand Down Expand Up @@ -312,6 +313,7 @@
var useRetinaDarkNoLabelsBaseMap = baseMapsNoLabels ? true : parseConfigOption({optionName: "useRetinaDarkNoLabelsBaseMap", optionDefaultValue: false, exposeOptionToUrlHash: false});
var enableStoryEditor = !showStories ? false : parseConfigOption({optionName: "enableStoryEditor", optionDefaultValue: false, exposeOptionToUrlHash: false});
var pauseWhenInitialized = parseConfigOption({optionName: "pauseWhenInitialized", optionDefaultValue: false, exposeOptionToUrlHash: true});
var disableAnimation = parseConfigOption({optionName: "disableAnimation", optionDefaultValue: false, exposeOptionToUrlHash: true});
var landsatVersion = parseConfigOption({optionName: "landsatVersion", optionDefaultValue: "2015", exposeOptionToUrlHash: false});
// Deprecated
var customDarkMapUrl = parseConfigOption({optionName: "customDarkMapUrl", optionDefaultValue: "", exposeOptionToUrlHash: false});
Expand Down Expand Up @@ -371,6 +373,10 @@
var keysDown = [];
var $lastSelectedExtra;
var loadedInitialCsvLayers = false;
var dotmapLayersInitialized = false;
var csvFileLayersInitialized = false;
var storiesInitialized = false;
var timeMachinePlayerInitialized = false;
var timeInMsSinceLastWaypointLoop = 0;
var $nextAnnotationLocationButton;
var $previousAnnotationLocationButton;
Expand Down Expand Up @@ -1006,6 +1012,19 @@
var spCrudeUrlUS = rootTilePath + "/sp-crude/0-crude-flows_US.bin"
*/

function isEarthTimeLoaded() {
if (showCustomDotmaps && !dotmapLayersInitialized) {
return false;
} else if (showCsvLayers && !csvFileLayersInitialized) {
return false;
} else if (showStories && !storiesInitialized) {
return false;
} else if (!timeMachinePlayerInitialized) {
return false;
}
return true;
}

function init() {
if (ETNotSupported) {
$("#baseLayerCreditContainer, #logosContainer, #top-nav").hide();
Expand Down Expand Up @@ -4843,9 +4862,9 @@
if (useLocalTiles) {
tileUrl = rootTilePath + '/dotmaptiles/' + nickname;
} else {
tileUrl = 'https://dotmaptiles.createlab.org/tilesv2/' + nickname + '/{z}/{x}/{y}';
tileUrl = dotmapsServerHost + '/tilesv2/' + nickname + '/{z}/{x}/{y}';
if (columnDefs) {
tileUrl += '.box';
tileUrl += '.box';
} else {
tileUrl += '.tbox';
}
Expand All @@ -4855,7 +4874,7 @@
// In reality the tiles are served as 512x512, but by claiming 256x256 we load an
// extra level of detail, and the additional resolution looks nicer, at least on a retina display...
nLevels: 14,
credit: credit
credit: credit
};

if (columnDefs) {
Expand Down Expand Up @@ -4987,77 +5006,80 @@
var header = 'Enabled\tShare link identifier\tName\tCredits\tPopName1\tColor1\tDefinition1\tPopName2\tColor2\tDefinition2\tPopName3\tColor3\tDefinition3\tPopName4\tColor4\tDefinition4\tPopName5\tColor5\tDefinition5\tPopName6\tColor6\tDefinition6\tPopName7\tColor7\tDefinition7\tPopName8\tColor8\tDefinition8\tPopName9\tColor9\tDefinition9';
tsvLayerDefinitions = [header].concat(tsvLayerDefinitions.split('\n').slice(2)).join('\n');
}
var parsed = Papa.parse(tsvLayerDefinitions, {delimiter: '\t', header: true});
var parsed = Papa.parse(tsvLayerDefinitions, {
delimiter: '\t',
header: true
});
var layerdefs = parsed['data'];
for (var i = 0; i < layerdefs.length; i++) {
var layerdef = layerdefs[i];
if (layerdef['Enabled'].toLowerCase() == 'false') continue;
var layerIdentifier = layerdef['Share link identifier'].replace(/\W+/g, '_'); // sanitize non-word chars

var date=null, columnDefs=null, animationLayers=null;
if (layerdef['AnimationLayers']) {
animationLayers = layerdef['AnimationLayers'].replace(/\s/g, '').split('|');
} else {
var date = null,
columnDefs = null,
animationLayers = null;
if (layerdef['AnimationLayers']) {
animationLayers = layerdef['AnimationLayers'].replace(/\s/g, '').split('|');
} else {
columnDefs = [];
for (var c = 1; 1; c++) {
var name = layerdef['PopName' + c];
if (!name) break;
var color = layerdef['Color' + c];
var expression = layerdef['Definition' + c];
columnDefs.push({name: name, color: color, expression: expression});
columnDefs.push({
name: name,
color: color,
expression: expression
});
}
date = layerdef['Date'];
}
date = layerdef['Date'];
}
addDotmapLayer(layerIdentifier, // identifier
layerdef['Name'], // name
layerdef['Credits'], // credit
layerdef['Category'], // layer category
date,
columnDefs,
animationLayers);
layerdef['Name'], // name
layerdef['Credits'], // credit
layerdef['Category'], // layer category
date,
columnDefs,
animationLayers);
}
// New layers have been added, so refresh the layer panel
$(".map-layer-div").accordion("refresh");
sortLayerCategories();
if (enableLetterboxMode) {
updateLetterboxContent();
}
dotmapLayersInitialized = true;
}

function loadDotmapLayers(path) {
if (path == dotlayersLoadedPath) return;
dotlayersLoadedPath = path;
var url = path;

// Clear out any dot map layers that have already been loaded
$("#dotmaps_table, .dotmap").find("input:checked").trigger("click");
$(".dotmap").remove();
$('#custom_dotmaps_table').empty();

if (path.indexOf(".tsv") != -1) {
// Load local version of the dotmaps .tsv file
if (path.endsWith(".tsv")) {
$.ajax({
url: path,
dataType: "text",
success: function(csvdata) {
loadDotmapLayersFromTsv(csvdata);
}
});
return;
} else if (path.indexOf("http") != 0) {
// docTabId DOCID.TABID, e.g. 1hFpDXOyjvjTpad7HpB0K-3thuYqSOlDJ4oExCTcscUk.358696896,
// which would translate into https://docs.google.com/spreadsheets/d/1hFpDXOyjvjTpad7HpB0K-3thuYqSOlDJ4oExCTcscUk/edit#gid=358696896
var docId = path.split('.')[0];
var tabId = path.split('.')[1];
url = 'https://docs.google.com/spreadsheets/d/' + docId + '/edit';
if (tabId) {
url += '#gid=' + tabId;
}
}
// Load dotmaps from Google Docs
UTIL.gdocToJSON(url, function(tsvdata) {
loadDotmapLayersFromTsv(tsvdata);
});
} else {
// If necessary, expand docTab shared path
if (path.indexOf("http") != 0) {
path = docTabToGoogleSheetUrl(path);
}
// Load dotmaps from Google Sheets style URL
UTIL.gdocToJSON(path, function(tsvdata) {
loadDotmapLayersFromTsv(tsvdata);
});
}
}

function modifyWaypointSliderContent(keyframes, theme, story) {
Expand Down Expand Up @@ -5210,6 +5232,7 @@
if (enableLetterboxMode) {
updateLetterboxContent();
}
storiesInitialized = true;
}

function loadWaypoints(path) {
Expand All @@ -5222,20 +5245,24 @@
// Legacy waypoint format (output of snaplapse editor)
if (waypointCollection) {
timelapse.loadSharedDataFromUnsafeURL(waypointCollection);
} else if (path.indexOf("http") >= 0) {
// Load waypoints from Google Docs
UTIL.gdocToJSON(path, function(csvdata) {
loadWaypointSliderContentFromCSV(csvdata);
});
} else {
// Load local version of the waypoints .tsv file
storiesInitialized = true;
} else if (path.endsWith(".tsv")) {
$.ajax({
url: path,
dataType: "text",
success: function(csvdata) {
loadWaypointSliderContentFromCSV(csvdata);
}
});
} else {
// If necessary, expand docTab shared path
if (path.indexOf("http") != 0) {
path = docTabToGoogleSheetUrl(path);
}
// Load waypoints from Google Sheets style URL
UTIL.gdocToJSON(path, function(csvdata) {
loadWaypointSliderContentFromCSV(csvdata);
});
}
}

Expand Down Expand Up @@ -7502,47 +7529,47 @@

// If csv layers load before waypoints, keep checking for waypoint ready status
waypointJSONListReadyInterval = setInterval(function() {
if (waypointJSONList) {
window.clearInterval(waypointJSONListReadyInterval);
var storyTheme = getStoryAndThemeFromUrl();
featuredTheme = currentWaypointTheme || featuredTheme || storyTheme.theme;
featuredTheme = capitalize_each_word_in_string(featuredTheme.replace(/_/g, " "));

if (!loadedInitialCsvLayers) {
loadedInitialCsvLayers = true;
// CSV layers are loaded asynchronously, so trigger another hash change if we just loaded the page
$(window).trigger('hashchange');
}

var layerDefs = csvFileLayers.layersData.data;
for (var i = 0; i < layerDefs.length; i++) {
var layerDef = layerDefs[i];
var shareLinkIdentifier = layerDef['Share link identifier'];
var $layer = $("#layers-list label[name='" + shareLinkIdentifier + "']");
// Add layer description buttons
if (layerDef['Layer Description']) {
var $layerDescriptionElm = $("<td colspan='3'><div class='layer-description'></div></td>");
$layer.closest("tr").append($layerDescriptionElm);
$layerDescriptionElm.find(".layer-description").attr("data-layer-description", layerDef['Layer Description']);
}
if (!waypointJSONList) return;
window.clearInterval(waypointJSONListReadyInterval);
var storyTheme = getStoryAndThemeFromUrl();
featuredTheme = currentWaypointTheme || featuredTheme || storyTheme.theme;
featuredTheme = capitalize_each_word_in_string(featuredTheme.replace(/_/g, " "));

if (!loadedInitialCsvLayers) {
loadedInitialCsvLayers = true;
// CSV layers are loaded asynchronously, so trigger another hash change if we just loaded the page
$(window).trigger('hashchange');
}

var layerDefs = csvFileLayers.layersData.data;
for (var i = 0; i < layerDefs.length; i++) {
var layerDef = layerDefs[i];
var shareLinkIdentifier = layerDef['Share link identifier'];
var $layer = $("#layers-list label[name='" + shareLinkIdentifier + "']");
// Add layer description buttons
if (layerDef['Layer Description']) {
var $layerDescriptionElm = $("<td colspan='3'><div class='layer-description'></div></td>");
$layer.closest("tr").append($layerDescriptionElm);
$layerDescriptionElm.find(".layer-description").attr("data-layer-description", layerDef['Layer Description']);
}
}

if (featuredTheme) {
createFeaturedLayersSection();
} else {
$(".map-layer-div").show();
}
$(".map-layer-div").accordion("refresh");
$("#extras-selector").selectmenu("refresh");
// Sort all the newly added layers
sortLayerCategories();
resizeLayersMenu();
if (enableLetterboxMode) {
updateLetterboxContent();
}
if (featuredTheme) {
createFeaturedLayersSection();
} else {
$(".map-layer-div").show();
}
$(".map-layer-div").accordion("refresh");
$("#extras-selector").selectmenu("refresh");
// Sort all the newly added layers
sortLayerCategories();
resizeLayersMenu();
if (enableLetterboxMode) {
updateLetterboxContent();
}
}, 50);
window.prepareSearchContent();
csvFileLayersInitialized = true;
});

if (isOffline) {
Expand Down Expand Up @@ -7920,9 +7947,11 @@
});
}

$("#datepicker-ui").appendTo($("#timeMachine .player"));

// Keep this last
$(window).on('hashchange', hashChange).trigger('hashchange');
$("#datepicker-ui").appendTo($("#timeMachine .player"));
timeMachinePlayerInitialized = true;

// End of onTimeMachinePlayerReady
}
Expand Down Expand Up @@ -8582,6 +8611,10 @@
// Draws to canvas.
// Called by TimeMachineCanavasLayer during animation and/or view changes
function update() {
if (disableAnimation) {
canvasLayer.setAnimate(false);
disableAnimation = false;
}
timelapse.frameno = (timelapse.frameno || 0) + 1;
perf_drawframe();
gl.clear(gl.COLOR_BUFFER_BIT);
Expand Down

0 comments on commit b4f85c4

Please sign in to comment.