openlayers/examples/gutter.html

   1 <html>
   2   <head>
   3       <title>OpenLayers Gutter 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/OpenLayers.js"></script>
  12     <script type="text/javascript">
  13         OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
  14         var map;
  15         window.onload = function() {
  16             options = {maxExtent: new OpenLayers.Bounds(-73.5295, 41.2318,
  17                                                         -69.9097, 42.8883),
  18                        maxResolution: 0.0003}
  19             map = new OpenLayers.Map('map', options);
  20             var roads15 = new OpenLayers.Layer.WMS( "Roads (15px gutter)",
  21                 "http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
  22                 {layers: 'roads_200_40'},
  23                 {gutter: 15});
  24             var roads = new OpenLayers.Layer.WMS( "Roads (no gutter)",
  25                 "http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
  26                 {layers: 'roads_200_40'});
  27             map.addLayers([roads, roads15]);
  28             map.addControl(new OpenLayers.Control.LayerSwitcher());
  29             map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 0);
  30         }
  31     </script>
  32   </head>
  33   <body>
  34     <h1 id="title">Gutter Example</h1>
  35
  36     <div id="tags"></div>
  37
  38     <p id="shortdesc">
  39         Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
  40     </p>
  41
  42     <div id="map" class="smallmap"></div>
  43
  44     <div id="docs">
  45         <p class="caption">
  46             When you render tiles with certain types of symbols, there are artifacts
  47             at tile edges that make symbology not look continuous.  In the center of
  48             the above map (when it first loads), the large orange road is split
  49             vertically by a tile.  Open the layer switcher and change to the layer
  50             with a 15 pixel gutter to see how the symbology looks nicer.
  51         </p>
  52     </div>
  53   </body>
  54 </html>