[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