[+] Help >> Use ORNL DAAC OGC Map Widget

Use ORNL DAAC OGC Map Widget


Demonstration 1: Simplest Map Widget


Demonstration 2: Fully Configured Map Widget


Demonstration 3: Map Widget with Multiple WMS Layers



Demonstration 1: Simplest Map Widget


The above ORNL DAAC WMS Viewer widget displays an dynamic map for Land Cover and Vegetation Map of Arctic National Wildlife Refuge. With the simplest configuration, users can double click to zoom in, pan the map, and use mouse wheel to zoom in/out the map interactively.


Javascript Code:
  var widget1 = new SDAT.MapWidget(
    'mapdiv1',
    { layers: ["1384_1"] },
    { bTitle: false },
    { bNavigator: false }
  );



Demonstration 2: Fully Configured Map Widget


The ORNL DAAC WMS Viewer widget can be configured to include title, different background layers (including Google maps), navigation tools, layer opacity slider, layer switcher, scale bar, and time step selector (if a layer contains multiple time steps).


Javascript Code:
  var widget2 = new SDAT.MapWidget(
    'mapdiv2',
    {
      layers: ["228_1"]
    },
    {
      height: 300,
      width: 880,
      bTitle: true,
      bBorder: true,
      baseLayers: ["ROADMAP","SATELLITE","HYBRID","TERRAIN","WORLD_COUNTRIES"]
    },
    {
      bNavigator: true,
      bMousePosition: true,
      bLayerSwitcher: true,
      bScaleBar: true,
      bOpacitySlider: true,
      bTimeStep: true
    }
  );



Demonstration 3: Map Widget with Multiple WMS Layers


The above ORNL DAAC WMS Viewer widget displays two WMS layers (ISLSCP II HISTORICAL CROPLANDS COVER 1990 and HISTORICAL LAND COVER AND LAND USE 1990) over Google Physical map. Users can use the Layer Switcher to turn on/off layers.


Javascript Code:
  var widget3 = new SDAT.MapWidget(
    'mapdiv3',
    {
      layers: ["966_22","967_8"]
    },
    {
      height: 350,
      width: 880,
      bTitle: true,
      title: "NLCD (2001) and CDL (2006)",
      bBorder: true,
      baseLayers: ["TERRAIN"]
    },
    {
      bNavigator: true,
      bLayerSwitcher: true,
      bScaleBar: true,
    }
  );