[OpenLayers-Users] Can't get overview map to work

Planet)x andrew.stewart at reddeer.ca
Thu Aug 19 14:00:17 EDT 2010


I am having issues getting an overmap to show anything besides an empty blue
box with no layers. I have tried to look at the overviewmap example located
here - http://openlayers.org/dev/examples/ but I am unable to get my map to
even work with this example. Below is my code but when I run it all I see is
my map and an overview map that is entirely blue and has nothing inside it,
any help appreciated!


My code -

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Redgis - WMS Service</title>
    
<!-- Set Styles for all page elements --> 
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />  
<style type="text/css">
body 
{
    margin: 0;
}
#map 
{
    width: 100%;
    height: 90%;
}
#text 
{
    position: absolute;
    bottom: 1em;
    left: 1em;
    width: 512px;
}
.olControlPanel div 
{ 
    display:block;
    width:  24px;
    height: 24px;
    margin: 5px;
    position:relative;
    top: 0;
    left: 1224;
}     
.olControlPanel .olControlMouseDefaultsItemActive 
{ 
    background-image: url("OpenLayers-2.9.1/theme/default/img/pan.gif");
}
.olControlPanel .olControlMouseDefaultsItemInactive 
{ 
    background-image: url("OpenLayers-2.9.1/theme/default/img/pan.gif");
}
.olControlPanel .olControlButtonHomeItemActive 
{ 
    background-image: url("OpenLayers-2.9.1/theme/default/img/home.gif");
}
.olControlPanel .olControlButtonHomeItemInActive 
{ 
    background-image: url("OpenLayers-2.9.1/theme/default/img/home.gif");
}
.olControlPanel .olControlButtonQueriesItemActive 
{ 
    background-image: url("OpenLayers-2.9.1/theme/default/img/query.gif");
}
.olControlPanel .olControlButtonQueriesItemInActive 
{ 
    background-image: url("OpenLayers-2.9.1/theme/default/img/query.gif");
}
.olControlPanel .olControlDrawFeatureItemActive 
{ 
    width:  22px;  
    height: 22px;
    background-image:
url("OpenLayers-2.9.1/theme/default/img/draw_line_on.png");
}
.olControlPanel .olControlDrawFeatureItemInactive 
{ 
    width:  22px;  
    height: 22px;
    background-image:
url("OpenLayers-2.9.1/theme/default/img/draw_line_off.png");
}
.olControlPanel .olControlZoomBoxItemInactive 
{ 
    width:  22px;  
    height: 22px;
    background-image:
url("OpenLayers-2.9.1/theme/default/img/zoomarea.gif");
}
.olControlPanel .olControlZoomBoxItemActive 
{ 
    width:  22px;  
    height: 22px;
    background-image:
url("OpenLayers-2.9.1/theme/default/img/zoomarea.gif");
}
.olControlPanel .olControlZoomToMaxExtentItemInactive
{ 
    width:  18px;  
    height: 18px;
    background-image: url("OpenLayers-2.9.1/img/zoom-world-mini.png");
}
.olControlPanel .olControlButtonPrintItemActive 
{ 
    background-image:
url("OpenLayers-2.9.1/theme/default/img/printadvanced.gif");
}
.olControlPanel .olControlButtonPrintItemInactive 
{ 
    background-image:
url("OpenLayers-2.9.1/theme/default/img/printadvanced.gif");
}
</style>
    
<script type="text/javascript"
src="OpenLayers-2.9.1/lib/Firebug/firebug.js"></script>
<script type="text/javascript"
src="OpenLayers-2.9.1/OpenLayers.js"></script>
<script type="text/javascript">
   
        //Define Map Layers
