Files
openlayers/examples/gutter.html
crschmidt 7da6a3540e Merge the excellent documentation work done during foss4g into trunk. Many
thanks to all the contributors who helped put this together. 
I'm not exactly sure of what's going to happen with this, but for now,
at http://openlayers.org/dev/doc/examples.html you can see links to all the
examples *with descriptions*. Hooray!


git-svn-id: http://svn.openlayers.org/trunk/openlayers@5362 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2007-12-08 14:21:53 +00:00

58 lines
2.0 KiB
HTML

<html>
<head>
<title>OpenLayers Gutter Example</title>
<style type="text/css">
#map {
width: 521px;
height: 512px;
border: 1px solid gray;
}
p.caption {
width: 512px;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 2;
var map;
window.onload = function() {
options = {maxExtent: new OpenLayers.Bounds(-73.5295, 41.2318,
-69.9097, 42.8883),
maxResolution: 0.0003}
map = new OpenLayers.Map('map', options);
var roads15 = new OpenLayers.Layer.WMS( "Roads (15px gutter)",
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
{layers: 'roads_200_40'},
{gutter: 15});
var roads = new OpenLayers.Layer.WMS( "Roads (no gutter)",
"http://boston.freemap.in/cgi-bin/mapserv?map=/www/freemap.in/boston/map/gmaps.map&",
{layers: 'roads_200_40'});
map.addLayers([roads, roads15]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 0);
}
</script>
</head>
<body>
<h1 id="title">Gutter Example</h1>
<div id="tags"></div>
<p id="shortdesc">
Demonstrates map tiling artifacts, and OpenLayer's facility for correcting this distortion.
</p>
<div id="map"></div>
<div id="docs">
<p class="caption">
When you render tiles with certain types of symbols, there are artifacts
at tile edges that make symbology not look continuous. In the center of
the above map (when it first loads), the large orange road is split
vertically by a tile. Open the layer switcher and change to the layer
with a 15 pixel gutter to see how the symbology looks nicer.
</p>
</div>
</body>
</html>