#

## OpenLayers Workshop

# Creating an Overview Map

Online maps often contain a smaller overview map that displays the extent of the larger map. In OpenLayers, this is possible using the `OpenLayers.Control.OverviewMap` control.

Let’s create a map with a single layer and then add an overview map control.

Tasks

1. Open a text editor and save the following page as `map.html` in the root of your workshop directory:

       <html>
           <head>
               <title>My Map</title>
               <link rel="stylesheet" href="openlayers/theme/default/style.css" type="text/css">
               <style>
                   #map-id {
                       width: 512px;
                       height: 256px;
                   }
               </style>
               <script src="openlayers/lib/OpenLayers.js"></script>
           </head>
           <body>
               <h1>My Map</h1>
               <div id="map-id"></div>
               <script>
                   var medford = new OpenLayers.Bounds(
                       4284890, 254385,
                       4288865, 258380
                   );
                   var map = new OpenLayers.Map("map-id", {
                       projection: new OpenLayers.Projection("EPSG:2270"),
                       units: "ft",
                       maxExtent: medford,
                       restrictedExtent: medford,
                       maxResolution: 2.5,
                       numZoomLevels: 5
                   });

                   var base = new OpenLayers.Layer.WMS(
                       "Medford Streets & Imagery",
                       "/geoserver/wms",
                       {layers: "medford"}
                   );
                   map.addLayer(base);

                   map.zoomToMaxExtent();
               </script>
           </body>
       </html>

2. Open the working map in your web browser to confirm things look good: http://localhost/ol_workshop/map.html.

3. We are now going to add an overview map with default options to confirm things are properly working. Somewhere in your map initialization code (after the creation of the `map` object), insert the following:

       var overview = new OpenLayers.Control.OverviewMap({
           mapOptions: {
               projection: new OpenLayers.Projection("EPSG:2270"),
               units: "ft",
               maxExtent: medford,
               restrictedExtent: medford,
               maxResolution: 22,
               numZoomLevels: 5
           }
       });
       map.addControl(overview);

4. Save your changes and refresh `map.html` in your browser: http://localhost/ol_workshop/map.html

5. To see the overview map in action, open the plus sign at right of the map viewport.

   An overview map control inside the main map viewport.

## Discussion

The map in this example includes a few things you may not have seen before:

    var medford = new OpenLayers.Bounds(
        4284890, 254385,
        4288865, 258380
    );
    var map = new OpenLayers.Map("map-id", {
        projection: new OpenLayers.Projection("EPSG:2270"),
        units: "ft",
        maxExtent: medford,
        restrictedExtent: medford,
        maxResolution: 2.5,
        numZoomLevels: 5
    });

First, we construct the map in a custom projection. The OpenLayers default is to contruct maps in a geographic projection, with units in decimal degrees. Because of the nature of the Medford dataset, we define a `projection` more appropriate for this area (i.e., Oregon State Plane South). This change in projection also requires setting the map `units` to feet (“ft”).

The second thing to note is the use of the `restrictedExtent` property. This optional property restricts map panning to the given bounds. The imagery data used by the `medford` layer is limited to these bounds. To keep users from panning off the edge of our base layer, we set the `restrictedExtent` to the bounds of the data.

The final set of custom options are related to map resolutions. By default, a map will be set up to view the entire world in two 256x256 tiles when all the way zoomed out. Since we want to focus on a very limited subset of the world, we set the `maxResolution` property. A value of 2.5 means 2.5 feet per pixel (since we set map units to feet). When users are zoomed all the way out, they will be seeing 2.5 feet per pixel. We also specify that we only want 5 zoom levels instead of the default 16 levels.

The overview map constructor also deserves a bit of discussion:

    var overview = new OpenLayers.Control.OverviewMap({
        mapOptions: {
            projection: new OpenLayers.Projection("EPSG:2270"),
            units: "ft",
            maxExtent: medford,
            restrictedExtent: medford,
            maxResolution: 22,
            numZoomLevels: 5
        }
    });
    map.addControl(overview);

Like the custom `map` above, customization to the `overview` map control must also be specified. So, for every non-default property set for the main map, we need a corresponding property for the map created by the control.

We want `projection`, `units`, `restrictedExtent` and `numZoomLevels` to be the same for the overview map as well as the main map. However, in order for the overview map to zoom “farther out” we want a different `maxResolution` property. The appropriate values for your application can be determined by trial and error or calculations based on how much data you want to show (given the map size).

Next we’ll build upon our map to include a scale bar.

### Navigation

- index
- modules |
- next |
- previous |
- OpenLayers Workshop »
- Working With Controls »
- Creating an Overview Map