Page History
...
To provide us configuration most efficiently, you will need to fork our GitHub repository. Clone the code from your fork and follow the README to get a local instance of Earthdata Search set up.
Basic Configuration
To create your portal you will need to create a new directory in "/portals" with a unique name you want as your portal identifier, for this example we will use "example". You then will create the config.json file ("/portals/example/config.json").
A significant amount of configuration can be done through the /config/portals.yml file which also contains examples of existing portalsthis config.json file. You can view example configurations at https://github.com/nasa/earthdata-search/tree/master/portals/simple/config.json and https://github.com/nasa/earthdata-search/tree/master/portals/complex/config.json. Here is an explanation of the configuration:
Optional.
Line Explanation Portal configuration intended for production should go under this heading
Optional. A short string to be used when referring to the portal. This will appear verbatim where the word "Search" is in the top-left of the site toolbar and will appear in various other places as "Config Example Portal" when referring to the portal. If omitted, a capitalized version of the portal ID will be used, i.e. "Example."
available
logos:
- image: https://example.org/logo.png
link: https://example.org
: Example Home
. A list of logos to appear to the right of the NASA logo in the upper left of the page. If omitted, no logos will be added.
Optional. A list of of scripts to include on all portal pages. For maintenance, security, and availability reasons, these must be assets packaged by Earthdata Search and cannot be external links. See the "Advanced Configuration" section for information on authoring these scripts. If omitted, no scripts will be included.
| Key |
|---|
portals: &portals example:The unique identifier for your portal. The main place this gets used is the URL. In this case, the portal would be reached at https://search.earthdata.nasa.gov/portal/example. This key cannot change over the lifetime of the portal without impacting users, their bookmarks, their saved projects, etc.
org: My DAAC| Data Type | Explanation | |
|---|---|---|
hasStyles | Boolean | This tells EDSC if it needs to load a "styles.scss" file, see Advanced Configuration. |
hasScripts | Boolean | This tells EDSC if it needs to load a "scripts.js" file, see Advanced Configuration. |
hideCollectionFilters | Boolean | If true, EDSC will hide the checkboxes " and |
logo | Object (Optional) | Configuration for a logo to appear to the right of the NASA logo in the upper left of the page. If omitted, no logo will be added. |
id | String (Optional) | This is the id attribute of the <a> tag that houses the logo image, see Advanced Configuration. |
image | String (Optional) | Path to logo image. This is not recommended, please see Advanced Configuration for the preferred method of adding the logo image. |
link | String (Optional) | This is the URL that users will be sent to when clicking on the logo image. If no value is provided clicking on the logo image will return the user to the EDSC portal home (/portal/example/search). |
title | String (Optional) | This text is set as the title attribute in the <a> tag that houses the logo image, it will be displayed when you user hovers their mouse over the logo |
org | String (Optional) |
| A short string representing the organization that replaces "Earthdata" in the top-left of the site toolbar. If omitted, it will just say "Earthdata." |
title: Config Exampleparams:
tag-key:
- org.example.portal
query | Object (Optional) | These parameters are used to filter the list of collections available in the portal. Current supported values:
If you need support of another CMR query parameter, please contact us. Refer to the CMR documentation for information on |
parameters: |
link: https://example.org
title |
| String (Optional |
The "image" and "link" attributes are required for each provided logo. The image attribute is the URL to the logo image, which will appear 50px tall within the portal. The link attribute provides the page to be loaded when the logo is clicked. Other attributes (optional) get placed as attributes on the HTML link, in this case the "title" attribute determines the tooltip provided when users hover over the image.
scripts:
- edsc-portal.example.min.js
| ) | A short string to be used when referring to the portal. This will appear verbatim where the word "Search" is in the top-left of the site toolbar and will appear in various other places as "Example Portal" when referring to the portal. If omitted, a capitalized version of the portal ID will be used, i.e. "Example." |
Advanced Configuration
Portals allow authors to provide scripts SASS styles and JavaScript to run on each page within the portal. These scripts can These can be useful for altering the page style, hiding unnecessary features, or adding new features that do not make sense for inclusion in Earthdata Search. You can do essentially anything that can be done with Javascript , including loading stylesheets. The scripts are placed at the bottom of the <head> element, after all other site scripts, so all site APIs are available at the time of script execution, but the DOM will not yet have been loaded.
Two examples of these scripts may be helpful to authors:
- Example portal script: https://github.com/nasa/earthdata-search/tree/master/edsc/portals/example
This get loaded by the "complex" portal (https://search.sit.earthdata.nasa.gov/portal/complex?cmr_env=ops) and shows how one might inject CSS, HTML templates, and Javascript into a page. - ORNL portal script: https://github.com/nasa/earthdata-search/tree/master/edsc/portals/ornl
This gets loaded on ORNL portals (https://search.sit.earthdata.nasa.gov/portal/carve?cmr_env=ops). It provides CSS to animate the color of the ORNL logo in the upper left
or SASS.
If you are authoring something complex or if you have needs that you feel would be better addressed at the basic configuration level, please reach out to our developers, who Chris Lynnes (christopher.s.lynnes@nasa.gov) can put you in touch with.
Scripts must output a file called edsc-portal.*.js to the project's edsc/dist directory when the EDSC build process runs `rake assets:precompile`. Though there are many ways to accomplish this, the most straightforward / well-integrated is as follows:
...
- edsc/portals/your-portal-name/package.json: Edit to have the correct portal name, author, etc
- config/webpack.config.js: Add a line under the "entry" section with
"edsc-portal.your-portal-name": "./edsc/portals/ornl/src/js/edsc-portal.your-portal-name.jsx"
styles.scss
This is the prefered way to add a new logo image. Save your image(s) into "/portals/myportal/images/". In the logo section of your config.json file, if you set the "id" field to "example-logo", then you would use this SASS rule to load that image:
#example-logo {
height: 50px;
width: (set the correct width for your logo);
background-image: url('./images/<your logo image>');
}
You can reference the existing portals for real example of how this works.
In order for this file to be executed, hasStyles must be set to true in config.json
scripts.js
This file will load and execute any JavaScript you need in EDSC. Because EDSC is a single page React application, the uses of this file are limited. But, you can use it to pre-load and second version of your logo to be used when the user hovers over the image. To do this refer to https://github.com/nasa/earthdata-search/tree/master/portals/ornldaac/scripts.js and https://github.com/nasa/earthdata-search/tree/master/portals/ornldaac/styles.scss.
In order for this file to be executed, hasScripts must be set to true in config.json
...
Incorporating Changes into Earthdata Search
...
Overview
Content Tools