Need help with gibs-web-examples?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

nasa-gibs
144 Stars 56 Forks Other 237 Commits 2 Opened issues

Description

Examples of using GIBS with various web mapping libraries

Services available

!
?

Need anything else?

Contributors list

# 150,442
Shell
satelli...
earth-s...
C
186 commits
# 183,046
CSS
HTML
Shell
satelli...
14 commits
# 118,260
CSS
HTML
Shell
satelli...
10 commits
# 265,169
Shell
satelli...
earth-s...
C
5 commits
# 749
GitHub
rust-la...
wechat-...
query-l...
2 commits
# 705,544
CSS
HTML
1 commit

gibs-web-examples

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

Live Examples

Overview

Clone the repository, then:

npm install
npm start

Navigate your browser to http://localhost:3001.

Most 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.

Some of the mapping libraries will attempt to fetch tiles outside the boundaries of the tile matrix. GIBS returns error codes when these tile requests are made.

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

OpenLayers

These examples use OpenLayers version 6.4.3.

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

Mapbox Vector Tile (MVT) Examples

Mapbox Vector Tiles are available for some of the GIBS vector datasets. These Openlayers examples show how to style vector tiles using Openlayers styling classes, how to style vector tiles with the Mapbox Styles that are provided by GIBS in the getCapabilities, and how to visualize feature data through map interactions.

Leaflet

This example uses Leaflet version 1.3.3.

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

Gaps can sometimes be seen between the map tiles. Use the workaround found here: https://github.com/Leaflet/Leaflet/issues/3575

Cesium

This example uses Cesium version 1.47.

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

Mapbox GL

This example uses Mapbox GL version 0.47.

Bing

This example uses the Bing Maps Control, version 8.

Google Maps

This example uses the Google Maps API, version 3.

Questions

Send questions or comments to [email protected]

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.