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

• OpenLayers
  • Geographic (EPSG:4326)
  • Arctic (EPSG:3413)
  • Antarctic (EPSG:3031)
  • Web Mercator (EPSG:3857)
  • Rolling Seven Day Slider
  • Vector Tile Basic Use
  • Vector Tile feature interactions
  • Vector Tile Using Mapbox Style JSON
• Leaflet
  • Geographic (EPSG:4326)
  • Arctic (EPSG:3413)
  • Antarctic (EPSG:3031)
  • Web Mercator (EPSG:3857)
  • Rolling Seven Day Slider
• Cesium
  • Web Mercator (EPSG:3857)
  • Geographic (EPSG:4326)
  • Time Slider
  • Demonstration of GIBS Layers
• Mapbox GL
  • Web Mercator (EPSG:3857)
• Maplibre GL
  • Web Mercator (EPSG:3857)
• Bing
  • Web Mercator (EPSG:3857)
• Google Maps
  • Web Mercator (EPSG:3857)

Clone the repository, then:

npm install
npm start

or for hot-reload

npm install
npm run dev

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

Most examples show a single layer. Visit the GIBS Visualization Product Catalog 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.

These examples use OpenLayers version 7.2.2.

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

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.

This example uses Leaflet version 1.9.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: Leaflet/Leaflet#3575

This example uses Cesium version 1.102.

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

This example uses Mapbox GL version 1.13.3.

This example uses MapLibre GL version 2.4.0.

This example uses the Bing Maps Control, version 8.

Bing requires and API key. The key should be inserted here

This example uses the Google Maps API, version 3.

Google Maps requires an API key. The key should be inserted here

In order to run the DDV examples (one for openlayers, two for leaflet), a connection must be created to the Titiler server, and to a pgstac STAC database. To spin up the necessary docker containers, clone the Titiler.PgStac repository and follow the installation instructions detailed on the README. The two containers of importance are the database (container named stac-db) and the tiler (tiler-pgstac).

To download and prepare the data necessary to demonstrate this wrapper, download this repository, and follow the instructions documented in the titiler-pgstac-demo/ingest/1x1 README.md.

After the data has been downloaded, open the docker-compose.yml file in the root of the Titiler-PgSTAC repository. The first service should be the 'tiler' container, and there should only be one entry in volumes, './benchmark:/tmp/benchmark'. Add another entry, the path to the 'lp-prod-protected' folder of data you just downloaded and modified, followed by ':/data/lp-prod-protected'. So the full volumes object for the tiler service should look like this:

volumes:
	- ./benchmark:/tmp/benchmark
	- /{path-to-lp-prod-protected}/lp-prod-protected:/data/lp-prod-protected

To run the Wrapper examples, see the WMTS Wrapper repository.

After saving and closing the docker-compose.yml file, run the following commands in your terminal: $ docker-compose up --build database In a separate terminal window, run:

$ docker-compose up --build tiler

Connection should now be available at port 8081. Navigate to https://localhost:3001 as normal while the containers are running

Note: If you wish to run the OpenLayers Dynamic Data Visualization Wrapper example, you must download the wrapper repository and follow the instructions detailed in its README.md

Send questions or comments to [email protected]