<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>