Simple Web Map

Here is how you create a simple map like the one above centered on Denver using OpenLayers

For these examples to work, Make sure you have OpenLayers, Jquery, Proj4js and your basemap of choice javascript libraries loaded in your head.

Here we're using google maps, but you could bring in OpenStreetMap, Bing, Mapquest, etc. First step is to initlize the map into your "map" div

Note that jquery is utilized frequently in the javascript code examples


var map; 

$(document).ready(function () {

    //This is where you initialize your map and place it in your 'map' div'
      map = new OpenLayers.Map('map', {
      maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
      maxResolution: 156543.0399,
      numZoomLevels: "auto",
      units: 'm',
      projection: new OpenLayers.Projection("EPSG:4326"),
      displayProjection: new OpenLayers.Projection("EPSG:900913")
	});

Then add the layer switcher and initialize the various base layers


    map.addControl(new OpenLayers.Control.LayerSwitcher());
    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {numZoomLevels: 20}
    );
    var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    );
    var gsat = new OpenLayers.Layer.Google(
        "Google Satellite",
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
    );

Finally add your base layers and center the map


       map.addLayers([gmap, gphy, ghyb, gsat]);
       map.setCenter(new OpenLayers.LonLat(-104.96, 39.75).transform(
       new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), 9);
});

Here is the code in it's entirety


var map; 
$(document).ready(function () {

    map = new OpenLayers.Map('map', {

       maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
         maxResolution: 156543.0399,
        numZoomLevels: "auto",
         units: 'm',
         projection: new OpenLayers.Projection("EPSG:4326"),
         displayProjection: new OpenLayers.Projection("EPSG:900913")
	});
    map.addControl(new OpenLayers.Control.LayerSwitcher());
    var gmap = new OpenLayers.Layer.Google(

        "Google Streets", 
        {numZoomLevels: 20}
    );
    var ghyb = new OpenLayers.Layer.Google(
        "Google Hybrid",
        {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
    );

        var gsat = new OpenLayers.Layer.Google( 
        "Google Satellite",
        {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}

    );
        map.addLayers([gmap, gphy, ghyb, gsat]);
        map.setCenter(new OpenLayers.LonLat(-104.96, 39.75).transform(
        new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), 9);

});