Stamen built a search interface to explore the Berkeley Ecoengine API. Here's a screenshot:

• Explore
  • Faceted search, time filtering, bounding box search, raster layers, reserve polygons, observation markers
  • See Explore Features
• Compare
  • Point, Polygon and Hexbinned observation layers
  • Accepts any EcoEngine GeoJSON observation query for comparison
• Lizards and Woodrats
  • Spot spatially co-occuring observations by toggling layers
• Taxa Sampling Distributions
  • Example of small mutiples to compare sampling distributions.
  • ColorBrewer palettes
• Woodrats over Decades
  • Example of small multiples to compare temporal distributions
• Quercus
  • Small multiples with search functionality (edit "quercus")
  • Split by search facet
  • Displays top 24 facets for a search
• Photos
  • Simple photo-viewing app, accepts URLs in the same format as Explore
• Bulk Download
  • A tool for generating CSV text from a query
  • Downloads multiple pages of data
• Observations
  • An early version of Explore with search box, time filter, pagination and export options
  • Could be a good starting place for new EcoEngine applications, since the app is only about 250 lines long and uses only d3.js
• Antarctic Chordata
  • A stress-test of loading all Chordata in a non-Mercator projection centered on Antarctica
• Arctic Chordata
  • The same as the previous, but centered on the North Pole
• Early version of Explore
  • An early version of explore with a preview of available photos and a "Detail" pane that lists out information about observations that are hovered over.
• Sensors
  • A simple "hello world" of accessing and printing EcoEngine data with d3
  • Lists an index of available sensors
• Scatterplot
  • A simple D3.js scatterplot showing observations by country over time.
• Parallel Coordinates
  • A D3.js parallel coordinates plot showing a sample of 2000 observations.

Explore is a tool for browsing diverse parts of EcoEngine. Open the Queries tab to see what APIs are accessed.

• Search box
• Brushable time filter
• Faceted search with histograms (filters only Observation queries)
• Raster map with multiple layers
• Marker map display of Observations, Sensors, Photos
• Polygon map display of Regions
• Advanced attribute search
• Bounding box search
• Footprint search

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.

• d3.js
• leaflet.js
• zoom-extras.js
• hashnav.js

As well as these stylesheets.

• leaflet.css
• bootstrap.css

• All data comes from the Berkeley Ecoinformatics API, documented at https://ecoengine.berkeley.edu/docs/quickstart.html

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:

• static/stamen.css (in the document head)
• js/ecoengine.min.js (at the bottom of the document body)

FYI: There is now only one JS file with dependencies and application code combined