Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Removed OpenLayers 2, Adobe Flash/Flex client

There are several supported map libraries available to take advantage of NASA's Global Imagery Browse Services (GIBS) via OGC Web Map Tile Service (WMTS), Tiled Web Map Service (TWMS), and KML files. Listed below is a set of map libraries, code snippets, working examples, and screen captures designed to help in building your own user interface to explore NASA's Earth imagery. Alternatively, these guidelines can also help to integrate that imagery into your existing client or to build scripts to retrieve imagery from GIBS.  Geographic Information System (GIS) users: go here for instructions.

Code Available in GitHub

In addition to the snippets below, fully-working code examples are available for OpenLayers and Leaflet in the GIBS GitHub project area.

Web-based Libraries

UI Expand
titleOpenLayers 23

OpenLayers 2 3 is an open source, web browser-based mapping library written in JavaScript. OpenLayers maps can also be viewed on mobile devices since no plugins are required to use it.

Requirements

  • The OpenLayers mapping library included in your HTML file
  • The map itself and all other layers must share the same projection (e.g., "geographic" EPSG:4326) since multiple projections are not supported in a concurrent fashion by OpenLayers.
  • A reasonably modern web browser with JavaScript enabled.

Sample Clients

See the Live Examples (including Geographic, Web MercatorArctic, and Antarcticnotes on using OpenLayer 3 with GIBS, and clone the GIBS Web Examples from GitHub to tinker with the code.  The EOSDIS Worldview tool (source) is based on OpenLayers 3, too.

UI Expand
titleLeaflet

Leaflet is an open source, web browser-based and mobile-friendly mapping library written in JavaScript.

  • The EOSDIS Worldview tool is based on OpenLayers and uses code similar to the above snippets.
  • See here for simple examples: 

    See the Live Examples (including 

    Geographic, Web MercatorArctic, and Antarctic

     or clone them on GitHub.

    Usage (Geographic)

    The following code snippets provide information for creating a basic OpenLayers-based GIBS client for imagery in the Geographic (EPSG:4326) projection.  See the info provided in the GIBS layer configuration information for details on configuring each layer. For this example, we will be using an imagery layer with a 250m resolution.

    First create a map object with a geographic (i.e., lat-lon) projection.  Note that the numZoomLevels attribute has a value of 9, based on the table above.

    Code Block
    map = new OpenLayers.Map({
        div: "map",
        projection: "EPSG:4326",
        numZoomLevels: 9,
        zoom: 2
    });

     

    Next, define service- and product-specific constants related to the map projection, resolution, and service endpoint (see here for more info):

    Code Block
    var GIBS_WMTS_GEO_ENDPOINT = "http://gibs.earthdata.nasa.gov/wmts/epsg4326/best/wmts.cgi";
    var TILEMATRIXSET_GEO_250m = "EPSG4326_250m";
    var TILEMATRIXSET_GEO_2km  = "EPSG4326_2km";

    Now create base and overlay layers for two products (more info on available products can be found here).  No style value is required for GIBS image accesses.  The isBaseLayer element should be set accordingly as to whether this is a base (true) or overlay (false) layer.  All base layers have a format of image/jpeg and all overlay layers have a format of image/png.

    The maxResolution attribute has a value of 0.5625, based on the layer configuration information.  The serverResolution element is a listing of resolutions that are provided by the GIBS server (more info here).  The resolutions element is a listing of resolutions that should be provided to the end user (more info here).  If additional resolutions are included in the resolutions element that are not in the serverResolutions element, then OpenLayers will perform client-side "overzooming."

    Code Block
    // Create base layers
    var layerModisTerraTrueColor = new OpenLayers.Layer.WMTS({
    	name: "Terra / MODIS Corrected Reflectance (True Color), 2012-06-08",
    	url: GIBS_WMTS_GEO_ENDPOINT,
    	layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
    	matrixSet: TILEMATRIXSET_GEO_250m,
    	format: "image/jpeg",
    	style: "",
    	transitionEffect: "resize",
    	projection: "EPSG:4326",
    	numZoomLevels: 9,
    	maxResolution: 0.5625,
        resolutions: [0.5625, 0.28125, 0.140625, 0.0703125, 0.03515625, 0.017578125, 0.0087890625, 0.00439453125, 0.002197265625], 
     serverResolutions: [0.5625, 0.28125, 0.140625, 0.0703125, 0.03515625, 0.017578125, 0.0087890625, 0.00439453125, 0.002197265625],
    	'tileSize': new OpenLayers.Size(512, 512),
    	isBaseLayer: true
    });
    
    // Create overlays
    var layerModisAerosolOpticalDepth = new OpenLayers.Layer.WMTS({
    	name: "Terra / MODIS Aerosol Optical Depth, 2012-06-08",
    	url: GIBS_WMTS_GEO_ENDPOINT,
    	layer: "MODIS_Terra_Aerosol",
    	matrixSet: TILEMATRIXSET_GEO_2km,
    	format: "image/png",
    	style: "",
    	transitionEffect: "resize",
    	projection: "EPSG:4326",
    	numZoomLevels: 9,
    	maxResolution: 0.5625,
        resolutions: [0.5625, 0.28125, 0.140625, 0.0703125, 0.03515625, 0.017578125, 0.0087890625, 0.00439453125, 0.002197265625],
        serverResolutions: [0.5625, 0.28125, 0.140625, 0.0703125, 0.03515625, 0.017578125],
    	'tileSize': new OpenLayers.Size(512, 512),
    	isBaseLayer: false,
    	visibility: false
    });
    
    // The "time" parameter isn't being included in tile requests to the server
    // in the current version of OpenLayers (2.12);  need to use this hack
    // to force the inclusion of the time parameter.
    //
    // If the time parameter is omitted, the current (UTC) day is retrieved
    // from the server
    layerModisTerraTrueColor.mergeNewParams({time:"2012-06-08"});
    layerModisAerosolOpticalDepth.mergeNewParams({time:"2012-06-08"});

    Finally, add the layers to the map, add a layer switcher, and set the view extent:

    Code Block
    // Add layers to the map
    map.addLayers([layerModisTerraTrueColor, layerModisTerra721,
    	layerModisAerosolOpticalDepth]);
    	
    // Add layer switcher control
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    
    // Set global view
    var extent = "-146.0, -94.0, 146.0, 94.0";
    var OLExtent = new OpenLayers.Bounds.fromString(extent, false).transform(
    		new OpenLayers.Projection("EPSG:4326"),
    		map.getProjectionObject());
    map.zoomToExtent(OLExtent, true);

    Usage (Polar Stereographic)

    To use GIBS imagery in an Arctic Polar Stereographic (EPSG:3413) or Antarctic Polar Stereographic (EPSG:3031) projection, follow the same instructions as geographic but change the TileMatrixSets, number of zoom levels, and resolution parameters to match the polar projections as listed in the layer configuration info.  Please also note that only a subset of layers are available in Arctic and Antarctic compared to geographic.

    Note that static variables are shown below for both the Arctic and Antarctic projections, but only Arctic layers are created.

    Code Block
    languagejs
    var GIBS_WMTS_ARCTIC_ENDPOINT    = "http://gibs.earthdata.nasa.gov/wmts/epsg3413/best/wmts.cgi";
    var GIBS_WMTS_ANTARCTIC_ENDPOINT = "http://gibs.earthdata.nasa.gov/wmts/epsg3031/best/wmts.cgi";
     
    var TILEMATRIXSET_ARCTIC_250m = "EPSG3413_250m";
    var TILEMATRIXSET_ARCTIC_500m = "EPSG3413_500m";
    
    // The following are true for both Arctic and Antarctic
    var maxPolarExtent = [-4194304, -4194304, 4194304, 4194304];
     
    // Create base layers
    var layerModisTerraTrueColor = new OpenLayers.Layer.WMTS({
    	name: "Terra / MODIS Corrected Reflectance (True Color), 2012-06-08",
    	url: GIBS_WMTS_ARCTIC_ENDPOINT,
    	layer: "MODIS_Terra_CorrectedReflectance_TrueColor",
    	matrixSet: TILEMATRIXSET_ARCTIC_250m,
    	format: "image/jpeg",
    	style: "",
    	transitionEffect: "resize",
    	projection: "EPSG:3413",
    	numZoomLevels: 6,
    	maxResolution: 8192.0,
        resolutions: [8192.0, 4096.0, 2048.0, 1024.0, 512.0, 256.0],
        serverResolutions: [8192.0, 4096.0, 2048.0, 1024.0, 512.0, 256.0],
    	'tileSize': new OpenLayers.Size(512, 512),
    	isBaseLayer: true
    });
    
    // Create overlays
    var layerModisSnowCover = new OpenLayers.Layer.WMTS({
    	name: "Terra / MODIS Snow Cover, 2012-06-08",
    	url: GIBS_WMTS_ARCTIC_ENDPOINT,
    	layer: "MODIS_Terra_Snow_Cover",
    	matrixSet: TILEMATRIXSET_ARCTIC_500m,
    	format: "image/png",
    	style: "",
    	transitionEffect: "resize",
    	projection: "EPSG:3413",
    	numZoomLevels: 6,
    	maxResolution: 8192.0,
        resolutions: [8192.0, 4096.0, 2048.0, 1024.0, 512.0, 256.0],
        serverResolutions: [8192.0, 4096.0, 2048.0, 1024.0, 512.0],
    	'tileSize': new OpenLayers.Size(512, 512),
    	isBaseLayer: false,
    	visibility: false
    });
    
    // The "time" parameter isn't being included in tile requests to the server
    // in the current version of OpenLayers (2.12);  need to use this hack
    // to force the inclusion of the time parameter.
    //
    // If the time parameter is omitted, the current (UTC) day is retrieved
    // from the server
    layerModisTerraTrueColor.mergeNewParams({time:"2012-06-08"});
    layerModisSnowCover.mergeNewParams({time:"2012-06-08"});
    UI Expand
    titleOpenLayers 3

    OpenLayers 3 is an open source, web browser-based mapping library written in JavaScript. OpenLayers maps can also be viewed on mobile devices since no plugins are required to use it.

    See the Live Examples (including Geographic, Web MercatorArctic, and Antarcticnotes on using OpenLayer 3 with GIBS, and clone the GIBS Web Examples from GitHub to tinker with the code.  For details on how to configure specific layers available from GIBS, follow the relevant instructions included in the GIBS Layer Configuration Information.

    UI Expand
    titleLeaflet

    Leaflet is an open source, web browser-based and mobile-friendly mapping library written in JavaScript.

    See the Live Examples (including Geographic, Web MercatorArctic, and Antarctic), notes on using Leaflet with GIBS, and clone the GIBS Web Examples from GitHub to tinker with the code.  For details on how to configure specific layers available from GIBS, follow the relevant instructions included in the GIBS Layer Configuration Information.

    UI Expand
    titleGoogle Maps

    Maps created with the Google Maps API, version 3 can include layers from GIBS. See the GIBS Web Examples for sample code.  For details on how to configure specific layers available from GIBS, follow the relevant instructions included in the  GIBS Layer Configuration Information .

    UI Expand
    titleBing Maps

    Maps created with the Bing Maps AJAX Control, version 7 can include layers from GIBS. See the GIBS Web Examples for sample code.  For details on how to configure specific layers available from GIBS, follow the relevant instructions included in the  GIBS Layer Configuration Information .

    UI Expand
    titleGoogle Earth (browser plugin)

    Google Earth (Plugin) is a virtual globe that can be embedded on a webpage and manipulated through Javascript. It utilizes the KML interface of TWMS to retrieve data.

    Requirements

    Limitations

    Google Earth does not have a convenient method of layering maps on top of each other. One can achieve the effect by changing the elevation that the map layers are displayed at, although that sometimes can introduct unwanted artifacts on the display.

    Usage

    The Javascript uses a callback function to load data from a URL. The list of available products can be found here.

    Code Block
    var url = "http://gibs.earthdata.nasa.gov/twms/epsg4326/best/kmlgen.cgi?layers=MODIS_Terra_CorrectedReflectance_TrueColor&time=2012-07-12";
    google.earth.fetchKml(ge, url, function(object){
    	if (!object) {
    		// wrap alerts in API callbacks and event handlers
    		// in a setTimeout to prevent deadlock in some browsers
    		setTimeout(function() {
    			displayDialog('Bad or null KML.');
    		}, 0);
    		return;
    	}
    
    	ge.getFeatures().appendChild(object);
    	object.setVisibility(true);
    	//object.setOpacity(alpha); // use to change transparency of layer
    });
    }

     

    Screenshots

    Image Removed

    GIBS data displayed in the Google Earth Plugin (As used in PO.DAAC's State of the Ocean when "MODIS True Color" layers are selected)

    Additional Documentation

    UI Expand
    titleAdobe Flash/Flex Client Library

    The Flash/Flex client library is a native Flash client written in ActionScript. It can be embedded into Flash applications on web pages as well as an embedded application that utilizes the Adobe Air framework. It is built upon ArcGIS's Flex API libraries to load tiles and present images with a custom TWMS data loader.

    The library comes with a sample HTML page that presents a simple Flash client which can load layers from arbitrary TWMS servers and allow users to select time-values.

    Requirements

    Usage

    To use the library, include the pre-compiled Flash library and use the following code snippet in the .mxml file.

    Code Block
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    			   xmlns:s="library://ns.adobe.com/flex/spark"
    			   xmlns:mx="library://ns.adobe.com/flex/mx"
    			   xmlns:esri="http://www.esri.com/2008/ags"
    			   xmlns:layers="gov.nasa.jpl.common.gui.map.layers.*"
    	<esri:Map id="map" logoVisible="false" scaleBarVisible="false">
    	<layers:TiledWMSLayer url="http://gibs.earthdata.nasa.gov/twms/epsg4326/best/twms.cgi" visibleLayer="MODIS TERRA tileset"/>
    </esri:Map>
    </s:Application>

    Screenshots

    Gallery
    include787px-Twms_flex_display.png, 787px-Twms_flex_date_picker.png

    Additional Documentation

    The Flex API for ArcGIS can be obtained here.

    Code Snippets

    Adding a map layer (Provided by ArcGIS's API)

    Code Block
    var tiledWMSLayer:TiledWMSLayer = new TiledWMSLayer();
    tiledWMSLayer.url = <url>;
    tiledWMSLayer.visibleLayer = String(<map name>);
    tiledWMSLayer.dateString = <date>;
    map.addLayer(tiledWMSLayer);

    ), notes on using Leaflet with GIBS, and clone the GIBS Web Examples from GitHub to tinker with the code.  For details on how to configure specific layers available from GIBS, follow the relevant instructions included in the GIBS Layer Configuration Information.

    UI Expand
    titleGoogle Maps

    Maps created with the Google Maps API, version 3 can include layers from GIBS. See the GIBS Web Examples for sample code.  For details on how to configure specific layers available from GIBS, follow the relevant instructions included in the  GIBS Layer Configuration Information .

    UI Expand
    titleBing Maps

    Maps created with the Bing Maps AJAX Control, version 7 can include layers from GIBS. See the GIBS Web Examples for sample code.  For details on how to configure specific layers available from GIBS, follow the relevant instructions included in the  GIBS Layer Configuration Information .

    UI Expand
    titleGoogle Earth (browser plugin)

    Google Earth (Plugin) is a virtual globe that can be embedded on a webpage and manipulated through Javascript. It utilizes the KML interface of TWMS to retrieve data.

    Requirements

    Limitations

    Google Earth does not have a convenient method of layering maps on top of each other. One can achieve the effect by changing the elevation that the map layers are displayed at, although that sometimes can introduct unwanted artifacts on the display.

    Usage

    The Javascript uses a callback function to load data from a URL. The list of available products can be found here.

    Code Block
    var url = "http://gibs.earthdata.nasa.gov/twms/epsg4326/best/kmlgen.cgi?layers=MODIS_Terra_CorrectedReflectance_TrueColor&time=2012-07-12";
    google.earth.fetchKml(ge, url, function(object){
    	if (!object) {
    		// wrap alerts in API callbacks and event handlers
    		// in a setTimeout to prevent deadlock in some browsers
    		setTimeout(function() {
    			displayDialog('Bad or null KML.');
    		}, 0);
    		return;
    	}
    
    	ge.getFeatures().appendChild(object);
    	object.setVisibility(true);
    	//object.setOpacity(alpha); // use to change transparency of layer
    });
    }

     

    Screenshots

    Image Added

    GIBS data displayed in the Google Earth Plugin (As used in PO.DAAC's State of the Ocean when "MODIS True Color" layers are selected)

    Additional Documentation

     

    Sample Clients

    Desktop Application Libraries

    UI Expand
    titleNASA World Wind

    World Wind is a multi-platform virtual globe developed by NASA that runs in Java. It can load GIBS data through either the KML interface or the TWMS interface.

    Requirements

    Usage (KML)

    To run the World Wind client with GIBS KML capabilities, load the "KML Viewer" demo application from either the standalone client or the online demo. To load a specific layer, select File | Open URL... and enter a URL for the layer in this format: http://<url to kmlgen.cgi>?layers=<layername>&time=<time> for example,  http://gibs.earthdata.nasa.gov/twms/epsg4326/best/kmlgen.cgi?layers=MODIS_Terra_CorrectedReflectance_TrueColor&time=2012-06-21

    To enable time adjustment on a particular layer, use the following URL parameter: time=R10/<date>/P1D for example, http://gibs.earthdata.nasa.gov/twms/epsg4326/best/kmlgen.cgi?layers=MODIS_Terra_CorrectedReflectance_TrueColor&time=R10/2012-05-26/P1D

    Additional documentation is available here.

    Limitations: The name of the layer has to be known prior to entering the URL. The list of available layers can be found here.

    Usage (TWMS)

    To run the World Wind client with TWMS capabilities, load the WMS Layer Manager demo application from either the standalone client or the online demo. In the layers menu, add the TWMS endpoint. This will load the list of layers available from TWMS and selecting a layer will allow it to be shown on the globe.

    Limitations: World Wind will continue to zoom and try to load images even if they're beyond the depth of the highest resolution tile. When this happens, the images will go blank. In addition, this interface does not allow the selection of variables such as time.

    Screenshots

    Gallery
    include800px-Twms_ww_wms.png, 800px-Twms_ww_kml.png
    columns2

    UI Expand
    titleGoogle Earth (Desktop)

    See the Google Earth section on the GIBS GIS Usage page.

    Mobile App Libraries

    UI Expand
    titleESRI iOS Client Library

    The iOS client library is a native library written in Objective-C and can be incorporated into any iOS app for the iPod Touch, iPhone, and iPad. It is built upon ArcGIS's iOS client libraries, which provides a MapView and asynchronous tile loading, coupled with a custom TWMS data loader.

    The library comes with a sample client to display TWMS maps and includes basic manipulations such as presenting data from arbitrary TWMS server, selecting a time-value, and map layer reordering.

    Requirements

    • iOS 5.0+
    • ArcGIS iOS Client Library 2.2.1+ (Download here)

    Usage

    To use the library, create an AGSMapView object, either programmatically or linked from Interface Builder, and use the following code snippet as an example.

    Code Block
    TWMSTiledWebMapService *earthTwms = [[TWMSTiledWebMapService alloc] initWithUrl:[NSURL URLWithString:@"http://gibs.earthdata.nasa.gov/twms/epsg4326/best/twms.cgi?request=GetTileService"]];
    TWMSTiledMap *aquaMap = [[earthTwms tiledMaps] valueForKey:@"MODIS AQUA tileset"];
    TWMSTiledMapLayer *aquaMapLayer = [[TWMSTiledMapLayer alloc] initWithTiledMap:aquaMap];
    [agsMapView addMapLayer:aquaMapLayer withName:[aquaMap name]];

    Screenshots

    Gallery
    columns5
    exclude787px-Twms_flex_display.png, 787px-Twms_flex_date_picker.png, 800px-Twms_ge_soto.png, 800px-Twms_ppi_demo_screen.png, 800px-Twms_ww_wms.png, 800px-Twms_ww_kml.png

    Additional Documentation

    The ArcGIS iOS documentation can be obtained here.

    The standard iOS documentation can be viewed here.

    The iOS library defines 3 classes that are used to load TWMS data:

    TWMSTiledWebMapService: Instantiated for each TWMS endpoint.

    TWMSTiledMap: Represents an individual map layer in the TWMS.

    TWMSTiledMapLayer: A subclass of ArcGIS's map layer to show TWMS data.

    TWMSTiledWebMapService

    Properties

    name: The name of the TWMS as defined in the GetTiledService request.

    title: The title of the TWMS as defined in the GetTiledService request.

    abstract: The abstract of the TWMS as defined in the GetTiledService request.

    tiledMaps: A dictionary where the keys are the name of each map layer and values are the TWMSTiledMap instances.

    Methods

    (id)initWithUrl:(NSURL*)url: Loads the TWMS data given by the url to instantiate this class.

    (NSArray*)listAllTiledMapsByName: Returns a sorted list of map layer names.

    (void)setTiledMapKeyValue:(NSString*)value forTiledMapKey:(NSString*)key: Assigns variable keys for all TiledMaps in the TWMS server.

    (NSDictionary*)tiledMapKeyValues: Returns a dictionary of all the keys used in all TiledMaps and the value its currently set to.

    TWMSTiledMap  Properties

    name: The name of the layer as defined in the GetTiledService request.

    title: The title of the layer as defined in the GetTiledService request.

    uuid: A randomly generated unique ID for the layer.

    Code Snippets

    Create a new TWMSTiledWebMapService using a URL

     

    Code Block
    TWMSTiledWebMapService *earthTwms = [[TWMSTiledWebMapService alloc] initWithUrl:[NSURL URLWithString:@"http://gibs.earthdata.nasa.gov/twms/epsg4326/best/twms.cgi?request=GetTileService"]];
    

    List all map layers in a TWMS server

    Code Block
    NSArray *tiledMapNames = [earthTwms listAllTiledMapsByName];
    for(NSString *tiledMapName in tiledMapNames) {
    	NSLog(@"%@", tiledMapName);
    }

    Update variables for all TWMS endpoints

    Code Block
    [earthTwms setTiledMapKeyValue:@"2012-07-12" forTiledMapKey:@"${time}"];

    Add, reorder, and remove map layers (Provided by ArcGIS's MapView class)

    Code Block
    AGSMapView *mapView = <the map view>;
    TWMSTiledMap *tiledMap = <obtained from TWMSTiledWebMapService>;
    TWMSTiledMapLayer *tiledMapLayer = [[TWMSTiledMapLayer alloc] initWithTiledMap:tiledMap];
    
    [mapView addLayer:tiledMapLayer withName:[tiledMap uuid]];
    [mapView insertMapLayer:tiledMapLayer withName:[tiledMap uuid] atIndex:<index>];
    [mapView removeLayerWithName:[tiledMap uuid]];

     

           Set map layer transparency (Provided by iOS UIView's transparency settings) 
        
    Code Block
    UIView *view = [[[mapView mapLayerViews] objectForKey:[tiledMap uuid]];
    [view setAlpha:<transparency value>];

    Script-level Access

    UI Expand
    titleGDAL

    See the GIBS API documentation for script-level access to GIBS via GDAL.

    Hide comments