openlayers/examples/image-layer.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3       <title>OpenLayers Image Layer Example</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         p.caption {
   8             width: 512px;
   9         }
  10     </style>
  11     <script src="../lib/Firebug/firebug.js"></script>
  12     <script src="../lib/OpenLayers.js"></script>
  13     <script type="text/javascript">
  14         var map;
  15         function init(){
  16             map = new OpenLayers.Map('map');
  17
  18             var options = {numZoomLevels: 3};
  19
  20             var graphic = new OpenLayers.Layer.Image(
  21                 'City Lights',
  22                 'http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif',
  23                 new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
  24                 new OpenLayers.Size(580, 288),
  25                 options
  26             );
  27
  28             graphic.events.on({
  29                 loadstart: function() {
  30                     OpenLayers.Console.log("loadstart");
  31                 },
  32                 loadend: function() {
  33                     OpenLayers.Console.log("loadend");
  34                 }
  35             });
  36
  37             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
  38                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7",
  39                 {layers: "landsat7"}, options);
  40
  41             map.addLayers([graphic, jpl_wms]);
  42             map.addControl(new OpenLayers.Control.LayerSwitcher());
  43             map.zoomToMaxExtent();
  44         }
  45     </script>
  46   </head>
  47   <body onload="init()">
  48     <h1 id="title">Image Layer Example</h1>
  49
  50     <div id="tags"></div>
  51
  52     <p id="shortdesc">
  53         Demonstrate a single non-tiled image as a selectable base layer.
  54     </p>
  55
  56     <div id="map" class="smallmap"></div>
  57
  58     <div id="docs">
  59         <p class="caption">
  60             The "City Lights" layer above is created from a single web accessible
  61             image.  If you construct it without any resolution related options,
  62             the layer will be given a single resolution based on the extent/size.
  63             Otherwise, it behaves much like a regular layer.  This is primarily
  64             intended to be used in an overview map - where another layer type
  65             might not make a good overview.
  66         </p>
  67     </div>
  68   </body>
  69 </html>