-----------------------------------------------------------------------


           //Bridge
            var wmsBridge = new OpenLayers.Layer.WMS("Bridge",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Bridge'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsBridge.setOpacity(0.8); 
                    
            //Rural_Highway
            var wmsRural_Highway = new OpenLayers.Layer.WMS("Rural Highway",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Rural_Highway'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsRural_Highway.setOpacity(0.8); 
                    
            //Highway
            var wmsHighway = new OpenLayers.Layer.WMS("Highway",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Highway'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsHighway.setOpacity(0.8); 
                    
            //Arterial
            var wmsArterial = new OpenLayers.Layer.WMS("Arterial",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Arterial'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsArterial.setOpacity(0.8); 
                    
            //City_Boundary
            var wmsCity_Boundary = new OpenLayers.Layer.WMS("City Boundary",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['City_Boundary'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsCity_Boundary.setOpacity(0.8); 
                    
            //Hydrology
            var wmsHydrology = new OpenLayers.Layer.WMS("Hydrology",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Hydrology'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsHydrology.setOpacity(0.8); 
                    
            //Neighbourhood Area (Clear)
            var wmsNeighbourhood_Clear = new
OpenLayers.Layer.WMS("Neighbourhood Area (Clear)",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Neighbourhood_Area__Clear_'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsNeighbourhood_Clear.setOpacity(0.8); 
                    
            //Neighbourhood Boundary
            var wmsNeighbourhood_Boundary = new
OpenLayers.Layer.WMS("Neighbourhood Boundary",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Neighbourhood_Boundary'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsNeighbourhood_Boundary.setOpacity(0.8); 
                             
            //Major Parks
            var wmsMajor_Parks = new OpenLayers.Layer.WMS("Major Parks",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Major_Parks'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsMajor_Parks.setOpacity(0.8); 
                    
                    
             //Neighbourhood Parks
            var wmsNeighbourhood_Parks = new
OpenLayers.Layer.WMS("Neighbourhood Parks",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Neighbourhood_Parks'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsMajor_Parks.setOpacity(0.8); 
                    
            //Recreation Sites
            var wmsRecreation_Sites= new OpenLayers.Layer.WMS("Recreation
Sites", "http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Recreation_Sites'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsRecreation_Sites.setOpacity(0.8); 
                    
            //School Sites
            var wmsSchool_Sites= new OpenLayers.Layer.WMS("School Sites",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['School_Sites'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsSchool_Sites.setOpacity(0.8); 
                    
            //Linear Parks
            var wmsLinear_Parks= new OpenLayers.Layer.WMS("Linear Parks",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Linear_Parks'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsLinear_Parks.setOpacity(0.8); 
                    
            //Section Lines
            var wmsSection_Lines= new OpenLayers.Layer.WMS("Section Lines",
"http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Section_Lines'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: true
                        , singleTile: true
                    }
                );
                    wmsSection_Lines.setOpacity(0.8); 
                    wmsSection_Lines.displayInLayerSwitcher = false //hides
layer from displaying in layerswitcher control
                   
                    
            //Rural Block Line
            var wmsRural_Block_Line= new OpenLayers.Layer.WMS("Rural Block
Line", "http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Rural_Block_Line'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsRural_Block_Line.setOpacity(0.8);
                    
            //Rural Lot Line
            var wmsRural_Lot_Line= new OpenLayers.Layer.WMS("Rural Lot
Line", "http://ITS701X5J1/RedWMS/Request.aspx",
                    {
                        layers: ['Rural_Lot_Line'],
                        format: 'image/png',
                        VERSION: "1.1.1",
                        transparent: true
                    },
                    { isBaseLayer: false
                        , singleTile: true
                    }
                );
                    wmsRural_Lot_Line.setOpacity(0.8);
                    
 //End Define Map Layers
------------------------------------------------------------------------------------------------

        function init(){
        
        var map = new OpenLayers.Map( 'map', { controls: [],
         maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
         maxResolution: 156543.0399,
         numZoomLevels: 20,
         units: 'm',
         projection: new OpenLayers.Projection("EPSG:900913"),
         displayProjection: new OpenLayers.Projection("EPSG:4326")
         } 
         );     
            map.addLayers([wmsBridge, wmsRural_Highway, wmsHighway,
wmsArterial, wmsCity_Boundary, wmsHydrology, wmsNeighbourhood_Clear,
wmsNeighbourhood_Boundary, wmsMajor_Parks, wmsNeighbourhood_Parks,
wmsRecreation_Sites, wmsSchool_Sites, wmsLinear_Parks, wmsSection_Lines,
wmsRural_Block_Line, wmsRural_Lot_Line]);
 
            vlayer = new OpenLayers.Layer.Vector( "Red Lines" );
            vlayer.displayInLayerSwitcher = false
            map.addLayer(vlayer);
            
            //Add Controls to Control Panel
            
            zb = new OpenLayers.Control.ZoomBox(
                {title:"Zoom by Area, Click and drag to zoom."});
                
            var triggerHome = function() {
            window.location.reload();
            };
            
            var triggerQuery = function() {
            window.open ("queries.aspx","Queries"); 
            };
            
            var triggerPrint = function() 
            {
            window.print();
            };
           
           
           //declare all controls
            
            var btnHome = new OpenLayers.Control.Button({trigger:
triggerHome, title: "Reload Website", displayClass: 'olControlButtonHome'});
            var btnQuery = new OpenLayers.Control.Button({trigger:
triggerQuery, title: "Pre-Defined Queries", displayClass:
'olControlButtonQueries'});  
            var nav = new OpenLayers.Control.NavigationHistory({title: "Zoom
to Previous View"});
            var mouseDefaults = new OpenLayers.Control.MouseDefaults({title:
"Pan Tool - Click and drag on map window"});
            var drawFeature = new OpenLayers.Control.DrawFeature(vlayer,
OpenLayers.Handler.Path, {title: "Draw feature"});
            var zoomMax = new OpenLayers.Control.ZoomToMaxExtent({title:
"Zoom to max Range"});
            var btnPrint = new OpenLayers.Control.Button({trigger:
triggerPrint, title: "Print Page", displayClass: 'olControlButtonPrint'});

            
            // add controls to panel
            map.addControl(nav);
            var panel = new OpenLayers.Control.Panel({defaultControl:
mouseDefaults});
            panel.addControls([btnHome, btnQuery, zb, nav.previous,
mouseDefaults, drawFeature, zoomMax, btnPrint]);
            
        var startupLat = 52.27210;
        var startupLon = -113.80288;
        
        var startupLevel = 12;
        var lonLat = new OpenLayers.LonLat(startupLon,
startupLat).transform(new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject());
            
            //nav = new OpenLayers.Control.NavigationHistory();
            // parent control must be added to the map
            //map.addControl(nav);
            //panel.addControls([nav.next, nav.previous]);
            
            map.addControl(panel);
            
            map.setCenter(lonLat,startupLevel);
            
            

            //Define custom controls
            var redgisLegend = new OpenLayers.Control.LayerSwitcher();

            
            
            
            //add controls to map
            map.addControl(redgisLegend);


            redgisLegend.maximizeControl();
            

        // create an overview map control with the default options
        var overview1 = new OpenLayers.Control.OverviewMap();
        map.addControl(overview1);
            
        }
    </script>
  </head>
    <body onload="init()">
        <div id="map"></div>
        <div><center><br />Active Tool: <br/><br/> 
        </center> 
        </div>
    </body>
</html>


-- 
View this message in context: http://osgeo-org.1803224.n2.nabble.com/Can-t-get-overview-map-to-work-tp5441450p5441450.html
Sent from the OpenLayers Users mailing list archive at Nabble.com.



More information about the Users mailing list