Book Image

OpenLayers 2.10 Beginner's Guide

Book Image

OpenLayers 2.10 Beginner's Guide

Overview of this book

Table of Contents (18 chapters)
OpenLayers 2.10
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time For Action – creating your first mashup


Let's make a map 'mashup' that consists of a Google Map layer, a WMS layer, and a Vector layer.

  1. First, we need to add the Google Maps V3 script API tag in the <head> section:

    <script src="http://maps.google.com/maps/api/js?sensor=false&v=3.2"></script>
  2. Now, set up your map object with the proper projection info, like in the previous example:

    map = new OpenLayers.Map('map_element',{
      maxExtent: new OpenLayers.Bounds(
      -128 * 156543.0339,
      -128 * 156543.0339,
      128 * 156543.0339,
      128 * 156543.0339),
      maxResolution: 156543.0339,
      units: 'm',
      projection: new OpenLayers.Projection('EPSG:900913'),
      displayProjection: new OpenLayers.Projection("EPSG:4326"),
    });
  3. Now let's create a Google Maps layer. Because we are using V3 of the API, we do not need to specify sphericalMercator: true because it is set to true automatically.

    var google_streets = new OpenLayers.Layer.Google(
      "Google Streets",
      {numZoomLevels: 20}
    );
  4. We'll create...