Code Monkey home page Code Monkey logo

gibs-web-examples's Introduction

gibs-web-examples

Build Status

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 [email protected]

gibs-web-examples's People

Contributors

mike-mcgann avatar rboller avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.