
<html>

<head>

<script src="../lib/OpenLayers.js"></script>

<script>

  window.onload = function() {

    /* set up projections that we need */

    var lonLat = new OpenLayers.Projection("EPSG:4326");

    var sphericalMercator =  new OpenLayers.Projection("EPSG:900913");

    
    /* map options for sphericalMercator maps */

    var options = {

        projection: sphericalMercator,

        displayProjection: lonLat,

        units: "m",

        maxResolution: 156543.0339,

        maxExtent: new OpenLayers.Bounds(-20037508, -20037508,

                                         20037508, 20037508.34)

    };

    
    /* our center in lon/lat converted to sphericalMercator */

    var center = new OpenLayers.LonLat(-73,40);

    center.transform(lonLat, sphericalMercator);


    /* our bounds in lon/lat converted to sphericalMercator */

          var mapbounds = new OpenLayers.Bounds(-74.766667, 39.166666667, -71.88333,         40.88333);

    mapbounds.transform(lonLat, sphericalMercator);

    
    g_map = new OpenLayers.Map('map', options);


          var graphic = new OpenLayers.Layer.Image(

                          'Overlay of Temperature Data',

                          'http://www.rowdylabs.com/gmaps/oceantemp/area-ne06.gif',

                          mapbounds,

                          new OpenLayers.Size(1030,796),

                          {maxExtext:mapbounds});


          g_map.addLayers([graphic]);

          g_map.setCenter(center, -1);


          g_markers = new OpenLayers.Layer.Markers( "Markers" );

          g_map.addLayer(g_markers);

          g_map.addControl(new OpenLayers.Control.MousePosition());

  }

</script>

</head>

<body>

  <div id="map" style="width:400px;height:400px;border:1px solid #000"></div>

</body>

</html>