You are here:   GIS Web Map Tutorial II > MapControls
  |  Login

Map Controls

  

We all know that to make a good map you need to add some things to it in order to identify what your map is actually portraying.  Some of these things include

  • Source of Data
  • Scale
  • North Arrow
  • Creators Name
  • Legend
  • Description

So we will start at the top of the list and work our way down to see what we can do to create a map that has these features.  Let's start with the following base code.

<html> 
<head> 
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script>
var map;
  function initialize() {
     map = new OpenLayers.Map("map_canvas");
     var mapbase = new OpenLayers.Layer.ArcGIS93Rest("ArcGIS Server Layer",
           "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/export",
           { layers: "show:0", dpi: 96, FORMAT: "png24"});
     map.addLayer(mapbase);
     map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12); 
 }
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>

The source of the data goes in the Attribution property of the layers.  This is a quick update to our code.  After the layer properties object in the definition we simply add a new object where we add attribution information.  For our example the new mapbase layer code will look like

var mapbase = new OpenLayers.Layer.ArcGIS93Rest("ArcGIS Server Layer",
           "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/export",
           { layers: "show:0", dpi: 96, FORMAT: "png24"},{ attribution:"Sources: Esri, DeLorme, NAVTEQ,  TomTom, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand)" });

This would be enough to add the attribution however I don't like where it shows up on the map, it seems too high for my liking.  Let's add inside our style tags the following

.olControlAttribution {bottom:10px!important;}

This will make the attribution stick 10 pixels from the bottom.  Much better!  Go ahead and save your work and give it a test in your browser.  Your map should look like mine below or the full screen version at http://giswebmapclass.freevar.com/GISII1.html

  

That was pretty easy!  Let's move on to the scale bar.  With the scale bar we will also add a permalink and an overview map because they fit right in with this topic.  We simply have to add these controls to our map constructor in an object like

map = new OpenLayers.Map("map_canvas", {
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.LayerSwitcher({'ascending':false}),
                        new OpenLayers.Control.Permalink(),
                        new OpenLayers.Control.ScaleLine(),
                        new OpenLayers.Control.Permalink('permalink'),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.OverviewMap(),
                        new OpenLayers.Control.KeyboardDefaults()
                    ]});

Save your map and check out what you have.  It should have all of the features we just added and look like mine at http://giswebmapclass.freevar.com/GISII2.html 

Now let's add the north arrow.  This is something that can be left out of web maps because it is assumed that up is north.  We will add one anyway so you can see how we accomplish it in a case where you would need to.  First we need a north arrow.  I used google images to find one.  Once i found one that i thought looked good i downloaded it.  I put it in the directory I wanted to use it from (the images folder)  Then simply added the image over top of my map like.

<img alt="" src="/imapapps/portals/0/images/northArrow.png" style="position: absolute; right: 10px; bottom: 200px; z-index: 9001;" />

I placed this above the map_canvas div.  Save and let's see what happens now. http://giswebmapclass.freevar.com/GISII3.html 

Now we can get into some designing of the map to complete the next portions.  Many times with paper maps you will find a side bar with useful information in it.  We will follow this model to add the last three items which are 'Map Creator's name', 'Legend', and Description.  For this we will need a little more HTML and CSS to split the web page so that we have two distinct sections.  One for the information about the map and one for the map itself.