<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NL tileserver</title>
<style type="text/css">
#map {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
position: absolute;
}
body {
border: 0px;
margin: 0px;
padding: 0px;
height: 100%;
}
#help {
z-index: 1000;
position: absolute;
top: 10px;
left: 60px;
overflow: hidden;
background: white;
foreground: black;
width: 33%;
border-style: solid;
border-width: 2px;
border-color: black;
font-size: 10px;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
/* for Mozilla */
-moz-opacity:0.6;
}
div.olTilePosition {
bottom: 3em;
right: 3px;
display: block;
position: absolute;
font-family: Arial;
font-size: smaller;
}
div.forumLink {
top: 0.5em;
right: 3px;
display: none;
position: absolute;
font-family: Arial;
background: white;
foreground: black;
font-size: smaller;
/* for IE */
filter:alpha(opacity=70);
/* CSS3 standard */
opacity:0.7;
/* for Mozilla */
-moz-opacity:0.7;
}
</style>
<script src="OpenLayers-svn-2008-01-26.js"></script>
<script src="proj4js-compressed.js"></script>
<script type="text/javascript">
<!--
var map;
var lon = "";
var lat = "";
var zoom = "";
var subpage = location.hostname.split('.')[0];
OpenLayers.Util.onImageLoadErrorColor = "transparent";
// Proj4js.defs["EPSG:28992"] = "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.999908 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.237,50.0087,465.658,-0.406857,0.350733,-1.87035,4.0812 +units=m +no_defs";
Proj4js.defs["EPSG:28992"] = "+proj=sterea +lat_0=52.15616055555555 +lon_0=5.38763888888889 +k=0.999908 +x_0=155000 +y_0=463000 +ellps=bessel +towgs84=565.2369,50.0087,465.658,-0.406857330322398,0.350732676542563,-1.8703473836068,4.0812 +units=m +no_defs";
Proj4js.defs["EPSG:900913"] = "+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs";
/*
* The bounding box
*
* longitude goes from -180 till 180
* latitude goes form -85.0511 till 85.0511
*/
var minlon = 2.7984557419334006;
var maxlon = 7.388298070963748;
var minlat = 50.62642256377723;
var maxlat = 53.954129036190224;
//Convert coordinates to tiles
var minx = lon2relativeX(minlon);
var miny = lat2relativeY(maxlat);
var maxx = lon2relativeX(maxlon);
var maxy = lat2relativeY(minlat);
function myFormat(lonLat) {
var digits = parseInt(this.numdigits);
var newHtml =
"Lon: " +
lonLat.lon.toFixed(digits) +
" Lat: " +
lonLat.lat.toFixed(digits) +
" Zoom: " +
this.map.getZoom();
return newHtml;
};
function init(){
map = new OpenLayers.Map('map',
{ maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
numZoomLevels: 19,
maxResolution: 156543,
units: 'm',
controls: [new OpenLayers.Control.MouseDefaults(),
new OpenLayers.Control.LayerSwitcher(),
new
OpenLayers.Control.MousePosition({formatOutput: myFormat}),
new OpenLayers.Control.PanZoomBar()],
displayProjection: new OpenLayers.Projection("EPSG:4326"),
projection: new OpenLayers.Projection("EPSG:900913") });
var layerNLcombined = new OpenLayers.Layer.TMS(
"NL-Combined",
"/tiles/nl/",
{type:'png', getURL: get_nl_osm_url,
border: 1} );
/*
var layerNLcombined2 = new OpenLayers.Layer.TMS(
"NL-Combined2",
[
[ new OpenLayers.Bounds(311549.5,6555477.5,822458.8125,7118943.5),
10,
[
"http://a.tile.openstreetmap.nl/tilecache.py/1.0.0/mapnik/",
"http://b.tile.openstreetmap.nl/tilecache.py/1.0.0/mapnik/",
"http://c.tile.openstreetmap.nl/tilecache.py/1.0.0/mapnik/"
]
],
[ new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
0,
[
"http://a.tile.openstreetmap.org/",
"http://b.tile.openstreetmap.org/",
"http://c.tile.openstreetmap.org/"
]
]
],
{type:'png', getURL: get_fancy_osm_url} );
*/
var layerNL = new OpenLayers.Layer.TMS(
"NL (current)",
[
"http://a.tile.openstreetmap.nl/tilecache.py/1.0.0/mapnik/",
"http://b.tile.openstreetmap.nl/tilecache.py/1.0.0/mapnik/",
"http://c.tile.openstreetmap.nl/tilecache.py/1.0.0/mapnik/"
],
{type:'png', getURL: get_osm_url,
border:1} );
var layerNLfy = new OpenLayers.Layer.TMS(
"NL (Fries/Frysk)",
[
"http://a.tile.openstreetmap.nl/tilecache.py/1.0.0/nld-fy/",
"http://b.tile.openstreetmap.nl/tilecache.py/1.0.0/nld-fy/",
"http://c.tile.openstreetmap.nl/tilecache.py/1.0.0/nld-fy/"
],
{type:'png', getURL: get_osm_url,
border:1} );
var layerNLcarnaval = new OpenLayers.Layer.TMS(
"Carnaval",
[
"http://a.tile.openstreetmap.nl/tilecache.py/1.0.0/nld-carnaval/",
"http://b.tile.openstreetmap.nl/tilecache.py/1.0.0/nld-carnaval/",
"http://c.tile.openstreetmap.nl/tilecache.py/1.0.0/nld-carnaval/"
],
{type:'png', getURL: get_osm_url,
border:1} );
var layerZone = new OpenLayers.Layer.TMS(
"OV Zones (test)",
[
"http://d.tile.openstreetmap.nl/tilecache.py/1.0.0/zonedata/",
"http://e.tile.openstreetmap.nl/tilecache.py/1.0.0/zonedata/",
],
{type:'png', getURL: get_osm_url,
border:1, isBaseLayer: false, visibility: false} );
var layerNLorig = new OpenLayers.Layer.TMS(
"NL (pre-AND)",
"http://tile.openstreetmap.nl/tilecache.py/1.0.0/nld-orig/",
{type:'png', getURL: get_osm_url,
border: 1} );
var layerANDorig = new OpenLayers.Layer.TMS(
"NL (original AND)",
"http://tile.openstreetmap.nl/tilecache.py/1.0.0/and-orig/",
{type:'png', getURL: get_osm_url,
border: 1} );
var layerMapnik = new OpenLayers.Layer.TMS(
"Mapnik",
"http://tile.openstreetmap.org/mapnik/",
{type:'png', getURL: get_osm_url,
border: 1} );
var layerTah = new OpenLayers.Layer.TMS(
"Tiles@Home",
["http://a.tah.openstreetmap.org/Tiles/tile/",
"http://b.tah.openstreetmap.org/Tiles/tile/",
"http://c.tah.openstreetmap.org/Tiles/tile/"],
{type:'png', getURL: get_osm_url,
border: 1} );
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addLayers([layerNL, layerNLcarnaval, layerNLfy, layerNLorig, layerANDorig, layerMapnik, layerTah, layerZone]);
// Must add permalink after adding layers, otherwise it causes
// layers to be loaded too early.
var subpagelookup = {
frysk: [ layerNLfy, 6, 53 ],
carnaval: [layerNLcarnaval, 5.5, 51.6],
orig: [layerNLorig],
and: [layerANDorig],
tah: [layerTah],
mapnik: [layerMapnik]
};
if( subpagelookup[subpage] != null )
{
map.setBaseLayer(subpagelookup[subpage][0]);
map.setLayerIndex(subpagelookup[subpage][0], 0);
}
if( subpage == 'frysk' )
document.title = 'Fryske kaart (NL tileserver)';
map.addControl(new OpenLayers.Control.Permalink() );
map.addControl(new OpenLayers.Control.MousePosition(
{prefix: "RD Coordinates (", separator: ",", suffix: ")",
displayProjection: new OpenLayers.Projection("EPSG:28992"), numdigits:0, displayClass: "olTilePosition" }));
if(!map.getCenter()) {
var pos;
if( subpagelookup[subpage] != null && subpagelookup[subpage].length >= 3 )
pos = new OpenLayers.LonLat(subpagelookup[subpage][1],subpagelookup[subpage][2]);
else
pos = new OpenLayers.LonLat(5,52.25);
map.setCenter(pos.transform(map.displayProjection,map.projection), 10);
}
var info = document.getElementById("info_"+subpage);
if( info != null )
{
info.style.display = "block";
document.getElementById("info").style.display = "none";
}
var info = document.getElementById("forum_"+subpage);
if( info != null )
{
info.style.display = "block";
}
}
//Convert degrees to radian
function degree2radian (degree) {
return (degree / 180) * Math.PI;
}
//Get the number of tiles on a given zoomlevel
function getZoom(level) {
return 2 << level-1;
}
//Convert longitude to a relative X tile (between 0 and 1)
function lon2relativeX (lon) {
var xtile = ((lon + 180) / 360)
return xtile;
}
//Convert latitude to a relative Y tile (between 0 and 1)
function lat2relativeY (lat) {
var lat_rad = degree2radian(lat);
var ytile = (1 - (Math.log(Math.tan(lat_rad) + (1/Math.cos(lat_rad))) / Math.PI)) / 2;
return ytile;
}
function get_osm_url (bounds) {
var res = this.map.getResolution();
var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var path = z + "/" + x + "/" + y + "." + this.type;
var url = this.url;
//Get the number of tiles on this zoom level
var n = getZoom(z);
/*
* Check if the tile is within the bounding box. If so get it from our server
* else get it from the international mapnik server
*/
if (x >= (minx * n) && x <= (maxx * n) && y >= (miny * n) && y <= (maxy *n)) {
url = this.url;
} else {
url = "http://b.tile.openstreetmap.org/";
}
if (url instanceof Array) {
url = this.selectUrl(path, url);
}
return url + path;
}
function get_nl_osm_url (bounds) {
var res = this.map.getResolution();
var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var path = z + "/" + x + "/" + y + "." + this.type;
if( z < 10 || (x >> (z-10)) >= 533 || (x >> (z-10)) <= 519
|| (y >> (z-10)) <= 329 || (y >> (z-10)) >= 344 )
{
return "http://tile.openstreetmap.org/mapnik/" + path;
}
return this.url + path;
}
function get_fancy_osm_url (bounds) {
var url_list = this.url;
for( var i in url_list )
{
if( this.map.getZoom() < url_list[i][1] )
continue;
var extent = url_list[i][0];
if( !extent.containsBounds(bounds, false, true ) )
continue;
var res = this.map.getResolution();
var x = Math.round ((bounds.left - extent.left) / (res * this.tileSize.w));
var y = Math.round ((extent.top - bounds.top) / (res * this.tileSize.h));
var z = this.map.getZoom();
var path = z + "/" + x + "/" + y + "." + this.type;
var base = url_list[i][2];
if (base instanceof Array) {
base = this.selectUrl(path, base);
}
return base + path;
}
}
// -->
</script>
<body onload="init()">
<div id="map"></div>
<div id="help">
<div id="info">
This is the Netherlands tileserver. <a href="info.html">More
information.</a>
<p>
Hosting provided by <a href="http://www.jronline.nl/">JR Online</a>.
</div>
<div style="display:none" id="info_carnaval">
U bekijkt de speciale <a href="http://www.openstreetmap.org">OpenStreetMap</a> Carnavals layer.
<p>
Hosting provided by <a href="http://www.jronline.nl/">JR Online</a>.
</div>
<div style="display:none" id="info_frysk">
Wolkom op de Fryske kaart fan <a href="http://www.openstreetmap.org">OpenStreetMap</a>.
<a href="info.html">Meer ynformaasje (Ingelsk)</a>.
Webstee oanbearn troch <a href="http://www.jronline.nl/">JR Online</a>.
<hr>
Welkom op de Friese kaart van <a href="http://www.openstreetmap.org">OpenStreetMap</a>.
<a href="info.html">Meer informatie (Engels)</a>.
Webhosting aangeboden door <a href="http://www.jronline.nl/">JR Online</a>.
</div>
</div>
<div id="forum_frysk" class="forumLink">Reacties of wijzigingen, zie het <a href="http://forum.openstreetmap.org/viewforum.php?id=17">forum</a>.</div>
<div id="forum_carnaval" class="forumLink">Reacties of wijzigingen, zie het <a href="http://forum.openstreetmap.org/viewforum.php?id=19">forum</a>.</div>
</body>
</html>