Design basic map layers (01.index.html)

  • Create an OpenLayers? map object
  • Create and Controls to the maps (layer switcher and mouse position)
  • Create a Google Satellite layer and add it to the map
  • Recenter the map to a specified extent 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 800px;
            height: 512px;
            border: 1px solid black;
        }
    </style>
    <script src="./OpenLayers-google/lib/OpenLayers.js"></script>
    <script src="http://maps.google.com/maps?file=api&v=2&key=foobar"></script>

    <script type="text/javascript">
        // global variables
        var map;

        function init() {
            map = new OpenLayers.Map('map', {projection: "EPSG: 54004",
                                             units: "m",
                                             maxResolution: 156543.0339,
                                             maxExtent: new OpenLayers.Bounds(-20037508, 
                                                                              -136554022, 
                                                                              20037508, 
                                                                              136554022)
                                            });
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());

            // create and add layers to the map
            var satellite = new OpenLayers.Layer.GoogleMercator("Google Satellite", 
                                                                {type: G_NORMAL_MAP});

            map.addLayers([satellite]);

            // set default position
            map.zoomToExtent(new OpenLayers.Bounds(-13737893, 
                                                   6141906, 
                                                   -13728396, 
                                                   6151394));
        }
    </script>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>