<html xmlns="http://www.w3.org/1999/xhtml">
html, body, #map{margin: 0;width: 100%;height: 100%;}</style>
<head>
<style type="text/css">
#controls {
html, body, width:#map 512px;{
position: absolute;
bottommargin: 1em;0;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.5em 0.5em 0.5em;
}100%;
#controlToggle {
padding-leftheight: 1em;
}
#controlToggle li {100%;
list-style: none;
}
</style>
<script src="js/firebug.js">< <style type="text/script>css">
<script src="http #controls {
width://www 512px;
position: absolute;
bottom: 1em;
left: 1em;
width: 512px;
z-index: 20000;
background-color: white;
padding: 0 0.openlayers5em 0.org/dev/OpenLayers5em 0.js"></script>5em;
}
#controlToggle {
padding-left: 1em;
}
#controlToggle li {
list-style: none;
}
<script type="text </javascript">style>
var lon = 24.0000000000; <script src="js/firebug.js"></script>
var lat = -29 <script src="http://www.000000000000;openlayers.org/dev/OpenLayers.js"></script>
var zoom = 4;
var map, layer, vectors,<script controls;type="text/javascript">
function init(){ var lon = 24.0000000000;
var lat = -29.000000000000;
// Because the Streetmaps system uses 300x300 tiles, we need to set up the scaling variables to work with these
var aReszoom = [90,45,22.500000,11.250000,5.625000,2.812500,1.406250,0.703125,0.351563,0.175781,0.087891,0.043945, 0.021973,0.010986,0.005493,0.002747,0.001373,0.000687,0.000343];4;
for (var l=0;l<aRes.length;l++) {
aRes[l] = aRes[l]/300;
map, layer, vectors, }controls;
// Normalfunction init, but we pass through the info about the zoom/scaling as options
map = new OpenLayers.Map( 'map',
{
tileSize: new OpenLayers.Size(300, 300),
projection: 'CRS:84',
numZoomLevels: aRes.length,
resolutions:aRes,
maxResolution:360/300
});{
// At this point the control is used as per normal // Because the Streetmaps system uses 300x300 tiles, we need to
set up the scaling layer1variables =to newwork OpenLayers.Layer.WMS(with these
'Streetmaps Streets',
var aRes = 'http://www[90,45,22.streetmaps500000,11.co250000,5.za/WMS/?'625000,
{
key: 'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX'2.812500,
service: 'WMS'1.406250,
request: 'GetMap'0.703125,
version: '10.3351563,0.0'175781,
layers: 0.087891,0.043945, 'sm0.maps021973,0.tiled'010986,0.005493,0.002747,0.001373,0.000687,0.000343];
format: for (var l=0;l<aRes.length;l++) {
aRes[l] = 'imageaRes[l]/png'300;
}
);
layer2 = new OpenLayers.Layer.WMS(
'Streetmaps Imagery',
'http://www.streetmaps.co.za/WMS/?',
{
key: Normal init, but we pass through the info about the zoom/scaling as options
map = new OpenLayers.Map( 'map',
{ 'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
servicetileSize: new OpenLayers.Size(300, 'WMS'300),
requestprojection: 'GetMap''CRS:84',
versionnumZoomLevels: '1.3aRes.0'length,
layersresolutions: 'sm.imagery'aRes,
formatmaxResolution: 'image360/png'300
}
);
// ThisAt loadsthis point the mapcontrol is used as per normal
map layer1 = new OpenLayers.addLayerLayer.WMS(layer1);
map 'Streetmaps Streets',
'http://www.addLayer(layer2streetmaps.co.za/WMS/?',
{
key: 'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
service: 'WMS',
request: 'GetMap',
version: '1.3.0',
layers: 'sm.maps.tiled',
format: 'image/png'
}
);
map.setCenter( layer2 = new OpenLayers.LonLatLayer.WMS(lon, lat),
zoom); 'Streetmaps Imagery',
map.addControl( new OpenLayers 'http://www.Controlstreetmaps.LayerSwitcher()co.za/WMS/?', );
var vectors = new OpenLayers {
key: 'HZPGNWPNDYPREPTIKSIHWKYKQYYOQVYX',
service: 'WMS',
request: 'GetMap',
version: '1.Layer3.Vector("vector"0',
{isBaseLayer layers: true 'sm.imagery',
format: 'image/png'
});
map.addLayers([vectors] );
// This loads the overlaysmap
var wmsLayer = new OpenLayers.Layermap.WMSaddLayer( "OpenLayers WMS", layer1);
"http://vmap0.tiles.osgeomap.org/wms/vmap0?", {layers: 'basic'}addLayer(layer2);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
map.addControl( new OpenLayers.Control.LayerSwitcher() );
var polygonLayervectors = new OpenLayers.Layer.Vector("Polygon"vector", Layer"{isBaseLayer: true});
map.addLayers([vectors]);
map.addLayers([wmsLayer, polygonLayer]); // This loads the overlays
map.addControl( var wmsLayer = new OpenLayers.ControlLayer.LayerSwitcherWMS()); "OpenLayers WMS",
map.addControl(new OpenLayers "http://vmap0.Controltiles.MousePosition()osgeo.org/wms/vmap0?", {layers: 'basic'});
polyOptions = {sides: 40};
var polygonControlpolygonLayer = new OpenLayers.ControlLayer.DrawFeatureVector(polygonLayer,
OpenLayers.Handler.RegularPolygon,
{handlerOptions:"Polygon polyOptions}Layer");
map.addControladdLayers(polygonControl[wmsLayer, polygonLayer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
document.getElementById('noneToggle').checked polyOptions = true;{sides: 40};
document polygonControl = new OpenLayers.getElementById('irregularToggle')Control.checkedDrawFeature(polygonLayer,
= false; OpenLayers.Handler.RegularPolygon,
{handlerOptions: polyOptions});
function setOptions(options) {
polygonControl.handler map.setOptionsaddControl(optionspolygonControl);
}
document.getElementById('noneToggle').checked = true;
document.getElementById('irregularToggle').checked = false;
}
function setOptions(options) {
polygonControl.handler.setOptions(options);
}
function toggleControl(element) {
for(key in controls) {
var control = controls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
}
</script>
</head>
<body onLoad="init()">
<div id="map" class="smallmap"></div>
<div id="controls">
<ul id="controlToggle">
<li>
<input type="radio" name="type"
value="none" id="noneToggle"
onclick="polygonControl.deactivate()"
checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type"
value="polygon" id="polygonToggle"
onclick="polygonControl.activate()" />
<label for="polygonToggle">draw polygon</label>
</li>
</ul>
</div>
</div>
</body>
</html>
