<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Layer problem after fix for #1429</title>
<link rel="stylesheet" type="text/css" href="js/ext-1.1.1/resources/css/ext-all.css" />
<link rel="stylesheet" href="css/v2.css">
<script type="text/javascript" src="js/ext-1.1.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-1.1.1/ext-all.js"></script>
<!-- Localhost key voor wanneer een Google kaartlaag wordt gebruikt -->
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTS6gjckBmeABOGXIUiOiZObZESPg'></script>
<script src="http://dev.openlayers.org/nightly/OpenLayers.js" type="text/javascript"></script>
<script defer="defer" type="text/javascript">
var falk;
var google;
var map;
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5;
OpenLayers.DOTS_PER_INCH = 25.4 / 0.28;
function init() {
var bounds = new OpenLayers.Bounds(
326515.01943035773, 6044033.005208468,
1795667.507783745, 7462992.676284852);
var googleProj = new OpenLayers.Projection("EPSG:900913");
var latLongProj = new OpenLayers.Projection("EPSG:4326");
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 2869.43845381520951171875,
numZoomLevels: 10,
projection: googleProj,
displayProjection: latLongProj,
units: "m"
};
map = new OpenLayers.Map('map', options);
// Falk Base layer
falk = new OpenLayers.Layer.WMS(
"Falk - Cached", 'http://www.trafficviewer.nl/cgi-bin/tilecache/tilecache.py?',
{
layers: 'falk_merc',
format: 'image/png'
},
{
buffer: 0,
isBaseLayer: true,
transitionEffect: 'resize'
}
);
// Google Base layer
google = new OpenLayers.Layer.Google(
"Google",
{
type: G_NORMAL_MAP,
'sphericalMercator': true,
minZoomLevel: 6,
maxZoomLevel: 11,
transitionEffect: 'resize'
}
);
map.addLayers([falk, google]);
// setup controls and initial zooms
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.Scale($('scale')));
map.addControl(new OpenLayers.Control.ScaleLine());
map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));
map.addControl(new OpenLayers.Control.LayerSwitcher());
var sw = new OpenLayers.LonLat(3.3586, 50.7513).transform(latLongProj, googleProj);
var ne = new OpenLayers.LonLat(7.2206, 53.8514).transform(latLongProj, googleProj);
map.zoomToExtent(new OpenLayers.Bounds(sw.lon, sw.lat, ne.lon, ne.lat));
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>