<html>
<head>
<title>Step 3: adding map controls</title>
<script src="../OpenLayers.js"></script>
<script src="../OpenStreetMap.js"></script>
<script>
function init() {
lat = 52.025;
lon = 8.515;
zoom = 15;
projLonLat = new OpenLayers.Projection("EPSG:4326"); // WGS 1984
projMercator = new OpenLayers.Projection("EPSG:900913"); // Spherical Mercator
map = new OpenLayers.Map("demoMap",
{ controls: [ new OpenLayers.Control.Navigation(), // direct panning via mouse drag
new OpenLayers.Control.Attribution(), // attribution text
new OpenLayers.Control.PanZoomBar(), // larger navigation control
new OpenLayers.Control.MousePosition({'displayProjection': projMercator}) // mouse position
new OpenLayers.Control.OverviewMap() // overview map
]
}
);
map.addLayer(new OpenLayers.Layer.OSM.Mapnik());
map.setCenter(new OpenLayers.LonLat(lon, lat).transform(projLonLat,projMercator), zoom);
}
</script>
</head>
<body onload="init();">
<div id="demoMap"></div>
</body>
</html>