Files
openlayers/examples/gutter.html
ahocevar 85498cb23f Removing imageOffset and using getImageSize.
This fixes a regression that was introduced with the Tile.Image overhaul. See http://trac.osgeo.org/openlayers/ticket/3625.
2012-02-21 15:06:32 +01:00

56 lines
2.0 KiB
HTML

<!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
</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://demo.opengeo.org/geoserver/wms",
{layers: 'topp:states'},
{gutter: 15});
var states = new OpenLayers.Layer.WMS( "States (no gutter)",
"http://demo.opengeo.org/geoserver/wms",
{layers: 'topp:states'});
map.addLayers([states, states15]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(-71.848, 42.2), 5);
</script>
</html>