Skip to main content
About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Time Average Map

<terra-time-average-map> | TerraTimeAverageMap
Since ?

Examples

Render of geotiff data from time average map service.

Loading…please wait

Please login to view this plot



Loading…please wait
<terra-login style="width: 100%">
    <span slot="loading">Loading...please wait</span>

    <terra-time-average-map slot="logged-in"
        collection="M2T1NXAER_5_12_4"
        variable="BCCMASS"
        start-date="01/01/2009"
        end-date="01/05/2009"
        location="62,5,95,40"
    ></terra-time-average-map>

    <p slot="logged-out">Please login to view this plot</p>
</terra-login><br /><br />
<terra-login style="width: 100%">
    <span slot="loading">Loading...please wait</span>

    <terra-time-average-map slot="logged-in"
        collection="GLDAS_CLSM025_D_2_0"
        variable="Qg_tavg"
        start-date="01/01/2009"
        end-date="02/01/2009"
        location="-125.59,30.75,-112.14,43.46"
    ></terra-time-average-map>
</terra-login>

<script>
    document.querySelector('terra-time-average-map').addEventListener('terra-time-average-map-data-change', (e) => {
        console.log('caught! ', e)
    })

    document.querySelector('terra-time-average-map').addEventListener('terra-plot-options-change', (e) => {
        console.log('caught! ', e)
    })
</script>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/time-average-map/time-average-map.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/time-average-map/time-average-map.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/time-average-map/time-average-map.js';

To import this component as a React component:

import TerraTimeAverageMap from '@nasa-terra/components/dist/react/time-average-map';

Properties

Name Description Reflects Type Default
_fetchVariableTask anytime the collection or variable changes, we’ll fetch the variable from the catalog to get all of it’s metadata - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.