gibs-web-examples

This project shows how to use GIBS as a tile source for OpenLayers, Leaflet, Cesium, Bing, and Google Maps

Live Examples

Overview

Clone the repository and open the index.html file in your browser.

All examples show a single layer. Visit the GIBS Available Imagery Products for parameters needed to display other layers.

The WMTS standard does not provide a way to select a specific time or date for a layer. GIBS has implemented this feature in the following way:

WMTS KVP: Use the TIME parameter to select a day in YYYY-MM-DD format.
WMTS REST: Add the day in YYYY-MM-DD format between style name and the tile matrix set name

See the "Rolling Seven Day Slider" examples for more information.

The Web Mercator endpoints return a blank map at zoom level zero due to a bug in the tiling software. This issue will be fixed sometime in the future.

Worldview is a web application that uses GIBS as its primary image source.

OpenLayers

This example uses OpenLayers version 3.4.0.

If geometry transformations are required using coordinates in the polar systems, proj4js, version 2, must be included. This example uses proj4js version 2.3.3. This is not required to simply display the map.

As of this version of OpenLayers, the canvas renderer does not work when using ol.source.XYZ with a tile size that is not 256. In this case, use ol.tilegrid.WMTS instead.

In ol.tilegrid.WMTS, there no way to add additional parameters (such as TIME) as was possible in OpenLayers 2. The parameter can simply be added to the end of the base URL string.

Leaflet

This example uses Leaflet version 0.7.3.

To properly support the polar projections, the Proj4Leaflet plugin must be used. This example uses Proj4Leaflet version 0.7.0.

The version of proj4js shipped with Proj4Leaflet is too old and must be replaced with version 2.0.0.

GIBS now returns error codes if tiles are requested outside the tile matrix boundaries. This can cause Leaflet to throw exceptions with unexpected behavior. For EPSG:4326 and EPSG:3857, Leaflet will attempt to fetch out-of-bound tiles if the extents are set to the exact values defined for the projection. Slightly reducing the extent will solve this problem (e.g., [-179.999, -89.999...]). For EPSG:3031 and EPSG:3431, it is not possible to restrict the extents as Leaflet assumes geographic points and it now necessary to monkey patch the tile routine. Improvements to projection handling is scheduled for Leaflet 0.8.

See: kartena/Proj4Leaflet#62

Cesium

This example uses Cesium version 1.9.

Use this GeographicTilingScheme when accessing the EPSG:4326 GIBS endpoint.

The lighting and terrain example uses the STK World Terrain data set.

Bing

This example uses the Bing AJAX Control, version 7.

Excessive flickering is visible when using Google Chrome.

There is no straightforward way to restrict the zoom levels. GIBS returns a "Bad Request" response when over-zoomed for a layer.

See: http://stackoverflow.com/questions/4327665/restrict-the-min-max-zoom-on-a-bing-map-with-v7-of-the-ajax-control

Google Maps

This example uses the Google Maps API, version 3.

OpenLayers 2

This example uses OpenLayers version 2.13.1.

Due to a bug in OpenLayers, shearing in the map may occur when using Internet Explorer.

If geometry transformations are required using coordinates in the polar systems, proj4js, version 1, must be included. This example uses proj4js version 1.1.0. This is not required to simply display the map.

Questions

Send questions or comments to support@earthdata.nasa.gov

sunank200/gibs-web-examples