1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <html> <head> <title>Pan and Zoom Panels</title> <link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> <!-- -- Special stylesheet inclusion for ie6, which doesn't handle the alpha -- channel of images correctly. The special ie6 stylesheet will only -- be included if the browser running is ie6. For now, the only thing it -- does is load alternative, non-alpha pngs for the zoom/pan panels. --> <!--[if lte IE 6]> <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" /> <![endif]--> <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript" src="../lib/OpenLayers.js"></script> <script> var map; var lon = 5; var lat = 40; var zoom = 5; function init(){ map = new OpenLayers.Map("map", { controls: [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanPanel(), new OpenLayers.Control.ZoomPanel() ] }); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); map.addLayers([wms]); map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); } </script> </head> <body onload='init();'> <h1 id="title">Pan and Zoom Panels</h1> <div id="tags"></div> <p id="shortdesc">Customizable pan and zoom panels</p> </p> <div id="map" class="smallmap"></div> <p id="docs"> The pan and zoom panels allow you to use CSS styling to change the look and feel of the panels, including changing their position and their icons without needing to change any code. </p> </body> </html> |