openlayers/examples/tms.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers Tiled Map Service 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     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var lon = 5;
   9         var lat = 40;
  10         var zoom = 5;
  11         var map, layer;
  12
  13         function init(){
  14             map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} );
  15             layer = new OpenLayers.Layer.TMS( "TMS",
  16                     "http://labs.metacarta.com/wms-c/Basic.py/", {layername: 'basic', type:'png'} );
  17             map.addLayer(layer);
  18             map.addControl(new OpenLayers.Control.LayerSwitcher());
  19             map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
  20         }
  21         function addTMS() {
  22             l = new OpenLayers.Layer.TMS(
  23                 OpenLayers.Util.getElement('layer').value,
  24                 OpenLayers.Util.getElement('url').value,
  25                 {
  26                     'layername': OpenLayers.Util.getElement('layer').value,
  27                     'type': OpenLayers.Util.getElement('type').value
  28             });
  29             map.addLayer(l);
  30             map.setBaseLayer(l);
  31         }
  32     </script>
  33   </head>
  34   <body onload="init()">
  35       <h1 id="title">Tiled Map Service Example</h1>
  36
  37     <div id="tags"></div>
  38
  39     <p id="shortdesc">
  40         Demonstrate the initialization and modification of a Tiled Map Service layer.
  41     </p>
  42
  43     <div id="map" class="smallmap"></div>
  44
  45     <div id="docs">
  46         URL of TMS (Should end in /): <input type="text" id="url" size="60" value="http://labs.metacarta.com/wms-c/Basic.py/" /> layer_name <input type="text" id="layer" value="satellite" /> <select id="type"><option>jpg</option><option>png</option></select> <input type="submit" onclick="addTMS()"/><br />
  47         <p>
  48         Example: http://labs.metacarta.com/wms-c/Basic.py/, satellite, jpg<br />
  49         The first input must be an HTTP URL pointing to a TMS instance. The second
  50         input must be a layer name available from that instance, and the third must
  51         be the output format used by that layer. (Any other behavior will result in
  52         broken images being displayed.)
  53         </p>
  54     </div>
  55   </body>
  56 </html>