openlayers/examples/wmc.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   4     <link rel="stylesheet" href="style.css" type="text/css" />
   5     <style type="text/css">
   6         #wmc {
   7             width: 90%;
   8             height: 300px;
   9         }
  10     </style>
  11     <script src="../lib/Firebug/firebug.js"></script>
  12     <script src="../lib/OpenLayers.js"></script>
  13     <script type="text/javascript">
  14
  15         // no pink please
  16         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
  17         OpenLayers.Util.onImageLoadErrorColor = "transparent";
  18
  19         var format = new OpenLayers.Format.WMC({'layerOptions': {buffer: 0}});
  20         var doc, context, map;
  21
  22         function init() {
  23             var options = {
  24                 maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55)
  25             };
  26             map = new OpenLayers.Map("map", options);
  27
  28             var jpl = new OpenLayers.Layer.WMS(
  29                 "NASA Global Mosaic",
  30                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
  31                 {layers: "landsat7"},
  32                 {
  33                     maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55),
  34                     maxResolution: 0.1,
  35                     numZoomLevels: 4,
  36                     minResolution: 0.02
  37                 }
  38             );
  39
  40             var vmap = new OpenLayers.Layer.WMS(
  41                 "OpenLayers WMS",
  42                 "http://labs.metacarta.com/wms/vmap0",
  43                 {layers: 'basic'},
  44                 {
  45                     maxExtent: new OpenLayers.Bounds(-130, 14, -60, 55),
  46                     maxResolution: 0.1,
  47                     numZoomLevels: 4,
  48                     minResolution: 0.02
  49                 }
  50             );
  51
  52             var roads = new OpenLayers.Layer.WMS(
  53                 "Transportation Network",
  54                 "http://lioapp.lrc.gov.on.ca/cubeserv/cubeserv.pl",
  55                 {layers: "na_road:CCRS", transparent: "TRUE"},
  56                 {
  57                     isBaseLayer: false,
  58                     maxExtent: new OpenLayers.Bounds(
  59                         -166.532, 4.05046, -0.206818, 70.287
  60                     ),
  61                     displayInLayerSwitcher: false,
  62                     opacity: 0.6,
  63                     minScale: 32000000,
  64                     numZoomLevels: 4,
  65                     maxScale: 6200000
  66                 }
  67             );
  68
  69             var nexrad = new OpenLayers.Layer.WMS(
  70                 "Radar 3:1",
  71                 "http://columbo.nrlssc.navy.mil/ogcwms/servlet/WMSServlet/AccuWeather_Maps.wms",
  72                 {layers: "3:1", transparent: "TRUE"},
  73                 {
  74                     isBaseLayer: false,
  75                     maxExtent: new OpenLayers.Bounds(
  76                         -131.029495239, 14.5628967285,
  77                         -61.0295028687, 54.562896728
  78                     ),
  79                     opacity: 0.8,
  80                     singleTile: true,
  81                     maxResolution: 0.1,
  82                     numZoomLevels: 4,
  83                     minResolution: 0.02
  84                 }
  85             );
  86
  87             map.addLayers([jpl, vmap, roads, nexrad]);
  88             map.addControl(new OpenLayers.Control.LayerSwitcher());
  89             map.setCenter(new OpenLayers.LonLat(-95, 34.5), 1);
  90         };
  91
  92         function readWMC(merge) {
  93             var text = document.getElementById("wmc").value;
  94
  95             if(merge) {
  96                 try {
  97                     map = format.read(text, {map: map});
  98                 } catch(err) {
  99                     document.getElementById("wmc").value = err;
 100                 }
 101             } else {
 102                 map.destroy();
 103                 try {
 104                     map = format.read(text, {map: "map"});
 105                     map.addControl(new OpenLayers.Control.LayerSwitcher());
 106                 } catch(err) {
 107                     document.getElementById("wmc").value = err;
 108                 }
 109             }
 110         }
 111
 112         function writeWMC(merge) {
 113             try {
 114                 var text = format.write(map);
 115                 document.getElementById("wmc").value = text;
 116             } catch(err) {
 117                 document.getElementById("wmc").value = err;
 118             }
 119         }
 120
 121     </script>
 122     </head>
 123     <body onload="init()">
 124     <h1 id="title">WMC Example</h1>
 125
 126     <div id="tags">
 127     </div>
 128     <p id="shortdesc">
 129            Shows parsing of Web Map Context documents.
 130     </p>
 131     <div id="map" class="smallmap"></div>
 132         <button onclick="writeWMC();">write</button>
 133         <button onclick="readWMC();">read as new map</button>
 134         <button onclick="readWMC(true);">read and merge</button>
 135         <textarea id="wmc">paste WMC doc here</textarea>
 136     <div id="docs">
 137         This is an example of parsing WMC documents. <br />
 138         The format class has a layerOptions property, which can be used
 139         to control the default options of the layer when it is created
 140         by the parser.
 141     </div>
 142   </body>
 143 </html>
 144
 145
 146
 147