Versions Compared

Old Version 3

changes.mady.by.user user-c667d

Saved on

compared with

New Version 4

changes.mady.by.user user-92088

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

UI Expand
titleOpenLayers 2

OpenLayers 2 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

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, layerAirsDustScore]);
	
// 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"});

...