<!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>