|  Login

Map Panel Layout

  

To accomplish our task, which is to add a place to give information about our map, we will have to decide where we want it and how we want it arranged on our page. I like the idea of placing it on the left side in a panel. That being said you can choose any place. I will show you how to create the left panel and add our information.  In the left panel We will place our map title at the top, the description, the legend, and finally our name.  The current map that we have is pretty useless in the sense that it just has a base map on it.  Let's grab some actual data that we can make a useful map out of.  

On the ArcGIS web site you can find USA Median Net Worth http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer. We will work with the Countries layer.  Notice the link on the page that says Legend.  Click that to get your legend.  You will need the one that is for Countries.  I screen capped the legend then cropped it in my photo editor.  I would suggest this as a good way to accomplish getting the legend.  There are many other ways to get it but in this tutorial we don't have the time to explain all of the other possibilities.  Once you have your legend you may click back on your browser.  Notice the section that says Description.  This is what we will use for our description.  I copied and pasted mine into a blank notepad for use when we get there.  Check out which layer we will need to request, Countries (3), so we will ask for 3 when we make our call.  

Now that we have all of the information that we will need we can start to build our map.  If you followed along your code should look pretty close to the following.

<html>
<head>
    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #map_canvas
        {
            height: 100%;
        }
        .olcontrolattribution
        {
            bottom: 10px !important;
        }
    </style>
    <script type="text/javascript">
        var map;
        // Avoid pink error tiles
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        OpenLayers.Util.onImageLoadErrorColor = "transparent";
        function initialize()
        {
            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({ displaySystem: 'english', divisions: 2 }),
                        new OpenLayers.Control.Permalink('permalink'),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.OverviewMap(),
                        new OpenLayers.Control.KeyboardDefaults()
                    ]
            });
            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)" });
            map.addLayer(mapbase);
            map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12);
        }
    </script>
    <title>Map tutorial</title>
</head>
<body onload="initialize()">
    <img src="/imapapps/portals/0/images/northArrow.png" style="position: absolute; right: 10px; bottom: 200px;
        z-index: 9001;" alt="North Arrow"/>
    <div id="map_canvas">
    </div>
</body>
</html>

Feel free to copy this code and start here if yours is different.  To the code we now have we will start by adding a new div that will be on the side called 'mapinfo'.  For spacing purposes we will add a div inside that called 'innerMapinfo'.  Inside that we will add an h3 tag for our title followed by a p tag for our description inside that we will add a center tag which we will place our legend in followed by a br tag our created by statement then close our p, div, and div.  It will look like:

<div id="mapinfo">
        <div id="innerMapinfo">
            <h3>
                </h3>
            <p style="margin: 0px 5px 0px 5px;">
                
                <center>
                    
                </center>
                <br />
                Created by: BillyZ
            </p>
        </div>
    </div>

Now we have some css work to do to make our layout correct.  In our style tag which is in the head up near the top of your code add the following to the bottom before the closing tag.

        #mapinfo
        {
            float: left;
            width: 25%;
            height: 100%;
            background-color: #164667;
            overflow: auto;
            color: White;
        }
        #innerMapinfo
        {
            margin: 5px;
        }

locate the style for #map_canvas and we will add float:left and width: 75% to that like

        #map_canvas
        {
            height: 100%;
            float: left;
            width: 75%;
        }

Now we can start adding our info.  In the h3 tag type or paste your title.  In the p tag below that paste your description.  In the center tag ad an img tag and set the src to your legend image that you made.  (you should have stored the image in the images folder).  That should do it!  your complete code should look like this.

<html>
<head>
    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        #map_canvas
        {
            height: 100%;
            float: left;
            width: 75%;
        }
        .olcontrolattribution
        {
            bottom: 10px !important;
        }
        #mapinfo
        {
            float: left;
            width: 25%;
            height: 100%;
            background-color: #164667;
            overflow: auto;
            color: White;
        }
        #innerMapinfo
        {
            margin: 5px;
        }
    </style>
    <script type="text/javascript">
        var map;
        // Avoid pink error tiles
        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
        OpenLayers.Util.onImageLoadErrorColor = "transparent";
        function initialize()
        {
            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({ displaySystem: 'english', divisions: 2 }),
                        new OpenLayers.Control.Permalink('permalink'),
                        new OpenLayers.Control.MousePosition(),
                        new OpenLayers.Control.OverviewMap(),
                        new OpenLayers.Control.KeyboardDefaults()
                    ]
            });
            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)" });
            map.addLayer(mapbase);
            var Demographics = new OpenLayers.Layer.ArcGIS93Rest("USA Median Net Worth",
               "http://server.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer/export",
               { layers: "show:3",
                   transparent: true
               }, { isBaseLayer: false, opacity: .5 });
            map.addLayer(Demographics);
            map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12);
        }
    </script>
    <title>USA Median Net Worth</title>
</head>
<body onload="initialize()">
    <img src="/imapapps/portals/0/images/northArrow.png" style="position: absolute; right: 10px; bottom: 200px;
        z-index: 9001;" alt="North Arrow"/>
    <div id="mapinfo">
        <div id="innerMapinfo">
            <h3>
                USA Median Net Worth</h3>
            <p style="margin: 0px 5px 0px 5px;">
                This thematic map presents the median household net worth in the United States in
                2010. Net worth is total household wealth minus debt, secured and unsecured. Net
                worth includes home equity, equity in pension plans, net equity in vehicles, IRAs
                and Keogh accounts, business equity, interest-earning assets and mutual fund shares,
                stocks, etc. Examples of secured debt include home mortgages and vehicle loans;
                examples of unsecured debt include credit card debt, certain bank loans, and other
                outstanding bills. Forecasts of net worth are based on the Survey of Consumer Finances,
                Federal Reserve Board. These data are ESRI’s 2010 estimates. The geography depicts
                states at greater than 25m scale, counties at 1m to 25m scale, Census Tracts at
                250k to 1m scale, and Census Block Groups at less than 250k scale. The map is designed
                to be displayed with semi-transparency of about 50% for overlay on other basemaps,
                which is reflected in the legend for the map.
                <center>
                    <img src="/imapapps/portals/0/images/legend.png" alt="Legend" style="width:90%; max-width:250px;" />
                </center>
                <br />
                Created by: BillyZ
            </p>
        </div>
    </div>
    <div id="map_canvas">
    </div>
</body>
</html>


Now you can save and view your work and it should look like mine http://giswebmapclass.freevar.com/GISII4.html

  Ok, now we're ready to check out some map tools to make our maps useful for our users.  Check out the next tutorial page at http://www.imapapps.com/imapapps/GISTutorialII/MapTools.aspx