Stamen built a search interface to explore the Berkeley Ecoengine API. Here's a screenshot:
Explore is a tool for browsing diverse parts of EcoEngine. Open the Queries tab to see what APIs are accessed.
Some parts of the interface can be configured in config.js
. Those capabilities are detailed here.
ECO.endpoints
sets which API endpoints are queried to receive particular datasets. The latest prototype points to the following links:
ECO.endpoints = {
search: 'https://ecoengine.berkeley.edu/api/search/',
observations: 'https://ecoengine.berkeley.edu/api/observations/',
photos: 'https://ecoengine.berkeley.edu/api/photos/',
sensors: 'https://ecoengine.berkeley.edu/api/sensors/?page_size=5000&format=geojson',
layers: 'https://ecoengine.berkeley.edu/api/layers/',
rasters: 'https://ecoengine.berkeley.edu/api/series/tasmin_ens-avg_amon_rcp85/rasters/',
reserves: 'https://ecoengine.berkeley.edu/api/layers/reserves/features/?page_size=500',
jepson: 'https://ecoengine.berkeley.edu/api/layers/jepson-regions/features/?page_size=500'
};
ECO.basemaps
are tileset URLs that appear in the Basemap dropdown. Here is an example:
'Stamen Terrain': {
'url': 'http://{s}.tile.stamen.com/terrain-background/{z}/{x}/{y}.jpg',
'attribution': 'Map tiles by <a href="http://stamen.com/">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org/">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}
The key is used as the name of the dropdown. URL and attribution values are both required for each tileset added to EcoEngine.
The four basemaps in the initial version of Explorer are Light
, Dark
, OpenStreetMap
and Stamen Terrain
(which currently only covers part of North America).
ECO.advancedSearch
fields show up in the "Advanced" tab. An alias
can be provided to display as the label.
Currently only fields of type text
are supported.
The interface does not require a backend to operate, aside from the EcoEngine APIs necessary to load the data Explorer exposes.
The following libraries are required to run the Explorer interface.
As well as these stylesheets.
The raster picker is configured in js/configure-explore.js
as a data structure called ECO.rasterPicker
.
The models
show up in the Scenario dropdown in Explore. The metrics
show up as Climate Models in Explore.
Only metrics
with the value nex
set to true
will appear in the dropdown. The slugs from metrics
and models
are combined to create valid slugs for the Ecoengine Series API.
metrics
can also take a palette
to change the default color ramp. See available values in the colormap
variable in js/color-ramp.js
. These colors are passed as the API parameter style
to Ecoengine to get tiles using that palette. The color ramp can also be configured in Explore using the dropdown below the color legend.
ECO.rasterPicker = {
"models": [
{
"name": "modern",
"slug": "historical"
},
{
"name": "RCP 4.5",
"slug": "rcp45"
},
{
"name": "RCP 8.5",
"slug": "rcp85"
}
],
"metrics": [
{
"name": "precipitation yearly average",
"slug": "pr_yr_ens-avg_amon",
"nex": true,
"palette": "YlGnBu",
},
{
"name": "maximum temperature ensemble average",
"slug": "tasmax_ens-avg_amon",
"nex": true,
"palette": "YlOrRd",
},
/* ... */
]
};
A basic fullscreen photo viewer.
npm install
npm start
A django/ninja2 compatible template has been added to the root of the build directory. This can be used as a ninja2 include to bring in the markup needed to run this application without the header and footer. The following files need to be linked in the main document:
FYI: There is now only one JS file with dependencies and application code combined