mirror/php-tileserver
1
0
Fork 0
mirror of https://github.com/klokantech/tileserver-php.git synced 2025-08-03 21:27:52 +02:00
Code Issues Releases Wiki Activity

Added examples/demo

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored Normal file
View File

Binary file not shown.

BIN
tileserver/.DS_Store vendored Normal file
View File

Binary file not shown.

2
tileserver/css/style.css
View File

@@ -36,11 +36,11 @@ body { overflow:hidden; padding: 0; margin: 0; width: 100%; height: 100%; font-f
#header { position: absolute; 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); }
#map { position: absolute; top:0; left:0; width:100%; height:100%; }
#button { position:absolute; right:10px; top:6px; }
#button-mobile { position:absolute; right:10px; top:6px; width:30px; }
a { text-decoration: none; color: #4183C4; }
a:hover { text-decoration: underline; }
.fade { padding:10%; overflow-y: auto; position:absolute; top:45px;left:0;right:0;bottom:0; text-align:center; background-color: #666; background-color: rgba(0, 0, 0, 0.6); z-index:1100; color: #ddd; font-weight:bold; text-shadow: 0px 1px 0px black; }
.fade a { color: #90C6FF; }

BIN
tileserver/demo/.DS_Store vendored Normal file
View File

Binary file not shown.

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

Binary file not shown.

90
tileserver/demo/abt/abt.html Normal file
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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 103 KiB

82
tileserver/demo/arcgis10/arcgis.html Normal file
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>

BIN
tileserver/demo/arcgis10/arcgis1.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
tileserver/demo/arcgis10/arcgis2.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
tileserver/demo/arcgis10/arcgis3.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
tileserver/demo/arcgis10/arcgis4.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

BIN
tileserver/demo/arcgis10/arcgis5.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

BIN
tileserver/demo/arcgis10/arcgis6.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

55
tileserver/demo/leafletxyz.html Normal file
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>

28
tileserver/demo/mapboxjsxyz.html Normal file
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>

71
tileserver/demo/openlayerswmts.html Normal file
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>

64
tileserver/demo/openlayersxyz.html Normal file
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>

85
tileserver/demo/qgis/qgis.html Normal file
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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

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

Binary file not shown.

76
tileserver/demo/udig/udig.html Normal file
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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 107 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

166
tileserver/index.php Normal file
View File

@@ -0,0 +1,166 @@
<?php
require "tileserver.php";
$maps = maps();
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title><?php echo $config['serverTitle'] ?></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">
<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);
var activeView = "";
function toggle(view) {
if (activeView !== "")
document.getElementById(activeView).style.display = "none";
if (activeView !== view) {
document.getElementById(view).style.display = "block";
activeView = view;
} else {
activeView = "";
}
}
</script>
</head>
<body>
<div id="content">
<div id="header">
<h1>TileServer OpenSource Project v0.1: Demo</h1>
<a href="" onClick="toggle('usage'); return false;">Usage details (APIs, WMTS, ArcGIS, etc)</a> |
<a href="" onClick="toggle('message'); return false;">Message</a>
<button id="button" class="cupid-green" onClick="toggle('gallery'); return false;">Other maps</button>
</div>
<div id="map"></div>
<div id="headershade"></div>
<div id="push"></div>
</div>
<div id="gallery" class="fade">
<h2>Choose a map</h2>
You can open one of the maps exposed with this TileServer service:
<hr/>
<?php
# Are there some maps on the server?
if (count($maps) == 0) { ?>
<h3>No maps available yet</h3>
<?php
# Print the available maps
} else {
// print_r($maps);
echo "<h3>Available maps</h3>";
echo $metadata;
/*echo "<ul>";
foreach ($maps as $map) {
//One approach to figure out the center of the bounding box
$bounds = $map['bounds'];
//Convert the map bounds to XY Spherical Mercator
list( $minx, $miny ) = $mercator->LatLonToMeters($bounds[1], $bounds[0]);
list( $maxx, $maxy ) = $mercator->LatLonToMeters($bounds[3], $bounds[2]);
$bounds = array( $minx, $miny, $maxx, $maxy );
//Use meters figure out the center of the bounding box
$mx= $bounds[2]+(($bounds[0]-$bounds[2])/2);
$my= $bounds[3]+(($bounds[1]-$bounds[3])/2);
//Convert the bounding box back to LatLon
$LatLonOut = $mercator->MetersToLatLon($mx, $my);
$lat = $LatLonOut[0];
$lon = $LatLonOut[1];
$zoom = 15;
//Figure out the XY tile names
$xtile = floor((($lon + 180) / 360) * pow(2, $zoom));
$ytile = floor((1 - log(tan(deg2rad($lat)) + 1 / cos(deg2rad($lat))) / pi()) /2 * pow(2, $zoom));
//echo "<li><a class=\"thumb\" href=\"".$map['basename']."\"style=\"background-image:url(".$baseUrl."".$map['basename']."/".$zoom."/".$xtile."/".$ytile.".png".");\">".$map['name']."</a>";
//debug: uncomment to hard code a thumbnail tile
//echo "<li><a class=\"thumb\" href=\"".$map['basename']."\"style=\"background-image:url(".$baseUrl."".$map['basename']."/".intval(16)."/".intval(16816)."/".intval(24351).".png".");\">".$map['name']."</a>";
}
echo "</ul>";*/
}
?>
<a class="thumb" href="chicago/googlemaps.html" style="background-image:url(http://localhost:8888/tileserverdemo/chicago/16/16816/24351.png);">chicago</a>
<a class="thumb" href="dogami/googlemaps.html" style="background-image:url(http://localhost:8888/tileserverdemo/dogami/15/5104/11681.png);">dogami</a>
<a class="thumb" href="#mapbox.natural-earth-2" style="background-image:url(http://a.tiles.mapbox.com/v3/mapbox.natural-earth-2/thumb.png);">natural earth</a>
</div>
<div id="message" class="fade">
<h2>TileServer.php successfully installed</h2>
Now you should upload some maps into /sdfasfjas/fadfa/afsdf/asfasdf/asdfasdf/afasdf on your server.
<p>Supported formats are: a directory with TMS or XYZ tileset or a file with extention .mbtiles.
<p>You can easily prepare you maps with <a href="http://www.maptiler.org/">MapTiler</a> or <a href="http://mapbox.com/tilemill/">TileMill</a>.
</div>
<div id="usage" class="fade">
<h2>Use this map in your website or desktop GIS software</h2>
This website is directly optimized for mobile phones and tablets.<br/>
The map can be easily used in other websites, mobile devices or traditional desktop applications.
<h3>How to load this map in a desktop software:</h3>
<a href="#">Google Earth</a> | <a href="demo/qgis/qgis.html">QuantumGIS (qgis) 1.9+</a> | <a href="demo/udig/udig.html">UDig</a> | <a href="demo/abt/abt.html">ESRI ArcGIS Desktop 9.3+</a> | <a href="demo/arcgis10/arcgis.html">ESRI ArcGIS Desktop 10.1+</a>
<h3>Use this map with web mapping API:</h3>
<a href="chicago/googlemaps.html">Google Maps V3</a> | <a href="demo/openlayersxyz.html">OpenLayers XYZ</a> | <a href="demo/openlayerswmts.html">OpenLayers WMTS</a> | <a href="demo/leafletxyz.html">Leaflet</a> | <a href="demo/mapboxjsxyz.html">Mapbox</a>
<h3>Or standardized protocols:</h3>
<a href="#">WMTS</a> | <a href="#">TMS</a> | <a href="#">QuadKey</a> | <a href="#">KML</a>
<p>
</div>
<a href="http://www.github.com/klokantech/tileserver.php/">TileServer.php</a> project by
<a href="http://www.klokantech.com/">Klokan Technologies</a>
<script type="text/javascript">
var urls = [
"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 map = new OpenLayers.Map({
div: "map",
theme: null,
layers: [
new OpenLayers.Layer.XYZ("OSM (with buffer)", urls, {
transitionEffect: "resize", buffer: 1, sphericalMercator: true,
attribution: "Data CC-By-SA by <a href='http://openstreetmap.org/'>OpenStreetMap</a>"
})
],
controls: [
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true
}
}),
new OpenLayers.Control.Zoom(),
new OpenLayers.Control.Attribution()
],
center: [0, 3000000],
zoom: 3
});
//map.zoomToMaxExtent();
</script>
</body>
</html>