Page History

...

UI Expand

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

The EOSDIS Worldview tool is based on OpenLayers and uses code similar to the above snippets.
See here for simple examples: Geographic, Web Mercator, Arctic, and Antarctic or clone them on GitHub.

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

language	js

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"});

...

UI Expand

title	ESRI iOS Client Library

The iOS client library is a native library written in Objective-C and can be incorporated into any iOS app for the iPod Touch, iPhone, and iPad. It is built upon ArcGIS's iOS client libraries, which provides a MapView and asynchronous tile loading, coupled with a custom TWMS data loader.

The library comes with a sample client to display TWMS maps and includes basic manipulations such as presenting data from arbitrary TWMS server, selecting a time-value, and map layer reordering.

Requirements

iOS 5.0+
ArcGIS iOS Client Library 2.2.1+ (Download here)

Usage

To use the library, create an AGSMapView object, either programmatically or linked from Interface Builder, and use the following code snippet as an example.

Code Block

TWMSTiledWebMapService *earthTwms = [[TWMSTiledWebMapService alloc] initWithUrl:[NSURL URLWithString:@"http://gibs.earthdata.nasa.gov/twms/epsg4326/best/twms.cgi?request=GetTileService"]];
TWMSTiledMap *aquaMap = [[earthTwms tiledMaps] valueForKey:@"MODIS AQUA tileset"];
TWMSTiledMapLayer *aquaMapLayer = [[TWMSTiledMapLayer alloc] initWithTiledMap:aquaMap];
[agsMapView addMapLayer:aquaMapLayer withName:[aquaMap name]];

Screenshots

Gallery

columns	5
exclude	787px-Twms_flex_display.png, 787px-Twms_flex_date_picker.png, 800px-Twms_ge_soto.png, 800px-Twms_ppi_demo_screen.png, 800px-Twms_ww_wms.png, 800px-Twms_ww_kml.png

Additional Documentation

The ArcGIS iOS documentation can be obtained here.

The standard iOS documentation can be viewed here.

The iOS library defines 3 classes that are used to load TWMS data:

TWMSTiledWebMapService: Instantiated for each TWMS endpoint.

TWMSTiledMap: Represents an individual map layer in the TWMS.

TWMSTiledMapLayer: A subclass of ArcGIS's map layer to show TWMS data.

TWMSTiledWebMapService

Properties

name: The name of the TWMS as defined in the GetTiledService request.

title: The title of the TWMS as defined in the GetTiledService request.

abstract: The abstract of the TWMS as defined in the GetTiledService request.

tiledMaps: A dictionary where the keys are the name of each map layer and values are the TWMSTiledMap instances.

Methods

(id)initWithUrl:(NSURL*)url: Loads the TWMS data given by the url to instantiate this class.

(NSArray*)listAllTiledMapsByName: Returns a sorted list of map layer names.

(void)setTiledMapKeyValue:(NSString*)value forTiledMapKey:(NSString*)key: Assigns variable keys for all TiledMaps in the TWMS server.

(NSDictionary*)tiledMapKeyValues: Returns a dictionary of all the keys used in all TiledMaps and the value its currently set to.

TWMSTiledMap Properties

name: The name of the layer as defined in the GetTiledService request.

title: The title of the layer as defined in the GetTiledService request.

uuid: A randomly generated unique ID for the layer.

Code Snippets

Create a new TWMSTiledWebMapService using a URL

Code Block
TWMSTiledWebMapService *earthTwms = [[TWMSTiledWebMapService alloc] initWithUrl:[NSURL URLWithString:@"http://gibs.earthdata.nasa.gov/twms/epsg4326/best/twms.cgi?request=GetTileService"]];

List all map layers in a TWMS server

Code Block
NSArray tiledMapNames = [earthTwms listAllTiledMapsByName]; for(NSString tiledMapName in tiledMapNames) { NSLog(@"%@", tiledMapName); }

Update variables for all TWMS endpoints

Code Block
[earthTwms setTiledMapKeyValue:@"2012-07-12" forTiledMapKey:@"${time}"];

Add, reorder, and remove map layers (Provided by ArcGIS's MapView class)

Code Block

AGSMapView *mapView = <the map view>;
TWMSTiledMap *tiledMap = <obtained from TWMSTiledWebMapService>;
TWMSTiledMapLayer *tiledMapLayer = [[TWMSTiledMapLayer alloc] initWithTiledMap:tiledMap];

[mapView addLayer:tiledMapLayer withName:[tiledMap uuid]];
[mapView insertMapLayer:tiledMapLayer withName:[tiledMap uuid] atIndex:<index>];
[mapView removeLayerWithName:[tiledMap uuid]];

       Set map layer transparency (Provided by iOS UIView's transparency settings)

Code Block
UIView *view = [[[mapView mapLayerViews] objectForKey:[tiledMap uuid]]; [view setAlpha:<transparency value>];

...

Versions Compared

Old Version 2

New Version 3

Key

Requirements

Sample Clients

Usage (Geographic)

Usage (Polar Stereographic)

Requirements

Usage

Screenshots

Additional Documentation

Code Snippets