1 files changed, 55 insertions, 0 deletions
diff --git a/misc/openlayers/examples/gutter.html b/misc/openlayers/examples/gutter.html
new file mode 100644
index 0000000..1a98a5c
--- /dev/null
+++ b/misc/openlayers/examples/gutter.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>OpenLayers Gutter Example</title>
+    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+    <link rel="stylesheet" href="style.css" type="text/css">
+    <style type="text/css">
+        p.caption {
+            width: 512px;
+        }
+    </style>
+    <script src="../lib/OpenLayers.js"></script>
+  </head>
+  <body>
+    <h1 id="title">Gutter Example</h1>
+
+    <div id="tags">
+        gutter, quality, tile, light
+    </div>
+
+    <p id="shortdesc">
+        Demonstrates OpenLayer's facility for dealing with tiling artifacts.
+    </p>
+
+    <div id="map" class="smallmap"></div>
+
+    <div id="docs">
+        <p class="caption">
+            When you render tiles with certain types of symbols, some map
+            servers may render artifacts at tile edges that make symbology not
+            look continuous.  Look at the state abbreviations, open the layer
+            switcher and change to the layer with a 15 pixel gutter to see how
+            the symbology looks different (the server in this example doesn't
+            render such artifacts, so the client-side gutter won't make things
+            look nicer).
+        </p>
+    </div>
+  </body>
+  <script type="text/javascript">
+      var map = new OpenLayers.Map('map');
+      var states15 = new OpenLayers.Layer.WMS( "States (15px gutter)",
+          "http://suite.opengeo.org/geoserver/wms",
+          {layers: 'usa:states'},
+          {gutter: 15, transitionEffect: "resize"});
+      var states = new OpenLayers.Layer.WMS( "States (no gutter)",
+          "http://suite.opengeo.org/geoserver/wms",
+          {layers: 'usa:states'});
+      map.addLayers([states, states15]);
+      map.addControl(new OpenLayers.Control.LayerSwitcher());
+      map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 5);
+  </script>
+</html>