| 1 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
| 2 |
<head> |
| 3 |
<title>OpenLayers: Control Panel</title> |
| 4 |
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> |
| 5 |
<link rel="stylesheet" href="style.css" type="text/css" /> |
| 6 |
<style type="text/css"> |
| 7 |
.olControlPanel div { |
| 8 |
display:block; |
| 9 |
width: 24px; |
| 10 |
height: 24px; |
| 11 |
margin: 5px; |
| 12 |
background-color:red; |
| 13 |
} |
| 14 |
|
| 15 |
.olControlPanel .olControlMouseDefaultsItemActive { |
| 16 |
background-color: blue; |
| 17 |
background-image: url("../theme/default/img/pan_on.png"); |
| 18 |
} |
| 19 |
.olControlPanel .olControlMouseDefaultsItemInactive { |
| 20 |
background-color: orange; |
| 21 |
background-image: url("../theme/default/img/pan_off.png"); |
| 22 |
} |
| 23 |
.olControlPanel .olControlDrawFeatureItemActive { |
| 24 |
width: 22px; |
| 25 |
height: 22px; |
| 26 |
background-image: url("../theme/default/img/draw_line_on.png"); |
| 27 |
} |
| 28 |
.olControlPanel .olControlDrawFeatureItemInactive { |
| 29 |
width: 22px; |
| 30 |
height: 22px; |
| 31 |
background-image: url("../theme/default/img/draw_line_off.png"); |
| 32 |
} |
| 33 |
.olControlPanel .olControlZoomBoxItemInactive { |
| 34 |
width: 22px; |
| 35 |
height: 22px; |
| 36 |
background-color: orange; |
| 37 |
background-image: url("../img/drag-rectangle-off.png"); |
| 38 |
} |
| 39 |
.olControlPanel .olControlZoomBoxItemActive { |
| 40 |
width: 22px; |
| 41 |
height: 22px; |
| 42 |
background-color: blue; |
| 43 |
background-image: url("../img/drag-rectangle-on.png"); |
| 44 |
} |
| 45 |
.olControlPanel .olControlZoomToMaxExtentItemInactive { |
| 46 |
width: 18px; |
| 47 |
height: 18px; |
| 48 |
background-image: url("../img/zoom-world-mini.png"); |
| 49 |
} |
| 50 |
|
| 51 |
</style> |
| 52 |
<script src="../lib/Firebug/firebug.js"></script> |
| 53 |
<script src="../lib/OpenLayers.js"></script> |
| 54 |
|
| 55 |
<script type="text/javascript"> |
| 56 |
var lon = 5; |
| 57 |
var lat = 40; |
| 58 |
var zoom = 5; |
| 59 |
var map, layer; |
| 60 |
|
| 61 |
function init(){ |
| 62 |
map = new OpenLayers.Map( 'map', { controls: [] } ); |
| 63 |
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS", |
| 64 |
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); |
| 65 |
map.addLayer(layer); |
| 66 |
|
| 67 |
vlayer = new OpenLayers.Layer.Vector( "Editable" ); |
| 68 |
map.addLayer(vlayer); |
| 69 |
|
| 70 |
|
| 71 |
zb = new OpenLayers.Control.ZoomBox( |
| 72 |
{title:"Zoom box: Selecting it you can zoom on an area by clicking and dragging."}); |
| 73 |
var panel = new OpenLayers.Control.Panel({defaultControl: zb}); |
| 74 |
panel.addControls([ |
| 75 |
new OpenLayers.Control.MouseDefaults( |
| 76 |
{title:'You can use the default mouse configuration'}), |
| 77 |
zb, |
| 78 |
new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, |
| 79 |
{title:'Draw a feature'}), |
| 80 |
new OpenLayers.Control.ZoomToMaxExtent({title:"Zoom to the max extent"}) |
| 81 |
]); |
| 82 |
map.addControl(panel); |
| 83 |
|
| 84 |
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); |
| 85 |
} |
| 86 |
</script> |
| 87 |
</head> |
| 88 |
<body onload="init()"> |
| 89 |
<h1 id="title">Custom Control.Panel</h1> |
| 90 |
<p id="shortdesc"> |
| 91 |
Create a custom control.panel, styled entirely with |
| 92 |
CSS, and add your own controls to it. |
| 93 |
</p> |
| 94 |
<div id="panel"></div> |
| 95 |
<div id="map" class="smallmap"></div> |
| 96 |
|
| 97 |
</body> |
| 98 |
</html> |
| 99 |
|
Parent Directory
| 
Revision Log