1
0
mirror of https://github.com/klokantech/tileserver-php.git synced 2025-10-23 10:46:04 +02:00

Added examples/demo

This commit is contained in:
jasonwoo
2012-10-03 19:11:18 -04:00
parent e7fb6c17f2
commit 499aa3ac19
40 changed files with 718 additions and 1 deletions

BIN
tileserver/demo/.DS_Store vendored Normal file

Binary file not shown.

BIN
tileserver/demo/abt/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -0,0 +1,90 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>ESRI ArcGIS 9.3+ Example</title>
<!-- POWERED BY TILESERVER.PHP -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0; url=http://www.ie6countdown.com/" />
<script type="text/javascript">window.top.location = 'http://www.ie6countdown.com/';</script>
<![endif]-->
<!--link rel="stylesheet" href="../../css/style.css" type="text/css" media="screen"-->
<style>
body {padding: 0; margin: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #333; }
#header { position: fixed; top:0; left:0; width:100%; height: 45px; z-index:1200; /* box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.5); */ }
#headershade { position: absolute; top:45px; left:0; width:100%; height: 2px; z-index:1200; background-color: rgba(50, 50, 50, 0.2); }
#howto { position: absolute; top:0; padding: 60px; width:100%; height:100%; }
#header { overflow:hidden; background: #fff; border-bottom: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.9) }
#footer { position: fixed; margin: 2 auto; bottom:0; left:0; width:100%; height: 15px; z-index:1200; text-align: center;}
#header h1 { margin:10px; margin-left:20px; font-size: 16pt; font-weight:normal; text-shadow: 1px 1px 1px #DDD; display: inline; line-height: 42px; }
h2 { color: #fff !important; font-size: 28px; }
h3 { color: #fff !important; font-size: 18px; }
h4 { color: #333 !important; font-size: 18px; }
h5 { color: #333 !important; font-size: 14px; }
h6 { color: #333 !important; font-size: 12px; }
hr { border:0; height:20px; }
img { box-shadow: 2px 2px 3px #aaaaaa; }
</style>
<!--script src="../../js/OpenLayers.mobile.wmts.js"></script-->
<script>
// Get rid of address bar on iphone/ipod
var fixSize = function() {
window.scrollTo(0,0);
document.body.style.height = '100%';
if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
if (document.body.parentNode) {
document.body.parentNode.style.height = '100%';
}
}
};
setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);
</script>
</head>
<body>
<div id="content">
<div id="header">
<h1>TileServer OpenSource Project v0.1: Demos</h1>
<a href="http://localhost:8888/tileserverdemo/index.php">Usage details (APIs, WMTS, ArcGIS, etc)</a> |
<a href="http://localhost:8888/tileserverdemo/index.php">Message</a>
</div>
<div id="howto">
<h4>Loading tiles in ESRI ArcGIS 9.3+ through ArcBruTile</h4>
<h5>1. Download and install the <a href="http://arcbrutile.codeplex.com/">ArcBruTile</a> add on for ESRI ArcGIS Desktop</h5>
<h5>2. Under the ArcBruTile Menu select Add TMS Service</h5>
<img src="abt1.jpg">
<br>
<h5>3. Select Add Provider</h5>
<img src="abt2.jpg">
<br>
<h5>4. Enter a Name and Url path to the TMS and select Add Provider</h5>
<img src="abt3.jpg">
<br>
<h5>5. Select Cancel</h5>
<img src="abt4.jpg">
<br>
<h5>6. Add a base map (either OSM or Bing) and zoom to your tiled area of interest</h5>
<img src="abt5.jpg">
<br>
<h5>7. Select Add TMS Service</h5>
<img src="abt6.jpg">
<br>
<h5>8. Select the newly entered provider and service and Add Selected Service</h5>
<img src="abt7.jpg">
<br>
<h5>9. Map tiles are displayed in ArcGIS Desktop as a service</h5>
<img src="abt8.jpg">
<br>
<br>
<br>
</div>
</div>
<div id="footer">
<a href="http://www.github.com/klokantech/tileserver.php/">TileServer.php</a> project by
<a href="http://www.klokantech.com/"> Klokan Technologies</a>
</div>
</body>
</html>

BIN
tileserver/demo/abt/abt1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
tileserver/demo/abt/abt2.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
tileserver/demo/abt/abt3.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
tileserver/demo/abt/abt4.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

BIN
tileserver/demo/abt/abt5.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

BIN
tileserver/demo/abt/abt6.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB

BIN
tileserver/demo/abt/abt7.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

BIN
tileserver/demo/abt/abt8.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

View File

@@ -0,0 +1,82 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>ESRI ArcGIS 10.1+ Example</title>
<!-- POWERED BY TILESERVER.PHP -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0; url=http://www.ie6countdown.com/" />
<script type="text/javascript">window.top.location = 'http://www.ie6countdown.com/';</script>
<![endif]-->
<!--link rel="stylesheet" href="../../css/style.css" type="text/css" media="screen"-->
<style>
body {padding: 0; margin: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #333; }
#header { position: fixed; top:0; left:0; width:100%; height: 45px; z-index:1200; /* box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.5); */ }
#headershade { position: absolute; top:45px; left:0; width:100%; height: 2px; z-index:1200; background-color: rgba(50, 50, 50, 0.2); }
#howto { position: absolute; top:0; padding: 60px; width:100%; height:100%; }
#header { overflow:hidden; background: #fff; border-bottom: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.9) }
#footer { position: fixed; margin: 2 auto; bottom:0; left:0; width:100%; height: 15px; z-index:1200; text-align: center;}
#header h1 { margin:10px; margin-left:20px; font-size: 16pt; font-weight:normal; text-shadow: 1px 1px 1px #DDD; display: inline; line-height: 42px; }
h2 { color: #fff !important; font-size: 28px; }
h3 { color: #fff !important; font-size: 18px; }
h4 { color: #333 !important; font-size: 18px; }
h5 { color: #333 !important; font-size: 14px; }
h6 { color: #333 !important; font-size: 12px; }
hr { border:0; height:20px; }
img { box-shadow: 2px 2px 3px #aaaaaa; }
</style>
<!--script src="../../js/OpenLayers.mobile.wmts.js"></script-->
<script>
// Get rid of address bar on iphone/ipod
var fixSize = function() {
window.scrollTo(0,0);
document.body.style.height = '100%';
if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
if (document.body.parentNode) {
document.body.parentNode.style.height = '100%';
}
}
};
setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);
</script>
</head>
<body>
<div id="content">
<div id="header">
<h1>TileServer OpenSource Project v0.1: Demos</h1>
<a href="http://localhost:8888/tileserverdemo/index.php">Usage details (APIs, WMTS, ArcGIS, etc)</a> |
<a href="http://localhost:8888/tileserverdemo/index.php">Message</a>
</div>
<div id="howto">
<h4>Loading tiles in ESRI ArcGIS 10.1+ as WMTS Service</h4>
<h5>1. Open ArcCatalog</h5>
<img src="arcgis1.jpg">
<br>
<h5>3. Select Add WMTS Server</h5>
<img src="arcgis2.jpg">
<br>
<h5>4. Enter Url path to WMTS, click Get Layers, select a layer and click OK</h5>
<img src="arcgis3.jpg">
<br>
<h5>5. Right click on newly added WMTS service and select Connect</h5>
<img src="arcgis4.jpg">
<br>
<h5>6. Choose a layer and drag and drop into the map view window</h5>
<img src="arcgis5.jpg">
<br>
<h5>6. Map tiles are displayed in ArcGIS Desktop as a WMTS service</h5>
<img src="arcgis6.jpg">
<br>
<br>
</div>
</div>
<div id="footer">
<a href="http://www.github.com/klokantech/tileserver.php/">&nbspTileServer.php</a> project by
<a href="http://www.klokantech.com/"> Klokan Technologies</a>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

View File

@@ -0,0 +1,55 @@
<!doctype html>
<html>
<head>
<title>Leaflet Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
}
</style>
</head>
<body>
<!--div id="map" style="width: 600px; height: 400px"></div-->
<div id="map"></div>
<script>
var cloudmadeAttribution = 'Map data &copy; 2012 OpenStreetMap contributors, Imagery &copy; 2012 CloudMade',
cloudmadeUrl = 'http://{s}.tile.cloudmade.com/C644D90FB68B441A974CDEA857189019/{styleId}/256/{z}/{x}/{y}.png';
var minimal = new L.TileLayer(cloudmadeUrl, {attribution:cloudmadeAttribution, styleId: 22677}),
midnightCommander = new L.TileLayer(cloudmadeUrl, {attribution:cloudmadeAttribution, styleId: 999}),
fresh = new L.TileLayer(cloudmadeUrl, {attribution:cloudmadeAttribution, styleId: 998});
var xyzurl = '../chicago/{z}/{x}/{y}.png'
var xyzlyr = new L.TileLayer(xyzurl,{minZoom: 4, maxZoom: 16, errorTileUrl: '../chicago/none.png', tileSize:256, scheme: 'xyz'});
var map = new L.Map('map', {center: new L.LatLng(41.88, -87.63), zoom: 13, layers: [fresh, xyzlyr]});
var baseMaps = {
"Fresh": fresh,
"Minimal": minimal,
"Night View": midnightCommander
};
var overlayMaps = {
"Chicago": xyzlyr,
};
layersControl = new L.Control.Layers(baseMaps, overlayMaps);
map.addControl(layersControl);
</script>
</body>
</html>

View File

@@ -0,0 +1,28 @@
<!doctype html>
<html>
<head>
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'>
</div>
<script>
var m = mapbox.map('map');
m.addLayer(mapbox.layer().id('examples.map-sjm2w6i9'));
var template = '../chicago/{Z}/{X}/{Y}.png';
m.addLayer(new MM.TemplatedLayer(template));
m.ui.attribution.add()
.content('Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.');
m.ui.zoomer.add();
m.ui.zoombox.add();
m.centerzoom({ lat:41.88, lon: -87.63 }, 12);
</script>
</body>
</html>

View File

@@ -0,0 +1,71 @@
<html>
<head>
<meta charset="utf-8"/>
<title>Chicago WMTS Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
.olControlAttribution {
position : absolute;
font-size : 10px;
bottom : 0 !important;
right : 0 !important;
background : rgba(0,0,0,0.1);
font-family : Arial;
padding : 2px 4px;
border-radius : 5px 0 0 0;
}
.olImageLoadError {
display: none !important;
}
</style>
<script type="text/javascript">
var zoom = 13;
function init(){
var arrayOSM = ["http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"];
var baseOSM = new OpenLayers.Layer.OSM("OSM Tiles", arrayOSM);
var wmts = new OpenLayers.Layer.WMTS({
name: "chicago wmts",
requestEncoding: 'REST',
url: "http://localhost:8888/tileserverdemo/chicago/{TileMatrix}/{TileCol}/{TileRow}.png",
layer: "chicago",
matrixSet: "GoogleMapsCompatible",
format: "image/png",
style: "_null",
opacity: 1.0,
isBaseLayer: false,
});
var map = new OpenLayers.Map({
div: "map",
layers: [baseOSM,wmts],
projection: "EPSG:3857",
controls: [
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.Permalink({anchor: true})
]
});
map.setCenter(new OpenLayers.LonLat(-87.63,41.88).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), zoom);
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>

View File

@@ -0,0 +1,64 @@
<html>
<head>
<meta charset="utf-8"/>
<title>Chicago Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--meta http-equiv="content-type" content="text/html; charset=utf-8"/-->
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<style type="text/css">
.olControlAttribution {
position : absolute;
font-size : 10px;
bottom : 0 !important;
right : 0 !important;
background : rgba(0,0,0,0.1);
font-family : Arial;
padding : 2px 4px;
border-radius : 5px 0 0 0;
}
.olImageLoadError {
display: none !important;
}
</style>
<script type="text/javascript">
var zoom = 13;
function init(){
var arrayOSM = ["http://otile1.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile2.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile3.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png",
"http://otile4.mqcdn.com/tiles/1.0.0/osm/${z}/${x}/${y}.png"];
var baseOSM = new OpenLayers.Layer.OSM("OSM Tiles", arrayOSM);
var chicago = new OpenLayers.Layer.XYZ( "Chicago Aerial","../chicago/${z}/${x}/${y}.png",
{isBaseLayer: false, visibility: true, transitionEffect: "resize", numZoomLevels:16 } );
var map = new OpenLayers.Map({
div: "map",
layers: [baseOSM,chicago],
projection: "EPSG:900913",
controls: [
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.Permalink({anchor: true})
]
});
map.setCenter(new OpenLayers.LonLat(-87.63,41.88).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject()), zoom);
}
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>

View File

@@ -0,0 +1,85 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Quantum GIS 1.9+ Example</title>
<!-- POWERED BY TILESERVER.PHP -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0; url=http://www.ie6countdown.com/" />
<script type="text/javascript">window.top.location = 'http://www.ie6countdown.com/';</script>
<![endif]-->
<!--link rel="stylesheet" href="../../css/style.css" type="text/css" media="screen"-->
<style>
body {padding: 0; margin: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #333; }
#header { position: fixed; top:0; left:0; width:100%; height: 45px; z-index:1200; /* box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.5); */ }
#headershade { position: absolute; top:45px; left:0; width:100%; height: 2px; z-index:1200; background-color: rgba(50, 50, 50, 0.2); }
#howto { position: absolute; top:0; padding: 60px; width:100%; height:100%; }
#header { overflow:hidden; background: #fff; border-bottom: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.9) }
#footer { position: fixed; margin: 2 auto; bottom:0; left:0; width:100%; height: 15px; z-index:1200; text-align: center;}
#header h1 { margin:10px; margin-left:20px; font-size: 16pt; font-weight:normal; text-shadow: 1px 1px 1px #DDD; display: inline; line-height: 42px; }
h2 { color: #fff !important; font-size: 28px; }
h3 { color: #fff !important; font-size: 18px; }
h4 { color: #333 !important; font-size: 18px; }
h5 { color: #333 !important; font-size: 14px; }
h6 { color: #333 !important; font-size: 12px; }
hr { border:0; height:20px; }
img { box-shadow: 2px 2px 3px #aaaaaa; }
</style>
<!--script src="../../js/OpenLayers.mobile.wmts.js"></script-->
<script>
// Get rid of address bar on iphone/ipod
var fixSize = function() {
window.scrollTo(0,0);
document.body.style.height = '100%';
if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
if (document.body.parentNode) {
document.body.parentNode.style.height = '100%';
}
}
};
setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);
</script>
</head>
<body>
<div id="content">
<div id="header">
<h1>TileServer OpenSource Project v0.1: Demos</h1>
<a href="http://localhost:8888/tileserverdemo/index.php">Usage details (APIs, WMTS, ArcGIS, etc)</a> |
<a href="http://localhost:8888/tileserverdemo/index.php">Message</a>
</div>
<div id="howto">
<h4>Loading tiles in Quantum GIS (qgis) 1.9+ as WMTS Service</h4>
<h5>1. Under the Layer menu select Add WMS Layer (or Ctrl+Shift+W)</h5>
<img src="qgis1.jpg">
<br>
<h5>3. Select New to add a service</h5>
<img src="qgis2.jpg">
<br>
<h5>4. Enter Name, Url path to WMTS and click OK</h5>
<img src="qgis3.jpg">
<br>
<h5>5. Select Connect</h5>
<img src="qgis4.jpg">
<br>
<h5>6. Choose a layer and select Add</h5>
<img src="qgis5.jpg">
<br>
<h5>7. Select Close to close the Add Layers Dialog Box</h5>
<img src="qgis6.jpg">
<br>
<h5>8. Map tiles are displayed in Quantum GIS Desktop as a WMTS service</h5>
<img src="qgis7.jpg">
<br>
<br>
</div>
</div>
<div id="footer">
<a href="http://www.github.com/klokantech/tileserver.php/">&nbspTileServer.php</a> project by
<a href="http://www.klokantech.com/"> Klokan Technologies</a>
</div>
</body>
</html>

BIN
tileserver/demo/qgis/qgis1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
tileserver/demo/qgis/qgis2.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
tileserver/demo/qgis/qgis3.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

BIN
tileserver/demo/qgis/qgis4.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

BIN
tileserver/demo/qgis/qgis5.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

BIN
tileserver/demo/qgis/qgis6.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
tileserver/demo/qgis/qgis7.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
tileserver/demo/udig/.DS_Store vendored Normal file

Binary file not shown.

View File

@@ -0,0 +1,76 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>uDig Example</title>
<!-- POWERED BY TILESERVER.PHP -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<!--[if lte IE 6]>
<meta http-equiv="refresh" content="0; url=http://www.ie6countdown.com/" />
<script type="text/javascript">window.top.location = 'http://www.ie6countdown.com/';</script>
<![endif]-->
<!--link rel="stylesheet" href="../../css/style.css" type="text/css" media="screen"-->
<style>
body {padding: 0; margin: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #333; }
#header { position: fixed; top:0; left:0; width:100%; height: 45px; z-index:1200; /* box-shadow: 0px 3px 5px rgba(50, 50, 50, 0.5); */ }
#headershade { position: absolute; top:45px; left:0; width:100%; height: 2px; z-index:1200; background-color: rgba(50, 50, 50, 0.2); }
#howto { position: absolute; top:0; padding: 60px; width:100%; height:100%; }
#header { overflow:hidden; background: #fff; border-bottom: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.9) }
#footer { position: fixed; margin: 2 auto; bottom:0; left:0; width:100%; height: 15px; z-index:1200; text-align: center;}
#header h1 { margin:10px; margin-left:20px; font-size: 16pt; font-weight:normal; text-shadow: 1px 1px 1px #DDD; display: inline; line-height: 42px; }
h2 { color: #fff !important; font-size: 28px; }
h3 { color: #fff !important; font-size: 18px; }
h4 { color: #333 !important; font-size: 18px; }
h5 { color: #333 !important; font-size: 14px; }
h6 { color: #333 !important; font-size: 12px; }
hr { border:0; height:20px; }
img { box-shadow: 2px 2px 3px #aaaaaa; }
</style>
<!--script src="../../js/OpenLayers.mobile.wmts.js"></script-->
<script>
// Get rid of address bar on iphone/ipod
var fixSize = function() {
window.scrollTo(0,0);
document.body.style.height = '100%';
if (!(/(iphone|ipod)/.test(navigator.userAgent.toLowerCase()))) {
if (document.body.parentNode) {
document.body.parentNode.style.height = '100%';
}
}
};
setTimeout(fixSize, 700);
setTimeout(fixSize, 1500);
</script>
</head>
<body>
<div id="content">
<div id="header">
<h1>TileServer OpenSource Project v0.1: Demos</h1>
<a href="http://localhost:8888/tileserverdemo/index.php">Usage details (APIs, WMTS, ArcGIS, etc)</a> |
<a href="http://localhost:8888/tileserverdemo/index.php">Message</a>
</div>
<div id="howto">
<h4>Loading XYZ tiles in uDig Desktop GIS</h4>
<h5>1. Under the Layer Menu select Add (or Crtl+L then A)</h5>
<img src="udig1.jpg">
<br>
<h5>3. Choose Web Map Tiles and select Next</h5>
<img src="udig2.jpg">
<br>
<h5>4. Select Custom Server and enter the Url path to XYZ tiles, click Next</h5>
<img src="udig3.jpg">
<br>
<h5>5. Map tiles are displayed in uDig as an XYZ layer</h5>
<img src="udig4.jpg">
<br>
<br>
</div>
</div>
<div id="footer">
<a href="http://www.github.com/klokantech/tileserver.php/">&nbspTileServer.php</a> project by
<a href="http://www.klokantech.com/"> Klokan Technologies</a>
</div>
</body>
</html>

BIN
tileserver/demo/udig/udig1.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

BIN
tileserver/demo/udig/udig2.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

BIN
tileserver/demo/udig/udig3.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

BIN
tileserver/demo/udig/udig4.jpg Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 KiB