Ecoregion: {ECO_NAME_H}
Biome: {BIOME_NAME}
Realm: {REALM}
Eco ID: {ECO_ID}
{BIOME_NAME}
{REALM}', zIndex: 1, } }, { name: 'Biome', hint: 'A biome is a community of plants and animals living together in a certain kind of climate.', welcome: '
A biome is a community of plants and animals living together in a certain kind of climate.'+
'
There are 14 terrestrial biomes. Seven are forested and 7 are not forested. Plant communities in the '+ 'same biome can appear quite similar in structure but contain very different sets of species. To better '+ 'illustrate, click on the feature that depicts the eight biogeographic realms. An ecoregion in eastern Peru '+ '(Neotropical realm) could look very similar to one in lowland Borneo (Indo-Malayan realm), but the plants and animals would be different.'+ '', legend: 'Biome|#7AB6F5:Boreal Forests/Taiga|#CC6767:Deserts & Xeric Shrublands|#BEE7FF:Flooded Grasslands & Savannas|#FE01C4:Mangroves|'+ '#FE0000:Mediterranean Forests, Woodlands & Scrub|#D6C39D:Montane Grasslands & Shrublands|#FFEAAF:Rock and Ice|'+ '#00734C:Temperate Broadleaf & Mixed Forests|#458970:Temperate Conifer Forests|#FEFF73:Temperate Grasslands, Savannas & Shrublands|'+ '#88CE66:Tropical & Subtropical Coniferous Forests|#CCCD65:Tropical & Subtropical Dry Broadleaf Forests|'+ '#FEAA01:Tropical & Subtropical Grasslands, Savannas & Shrublands|#38A700:Tropical & Subtropical Moist Broadleaf Forests|#9ED7C2:Tundra', //~ legend: '', xyzUrl: 'https://storage.googleapis.com/teow2016/Ecoregions2017ee_Biome/{Z}/{X}/{Y}.png', utfgridUrl: 'https://storage.googleapis.com/teow2016/Ecoregions2017/{Z}/{X}/{Y}.json', options: { minZoom: 0, maxZoom: 10, maxZoomUtfgrid: 8, extZoom: 12, popupHTML: '
Ecoregion: {ECO_NAME_H}
Biome: {BIOME_NAME}
Realm: {REALM}
Eco ID: {ECO_ID}
{ECO_NAME_H}
{REALM}', zIndex: 1, } }, { name: 'Protected', hint: 'See progress towards protecting half the terrestrial realm.', welcome: '
How can we save life on Earth? It happens within each community, ecoregion, and country as we '+
'choose to leave room for nature to thrive. This map charts our progress. '+
'
Scientists now believe that to avoid the worst of the current extinction crisis and to keep temperature '+
'rise below 2oC and also avoid negative biospheric feedbacks, '+
'as much as 50% of the land and seas must be '+
'kept natural. To this end, we can convert the ecoregions map into a tool for measuring our progress towards '+
'the goal of half-protected where lands could be under various forms of conservation management and ownership, '+
'from government, to indigenous peoples\' or privately-held lands. The map presented here intersects the amount '+
'of habitat now protected and the amount of unprotected habitat remaining that could be brought under conservation.'+
'',
//~ legend: 'Legend|#257339:Half Protected|#7BC141:Nature Could Reach Half Protected|#F9A91B:Nature Could Recover|#EE1E23:Nature Imperiled',
legend: 'Legend|#257339:Half Protected: More than 50% of the total ecoregion area is already protected.|'+
'#7BC141:Nature Could Reach Half: Less than 50% of the total ecoregion area is protected but the amount of remaining unprotected natural habitat could bring protection to over 50% if new conservation areas are added to the system.|'+
'#F9A91B:Nature Could Recover: The amount of protected and unprotected natural habitat remaining is less than 50% but more than 20%. Ecoregions in this category would require restoration to reach Half Protected.|'+
'#EE1E23:Nature Imperiled: The amount of protected and unprotected natural habitat remaining is less than or equal to 20%. Achieving half protected is not possible in the short term and efforts should focus on conserving remaining, native habitat fragments.',
xyzUrl: 'https://storage.googleapis.com/teow2016/Ecoregions2017ee_NNH/{Z}/{X}/{Y}.png',
utfgridUrl: 'https://storage.googleapis.com/teow2016/Ecoregions2017/{Z}/{X}/{Y}.json',
options: {
minZoom: 0,
maxZoom: 10,
maxZoomUtfgrid: 8,
extZoom: 12,
popupHTML: '
Download report:
Download data:
Ecoregion: {ECO_NAME_H}
Biome: {BIOME_NAME}
Realm: {REALM}
Eco ID: {ECO_ID}
{ECO_NAME_H}
{BIOME_NAME}',
zIndex: 1,
}
},
];
var realmLabels = [
{ text: 'Afrotropic', latitude: -5, longitude: 24 },
{ text: 'Palearctic', latitude: 63, longitude: 84 },
{ text: 'Indo-Malay', latitude: 10, longitude: 93 },
{ text: 'Australasia', latitude: -18, longitude: 140 },
{ text: 'Nearctic', latitude: 57, longitude: -94 },
{ text: 'Neotropic', latitude: -2, longitude: -58 },
{ text: 'Oceania', latitude: 20, longitude: 159 },
{ text: 'Antarctic', latitude: -73, longitude: 36 }
];
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
function initialize() {
var myOptions = {
center: new google.maps.LatLng(20,0),
//~ mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeId: google.maps.MapTypeId.HYBRID,
zoom: (document.body.clientWidth > 600) ? 3 : 2,
minZoom: 2
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
setTileLayer(0);
});
window.addEventListener('resize', mapSizeChange);
addLayerButtons();
//~ var position = (document.body.clientWidth > 870) ? google.maps.ControlPosition.TOP_LEFT : google.maps.ControlPosition.RIGHT_TOP;
var position = (document.body.clientWidth > 870) ? google.maps.ControlPosition.TOP_LEFT : google.maps.ControlPosition.RIGHT_CENTER;
addRealmBtn(position);
addHomeBtn(position);
addHelpBtn(position);
mapSizeChange();
//~ google.maps.event.addListener(map, 'idle', function() { console.log('idle');});
//~ google.maps.event.addListener(map, 'tilesloaded', function() { console.log('tilesloaded');});
//~ google.maps.event.addListener(map, 'bounds_changed', function() { console.log('bounds_changed');});
new Dragdealer('opacity-slider', {
animationCallback: function(x, y) {
//~ document.getElementById('slider-value').innerHTML = (Math.round(x * 100)) + '%';
tileOpacity = x;
var tiles = document.getElementsByClassName('imgtile');
//~ console.log(tiles);
for (var i=0; i < tiles.length; i++) {
tiles[i].style.opacity = tileOpacity;
}
},
x : 1
});
map.data.setStyle(styleFeature);
if (!isMobile) {
setTimeout(function() {
console.log('Loading ./ecoregions2017.json');
map.data.loadGeoJson('./ecoregions2017c.json');
map.data.addListener('click', function(event) {
google.maps.event.trigger(map, 'click', event); // make the event fall through to UTFGrid for infowindow popup
});
map.data.addListener('mousemove', function(event) {
google.maps.event.trigger(map, 'mousemove', event); // make the event fall through to UTFGrid for hover popup
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeOpacity: 1});
var legendRow = document.getElementById('ecoid_'+event.feature.getId());
if (legendRow) legendRow.className = 'legendrow highlight';
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
document.querySelectorAll('.legendrow.highlight').forEach(function(el) {
el.className = 'legendrow';
});
});
}, 1500);
}
}
function styleFeature(ft) {
if (ft.getProperty('dim')) { // ecoregion dimmed for highlight feature
return {
fillColor: '#000000',
fillOpacity: 0.66,
strokeColor: '#fff',
strokeWeight: 2,
strokeOpacity: 0,
visible: true,
};
} else if (ft.getId() !== undefined) { // ecoregions2017.json
return {
fillColor: '#000000',
fillOpacity: 0,
strokeColor: '#fff',
strokeWeight: 2,
strokeOpacity: 0,
visible: true,
//~ zIndex: 0,
//~ clickable: false, // can't use..also affects hoverability..make event fall through instead
};
} else if (ft.getProperty('hidden')) { // Realms_Line.json
return {visible: false};
} else { // Realms_Line.json
return {
strokeColor: '#000000',
strokeWeight: 3,
clickable: false,
visible: true,
};
}
}
function highlight(ev) {
var ecoId = ev.target.id.split('_')[1]; // use onmouseenter not onmouseover
map.data.revertStyle();
map.data.overrideStyle(map.data.getFeatureById(ecoId), {
strokeOpacity: 1,
});
hoverTip(ecoId);
}
function hoverTipHide() {
var hoverTipElem = document.getElementById('hovertip');
hoverTipElem.style.opacity = 0;
map.data.revertStyle();
}
function hoverTip(ecoId) {
if (!ecoId) {
hoverTipHide();
} else {
var hoverHTML = tileLayers[currentLayer].options.hoverHTML;
var data = ecoIdData(ecoId);
if (hoverHTML && data) {
hoverHTML = fillMetadata(hoverHTML, data);
var hoverTipElem = document.getElementById('hovertip');
hoverTipElem.innerHTML = hoverHTML;
hoverTipElem.style.opacity = 1;
}
}
}
function fillMetadata(phtml, data) {
phtml = phtml.replace(/{ECO_ID}/g, data.id);
phtml = phtml.replace(/{COLOR}/g, data.color);
phtml = phtml.replace(/{ECO_NAME_H}/g, data.name);
phtml = phtml.replace(/{BIOME_NAME}/g, data.biome);
phtml = phtml.replace(/{REALM}/g, data.realm);
do {
phtml = phtml.replace(/{{(.*?)\((.*?)\)}}/, replaceFunction); // allow use of parameters resolved by custom functions, like {{ecoRegionLink({ECO_ID})}}
} while(phtml.indexOf('{{') !== -1);
function replaceFunction(str, fname, param) {
return window[fname](param);
}
return phtml
}
function ecoIdData(ecoId) {
for (var biome in legendData) {
for (var region in legendData[biome].ecoregions) {
var regionData = legendData[biome].ecoregions[region];
regionData.biome = legendData[biome].biome;
if (ecoId == regionData.id) {
return regionData;
}
}
}
}
function ecoRegionLink(ecoId) {
return ecoregion_links[ecoId-1];
}
function setTileLayer(n) {
if (currentLayer !== null) {
map.overlayMapTypes.removeAt(0);
if (tileLayers[currentLayer].utfgridUrl) {
utfGrid.removeLayer(tileLayers[currentLayer].utfgridUrl);
}
}
if (n !== null) {
map.overlayMapTypes.insertAt(0, new TileLayer(tileLayers[n].xyzUrl, tileLayers[n].options));
var utfgridOptions = tileLayers[n].options;
if (tileLayers[n].utfgridUrl) {
utfgridOptions.maxZoom = (utfgridOptions.maxZoomUtfgrid) ? utfgridOptions.maxZoomUtfgrid : utfgridOptions.maxZoom;
addUtfGrid(tileLayers[n].utfgridUrl, utfgridOptions);
//google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
//console.log('tilesloaded');
//addUtfGrid(tileLayers[n].utfgridUrl, utfgridOptions);
//});
//google.maps.event.addListenerOnce(map, 'idle', function(){
//console.log('idle');
// addUtfGrid(tileLayers[n].utfgridUrl, utfgridOptions);
//});
}
}
currentLayer = n;
document.getElementById('introhelp').innerHTML = tileLayers[n].welcome;
if (!tileLayers[n].welcomeShown) {
tileLayers[n].welcomeShown = true;
//~ setTimeout(launchHelp, 500);
}
updateLegendTable(tileLayers[n].legend, n);
}
function mapSizeChange() {
if (document.body.clientWidth < 870 && map.controls[google.maps.ControlPosition.TOP_LEFT].length == 6) { // switch Realms, Home, About right-top
var pop1 = map.controls[google.maps.ControlPosition.TOP_LEFT].pop();
var pop2 = map.controls[google.maps.ControlPosition.TOP_LEFT].pop();
var pop3 = map.controls[google.maps.ControlPosition.TOP_LEFT].pop();
//~ console.log('1: '+pop1.id)
//~ console.log('2: '+pop2.id)
//~ console.log('3: '+pop2.id)
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(pop3);
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(pop2);
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(pop1);
} else if (document.body.clientWidth > 870 && map.controls[google.maps.ControlPosition.TOP_LEFT].length == 3) {
var pop1 = map.controls[google.maps.ControlPosition.RIGHT_CENTER].pop();
var pop2 = map.controls[google.maps.ControlPosition.RIGHT_CENTER].pop();
var pop3 = map.controls[google.maps.ControlPosition.RIGHT_CENTER].pop();
//~ console.log('1: '+pop1.id)
//~ console.log('2: '+pop2.id)
//~ console.log('3: '+pop2.id)
map.controls[google.maps.ControlPosition.TOP_LEFT].push(pop3);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(pop2);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(pop1);
}
if (document.body.clientWidth < 640) {
map.setOptions({
mapTypeControl: false,
streetViewControl: false
});
} else {
map.setOptions({
mapTypeControl: true,
streetViewControl: true
});
}
}
function addLayerButtons() {
var controlDiv = document.createElement('div');
controlDiv.className = 'mapbutton nosel selected';
controlDiv.title = tileLayers[0].hint;
controlDiv.innerHTML = tileLayers[0].name;
controlDiv.id = 'mapbutton0';
google.maps.event.addDomListener(controlDiv, 'click', function() {
setTileLayer(0);
document.getElementById('mapbutton0').className = 'mapbutton nosel selected';
document.getElementById('mapbutton1').className = 'mapbutton nosel';
document.getElementById('mapbutton2').className = 'mapbutton nosel';
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);
var controlDiv = document.createElement('div');
controlDiv.className = 'mapbutton nosel';
controlDiv.title = tileLayers[1].hint;
controlDiv.innerHTML = tileLayers[1].name;
controlDiv.id = 'mapbutton1';
google.maps.event.addDomListener(controlDiv, 'click', function() {
setTileLayer(1);
document.getElementById('mapbutton0').className = 'mapbutton nosel';
document.getElementById('mapbutton1').className = 'mapbutton nosel selected';
document.getElementById('mapbutton2').className = 'mapbutton nosel';
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
document.getElementById('opacity-slider').style.left = document.getElementById('mapbutton0').style.left;
})
})
observer.observe(controlDiv, {childList: false, subtree: false, attributes: true, characterData: false});
var controlDiv = document.createElement('div');
controlDiv.className = 'mapbutton nosel';
controlDiv.title = tileLayers[2].hint;
controlDiv.innerHTML = tileLayers[2].name;
controlDiv.id = 'mapbutton2';
google.maps.event.addDomListener(controlDiv, 'click', function() {
setTileLayer(2);
document.getElementById('mapbutton0').className = 'mapbutton nosel';
document.getElementById('mapbutton1').className = 'mapbutton nosel';
document.getElementById('mapbutton2').className = 'mapbutton nosel selected';
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);
}
function addRealmBtn(position) {
var controlDiv = document.createElement('div');
controlDiv.id = 'realmbtn';
controlDiv.className = 'mapbutton nosel';
controlDiv.title = 'Show Realms';
controlDiv.innerHTML = 'Realms';
google.maps.event.addDomListener(controlDiv, 'click', function() {
if (realmLabels[0].overlay) {
map.data.forEach(function(ft) {
if (ft.getId() === undefined) { // Realms_Line.json
ft.setProperty('hidden', true);
}
});
for (var i=0; i < realmLabels.length; i++) {
realmLabels[i].overlay.setMap();
realmLabels[i].overlay = false;
}
document.getElementById('realmbtn').className = 'mapbutton nosel';
document.getElementById('realmbtn').title = 'Show Realms';
} else {
if (!map.data.getFeatureById('realms_loaded')) {
console.log('Load ./Realms_Line.json');
map.data.loadGeoJson('./Realms_Line.json');
}
map.data.forEach(function(ft) {
if (ft.getId() === undefined) { // Realms_Line.json
ft.setProperty('hidden', false);
}
});
for (var i=0; i < realmLabels.length; i++) {
realmLabels[i].overlay = new MapLabel({
text: realmLabels[i].text,
position: new google.maps.LatLng(realmLabels[i].latitude,realmLabels[i].longitude),
map: map,
fontSize: 32,
maxZoom: 5,
minZoom: 2
});
}
document.getElementById('realmbtn').className = 'mapbutton nosel selected';
document.getElementById('realmbtn').title = 'Hide Realms';
}
});
map.controls[position].push(controlDiv);
}
function addHomeBtn(position) {
var controlDiv = document.createElement('div');
controlDiv.id = 'homebtn';
controlDiv.className = 'mapbutton nosel';
controlDiv.title = 'Reset the map to world overview';
controlDiv.innerHTML = 'Home';
google.maps.event.addDomListener(controlDiv, 'click', function() {
map.setCenter(new google.maps.LatLng(20,0));
map.setZoom((document.body.clientWidth > 600) ? 3 : 2);
if (utfGridInfoWindow) {
utfGridInfoWindow.close();
}
});
map.controls[position].push(controlDiv);
}
function addHelpBtn(position) {
var controlDiv = document.createElement('div');
controlDiv.id = 'helpbtn';
controlDiv.className = 'mapbutton nosel';
controlDiv.title = 'About this map';
controlDiv.innerHTML = 'About';
google.maps.event.addDomListener(controlDiv, 'click', launchHelp);
map.controls[position].push(controlDiv);
document.getElementById("blackout").onclick = closeHelp;
if ("onhelp" in window) {
window.onhelp = function() {
launchHelp();
return false;
}
}
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27 || evt.keyCode == 13 || evt.keyCode == 32) {
closeHelp();
}
if (evt.keyCode == 112) {
launchHelp();
if (evt.preventDefault) {
evt.preventDefault();
}
}
};
}
function launchHelp() {
document.getElementById("blackout").style.opacity = 0.8;
document.getElementById("introhelpOuter").style.opacity = 1;
document.getElementById("introhelpOuter").style.transform = 'scale(1)';
document.getElementById("introhelpOuter").style.webkitTransform = 'scale(1)';
document.getElementById("blackout").style.zIndex = 99997;
document.getElementById("introhelpOuter").style.zIndex = 99998;
}
function closeHelp() {
document.getElementById("blackout").style.opacity = 0;
document.getElementById("introhelpOuter").style.opacity = 0;
document.getElementById("introhelpOuter").style.transform = 'scale(0.8)';
document.getElementById("introhelpOuter").style.webkitTransform = 'scale(0.8)';
document.getElementById("lightbox").style.opacity = 0;
setTimeout(function() {
document.getElementById("blackout").style.zIndex = -1;
document.getElementById("introhelpOuter").style.zIndex = -1;
document.getElementById("lightbox").style.zIndex = -1;
document.getElementById("lightboximg").src = '';
}, 500);
}
function lightbox(ecoid) {
var phototxt = photoDetails(ecoid);
if (phototxt) {
document.getElementById("blackout").style.opacity = 0.8;
var imgurl = './photo/960/' + ecoid + '.jpg';
var img = new Image();
img.onload = function() {
if (img.width / window.innerWidth > img.height / window.innerHeight) {
var lbImgWidth = Math.round(window.innerWidth * 0.8);
var lbImgHeight = Math.round(lbImgWidth * img.height / img.width);
} else {
var lbImgHeight = Math.round(window.innerHeight * 0.8);
var lbImgWidth = Math.round(lbImgHeight * img.width / img.height);
}
if (lbImgWidth / 960 > lbImgHeight / 960) {
if (lbImgWidth > 960) {
lbImgWidth = 960;
var lbImgHeight = Math.round(lbImgWidth * img.height / img.width);
}
} else {
if (lbImgHeight > 960) {
lbImgHeight = 960;
var lbImgWidth = Math.round(lbImgHeight * img.width / img.height);
}
}
document.getElementById("lightboximg").style.width = lbImgWidth + 'px';
document.getElementById("lightboximg").style.height = lbImgHeight + 'px';
document.getElementById("lightboximg").src = imgurl;
document.getElementById("lightboximg").onclick = closeHelp;
document.getElementById("lightboxtxt").textContent = phototxt;
document.getElementById("lightbox").style.opacity = 1;
document.getElementById("blackout").style.zIndex = 99997;
document.getElementById("lightbox").style.zIndex = 99998;
}
img.src = imgurl;
}
}
function addUtfGrid(utfgridUrl, options) {
if (!utfGrid) {
utfGridInfoWindow = new google.maps.InfoWindow();
var hoverDiv = document.createElement('div');
hoverDiv.id = 'hovertip';
document.getElementById('map_outer').appendChild(hoverDiv);
utfGrid = new UtfGrid(utfGridInfoWindow, hoverDiv);
utfGrid.setMap(map);
}
utfGrid.addLayer(utfgridUrl, options);
//~ addUtfGridDebug();
}
/* function addUtfGridDebug() {
map.overlayMapTypes.insertAt(1, new UtfGridDebug());
}
function refreshUtfGridDebug() {
map.overlayMapTypes.removeAt(1);
map.overlayMapTypes.insertAt(1, new UtfGridDebug());
}
function UtfGridDebug() {
this.tileSize = new google.maps.Size(256,256);
}
UtfGridDebug.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.style.height = '256px';
div.style.width = '256px';
div.style.opacity = 0.3;
div.style.borderStyle = 'solid';
div.style.borderWidth = '1px';
div.style.borderColor = '#AAAAAA';
div.innerHTML = zoom + ' ' + coord;
var key = zoom + '_' + coord.x + '_' + coord.y;
if (utfGrid._cache[0][key]) {
div.style.backgroundColor = '#0f0';
div.style.color = '#f0f';
} else if (utfGrid._cache[0][key] == 0) {
div.style.color = '#000';
div.style.backgroundColor = '#fff';
} else {
div.style.color = '#0ff';
div.style.backgroundColor = '#f00';
}
return div;
}
*/
function TileLayer(url, options) {
this.url = url;
this.maxZoom = (options.maxZoom) ? options.maxZoom : 18;
this.extZoom = (options.extZoom) ? options.extZoom : 18;
this.minZoom = (options.minZoom) ? options.minZoom : 0;
this.tileSize = new google.maps.Size(256,256);
//~ this.opacity = (options.opacity) ? options.opacity : 1.0;
}
TileLayer.prototype.getTile = function(coord, zoom, ownerDocument) {
var div = ownerDocument.createElement('div');
div.className = 'imgtile';
//~ div.style.opacity = this.opacity;
div.style.opacity = tileOpacity;
if (zoom < this.minZoom || zoom > this.extZoom) {
return div;
}
var bound = Math.pow(2, zoom);
var yrev = (bound - coord.y - 1); // {yy} in the URL if y numbering is reversed
var tileRange = 1 << zoom; // repeat x tiles if map is panned 360deg horizontally
var x = coord.x;
if (coord.y < 0 || coord.y >= tileRange) {
return div; // outside of range vertically
}
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
if (zoom > this.maxZoom) {
// load higher zoom level tile and scale up
var zsteps = zoom - this.maxZoom;
var upperCoord = {};
upperCoord.x = Math.floor(x / Math.pow(2, zsteps));
upperCoord.y = Math.floor(coord.y / Math.pow(2, zsteps));
upperCoord.yrev = Math.floor(yrev / Math.pow(2, zsteps));
var upperTileSrcUrl = this.url.replace(/{x}/i,upperCoord.x).replace(/{y}/i,upperCoord.y).replace(/{yy}/i,upperCoord.yrev).replace(/{z}/i,this.maxZoom);
var canv = document.createElement('canvas');
canv.width = 256;
canv.height = 256;
div.appendChild(canv);
var ctx=canv.getContext('2d');
var img = new Image();
img.src = upperTileSrcUrl;
ctx['imageSmoothingEnabled'] = false;
ctx['mozImageSmoothingEnabled'] = false;
ctx['webkitImageSmoothingEnabled'] = false;
ctx['msImageSmoothingEnabled'] = false;
img.onload = function() {
var srcX = 256 / Math.pow(2, zsteps) * (x % Math.pow(2, zsteps));
var srcY = 256 / Math.pow(2, zsteps) * (coord.y % Math.pow(2, zsteps));
var srcW = 256 / Math.pow(2, zsteps);
var srcH = 256 / Math.pow(2, zsteps);
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, 256, 256);
}
return div;
}
var imgURL = this.url.replace(/{x}/i,x).replace(/{y}/i,coord.y).replace(/{yy}/i,yrev).replace(/{z}/i,zoom);
var img = ownerDocument.createElement('img');
img.src = imgURL;
img.style.width = this.tileSize.width + 'px';
img.style.height = this.tileSize.height + 'px';
img.style.borderWidth = '0px';
img.onload = function() {
div.appendChild(img);
}
return div;
};
// for IE ... https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
if (typeof Object.assign != 'function') {
Object.assign = function(target, varArgs) { // .length of function is 2
'use strict';
if (target == null) { // TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) { // Skip over if undefined or null
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
};
}
function legendMinMax() {
if (window.getComputedStyle(document.getElementById('maplegend')).opacity != 0) {
document.getElementById('maplegend').style.opacity = 0;
document.getElementById('maplegend').style.transform = 'scale(0)';
setTimeout(function() {
document.getElementById('maplegend_min').style.opacity = 1;
document.getElementById('maplegend_min').style.transform = 'scale(1)';
}, 200);
} else {
document.getElementById('maplegend_min').style.opacity = 0;
document.getElementById('maplegend_min').style.transform = 'scale(0)';
setTimeout(function() {
document.getElementById('maplegend').style.opacity = 1;
document.getElementById('maplegend').style.transform = 'scale(1)';
}, 200);
}
}
function updateLegendTable(legend, n) {
map.data.forEach(function(ft) {
if (ft.getId()) {
ft.setProperty('dim', false);
}
});
var ntables = legend.split('||').length;
if (legend == '') {
document.getElementById('maplegend').style.display = 'none';
document.getElementById('maplegend_min').style.display = 'none';
} else {
var searchbar = document.getElementById('legendsearch');
if (ntables > 1) { // Ecoregion mode
searchbar.innerHTML = '';
var minmax = document.createElement('div');
minmax.className = 'maplegendMinMax';
minmax.title = 'Minimize the legend';
minmax.onclick = legendMinMax;
searchbar.appendChild(minmax);
var searchInput = document.createElement('input');
searchInput.placeholder = '(search for ecoregion name or id)';
searchInput.title = 'Search for ecoregions by name or ID, or enter a realm (e.g. "neotropic")';
searchInput.id = 'search';
searchInput.spellcheck = false;
searchInput.addEventListener('focus', legendSearch);
searchInput.addEventListener('input', legendSearch);
searchInput.addEventListener('blur', legendSearch);
searchbar.appendChild(searchInput);
var eye = document.createElement('div');
eye.className = 'eye';
eye.id = 'searcheye';
eye.textContent = '👁';
eye.title = 'Highlight search results on the map';
eye.onclick = highlightSearchResult;
searchbar.appendChild(eye);
searchbar.style.display = 'block';
document.getElementById('maplegendScroll').style.minHeight = '420px';
} else { // Biome or Protected mode
searchbar.style.display = 'none';
document.getElementById('maplegendScroll').style.minHeight = 0;
}
document.getElementById('maplegendInner').innerHTML = '';
var legendIndex=0;
for (var t = 0; t
An Ecoregion-Based Approach to Protecting Half the Terrestrial Realm
• Shapefile (150mb zip)
Licensed under CC-BY 4.0
• Google Earth Engine dataset