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

Minimize

Complete code

   Minimize

I will give you all the complete code for the tutorial here.  You will notice the updates and changes.  Make sure that you follow the concepts so that you will understand what is happening.  if you have any questions while completing this section please feel free to contact me directly.  When you are done the page should look like http://giswebmapclass.freevar.com/GISII6.html You will need to grab the images for the buttons by simply following the links in the code.

  

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script src="/imapapps/portals/0/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;
            left:25%;
        }
        #mapinfo
        {
            float: left;
            width: 25%;
            height: 100%;
            background-color: #164667;
            overflow: auto;
            color: White;
        }
        #innerMapinfo
        {
            margin: 5px;
        }
        .olcontrollayerswitcher
        {
            top:35px!important;
        }
        .layersDiv
        {
            background-color:#164667!important;
            border: 3px groove white;
            padding: 0 5px;
            border-radius: 4px;
        }
        .olcontroloverviewmapelement
        {
            background-color:#164667!important;
            border: 3px groove white;
            padding: 0 5px;
            border-radius: 4px;
        }
        .olLayerGrid .olTileImage
        {
            -webkit-transition: opacity 0.2s linear;
            -moz-transition: opacity 0.2s linear;
            -o-transition: opacity 0.2s linear;
            transition: opacity 0.2s linear;
        }
        .olControlPanel button
        {
            position: relative;
            display: block;
            margin: 2px;
            border: 3px groove white;
            padding: 0 5px;
            border-radius: 4px;
            height: 35px;
            background-color: #164667;
            float: left;
            overflow: visible; /* needed to remove padding from buttons in IE */
        }
        .olControlPanel button.hover
        {
            position: relative;
            display: block;
            margin: 2px;
            border-bottom: 5px groove white;
            border-top: 5px groove white;
            
            padding: 0 5px;
            border-radius: 4px;
            height: 35px;
            background-color: black;
            float: left;
            overflow: visible; /* needed to remove padding from buttons in IE */
        }
        .olControlPanel button span
        {
            padding-left: 25px;
            color:white;
        }
        .olControlPanel button span:first-child
        {
            padding-left: 0;
            display: block;
            position: absolute;
            left: 2px;
        }
        .olControlPanel .olControlDrawFeatureItemActive span:first-child
        {
            background-image: url("draw_line_on.png");
            height: 22px;
            width: 24px;
            top: 5px;
        }
        .olControlPanel .olControlDrawFeatureItemInactive span:first-child
        {
            background-image: url("theme/default/img/draw_line_off.png");
            height: 22px;
            width: 24px;
            top: 5px;
        }
        .olControlPanel .olControlZoomBoxItemInactive span:first-child
        {
            background-image: url("theme/default/img/drag-rectangle-off.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        .olControlPanel .olControlZoomBoxItemActive span:first-child
        {
            background-image: url("theme/default/img/drag-rectangle-on.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        .olControlPanel
        {
            left: 25%;
            background: rgb(22, 70, 103); /* Fall-back for browsers that don't support rgba */
            background: rgba(22, 70, 103, .5);
            padding:2px 5px 5px 5px;
            border: 3px groove #164667;
            
        }
        #DragFeature span:first-child
        {
            background-image: url("theme/default/img/move_feature_off.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #DragFeature.olControlDragFeatureItemActive span:first-child
        {
            background-image: url("theme/default/img/move_feature_on.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #CreateLine span:first-child
        {
            background-image: url("theme/default/img/draw_line_off.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #CreateLine.olControlDrawFeatureItemActive span:first-child
        {
            background-image: url("theme/default/img/draw_line_on.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #CreatePoint span:first-child
        {
            background-image: url("theme/default/img/draw_point_off.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #CreatePoint.olControlDrawFeatureItemActive span:first-child
        {
            background-image: url("theme/default/img/draw_point_on.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #CreatePolygon span:first-child
        {
            background-image: url("theme/default/img/draw_polygon_off.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #CreatePolygon.olControlDrawFeatureItemActive span:first-child
        {
            background-image: url("theme/default/img/draw_polygon_on.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #DefaultNavigate span:first-child
        {
            background-image: url("theme/default/img/pan_off.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        #DefaultNavigate.olControlButtonItemActive span:first-child
        {
            background-image: url("theme/default/img/pan_on.png");
            height: 22px;
            width: 24px;
            top: 4px;
        }
        path
        {
            fill-opacity: .7;
        }
    </style>
    <script type="text/javascript">
        var map;
        var Demographics;
        var vectors;
        var controls;
        var styleMapPoint;
        var styleMapLines;
        var zb;
        var DefaultNavigateBtn;
        // 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(),
                        new OpenLayers.Control.Attribution()
                    ]
            });
            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);
            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);




            // allow testing of specific renderers via "?renderer=Canvas", etc
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
            styleMapPoint = new OpenLayers.StyleMap({
                'pointRadius': 8,
                'strokeWidth': 3,
                'strokeColor': '#164667',
                'fillColor': '#ffffff'


            });
            styleMapLines = new OpenLayers.StyleMap({
                'pointRadius': 4,
                'strokeWidth': 2,
                'strokeColor': '#164667',
                'fillColor': '#ffffff',
                'fillOpacity': 0.7


            });
            vectors = new OpenLayers.Layer.Vector("Vector Layer", {
                renderers: renderer, styleMap: styleMapPoint
            });


            map.addLayer(vectors);
            controls = {
                point: new OpenLayers.Control.DrawFeature(vectors,
                                OpenLayers.Handler.Point, { title: 'Create Point', text: 'Create Point', bID: 'CreatePoint' }),
                line: new OpenLayers.Control.DrawFeature(vectors,
                                OpenLayers.Handler.Path, { title: 'Create a Line', text: 'Create a Line', bID: 'CreateLine' }),
                polygon: new OpenLayers.Control.DrawFeature(vectors,
                                OpenLayers.Handler.Polygon, { title: 'Create a Polygon', text: 'Create a Polygon', bID: 'CreatePolygon' }),
                drag: new OpenLayers.Control.DragFeature(vectors, { title: 'Drag Feature', text: 'Drag Feature', bID: 'DragFeature' })
            };


            for (var key in controls)
            {
                controls[key].events.register("activate", controls[key], nonav);
            }
            zb = new OpenLayers.Control.ZoomBox({


                title: "Zoom box: zoom clicking and dragging",
                text: "Zoom",
                bID: "ZoomBox"
            });


            zb.events.register("activate", zb, nonav);
            DefaultNavigateBtn = new OpenLayers.Control.Button({ trigger: returnDefaultNav, title: 'Navigate', text: 'Navigate', bID: 'DefaultNavigate' });
            var p = new OpenLayers.Control.Panel({
                defaultControl: DefaultNavigateBtn,
                createControlMarkup: function (control)
                {
                    var button = document.createElement('button');
                    var iconSpan = document.createElement('span');


                    var textSpan = document.createElement('span');
                    button.setAttribute('onmouseover', 'addClass(document.getElementById("'+control.bID+'"), "hover")');
                    button.setAttribute('onmouseout', 'removeClass(document.getElementById("' + control.bID + '"), "hover")');
                    button.setAttribute("id", control.bID);
                    iconSpan.innerHTML = '&nbsp;';
                    button.appendChild(iconSpan);
                    if (control.text)
                    {
                        textSpan.innerHTML = control.text;
                    }
                    button.appendChild(textSpan);
                    return button;
                }
            });




            p.addControls([zb,
                controls.point, controls.line, controls.polygon, controls.drag, DefaultNavigateBtn]);


            map.addControl(p);
            map.setCenter(new OpenLayers.LonLat(-86.57, 34.65), 12);


        }
        function returnDefaultNav()
        {
            var myele = document.getElementById("DefaultNavigate");
            myele.setAttribute("class", myele.className.replace("Inactive", "Active"));
            toggleControl(null);
        }
        function nonav()
        {
            try
            {
                var myele = document.getElementById("DefaultNavigate");
                myele.setAttribute("class", myele.className.replace("Active", "Inactive"));
                for (var key in controls)
                {
                    if (controls[key].active)
                    {


                        var which = key;
                        if (which == 'line' || which == 'polygon')
                        {
                            map.layers[map.layers.length - 1].styleMap = styleMapLines;
                        }
                        else if (which == 'point')
                        {
                            map.layers[map.layers.length - 1].styleMap = styleMapPoint;
                        }


                    }
                }
            }
            catch (e) { }
        }
        function toggleControl(which)
        {
            for (key in controls)
            {
                var control = controls[key];


                if (which == key)
                {
                    control.activate();
                    if (which == 'line' || which == 'polygon')
                    {
                        map.layers[map.layers.length - 1].styleMap = styleMapLines;
                    }
                    else if (which == 'point')
                    {
                        map.layers[map.layers.length - 1].styleMap = styleMapPoint;
                    }
                } else
                {
                    control.deactivate();
                }
            }
            if (which == null)
            {
                zb.deactivate();
            }
            else
            {
                var myele = document.getElementById("DefaultNavigate");
                myele.setAttribute("class", myele.className.replace("Active", "Inactive"));
            }
        }
        //function HoverClass()
        function hasClass(ele, cls)
        {
            try
            {
                return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
            }
            catch (e) { }
        }


        function addClass(ele, cls)
        {
            if (!this.hasClass(ele, cls)) ele.className += " " + cls;
        }


        function removeClass(ele, cls)
        {
            if (hasClass(ele, cls))
            {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                ele.className = ele.className.replace(reg, ' ');
            }
        }
    </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
                <br />
                <br />
            </p>
        </div>
    </div>
    <div id="map_canvas">
    </div>
</body>
</html>