Added examples/demo
BIN
tileserver/demo/.DS_Store
vendored
Normal file
BIN
tileserver/demo/abt/.DS_Store
vendored
Normal file
90
tileserver/demo/abt/abt.html
Normal 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
After Width: | Height: | Size: 49 KiB |
BIN
tileserver/demo/abt/abt2.jpg
Executable file
After Width: | Height: | Size: 35 KiB |
BIN
tileserver/demo/abt/abt3.jpg
Executable file
After Width: | Height: | Size: 30 KiB |
BIN
tileserver/demo/abt/abt4.jpg
Executable file
After Width: | Height: | Size: 29 KiB |
BIN
tileserver/demo/abt/abt5.jpg
Executable file
After Width: | Height: | Size: 45 KiB |
BIN
tileserver/demo/abt/abt6.jpg
Executable file
After Width: | Height: | Size: 109 KiB |
BIN
tileserver/demo/abt/abt7.jpg
Executable file
After Width: | Height: | Size: 31 KiB |
BIN
tileserver/demo/abt/abt8.jpg
Executable file
After Width: | Height: | Size: 103 KiB |
82
tileserver/demo/arcgis10/arcgis.html
Normal 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/"> TileServer.php</a> project by
|
||||
<a href="http://www.klokantech.com/"> Klokan Technologies</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
BIN
tileserver/demo/arcgis10/arcgis1.jpg
Executable file
After Width: | Height: | Size: 46 KiB |
BIN
tileserver/demo/arcgis10/arcgis2.jpg
Executable file
After Width: | Height: | Size: 62 KiB |
BIN
tileserver/demo/arcgis10/arcgis3.jpg
Executable file
After Width: | Height: | Size: 53 KiB |
BIN
tileserver/demo/arcgis10/arcgis4.jpg
Executable file
After Width: | Height: | Size: 66 KiB |
BIN
tileserver/demo/arcgis10/arcgis5.jpg
Executable file
After Width: | Height: | Size: 64 KiB |
BIN
tileserver/demo/arcgis10/arcgis6.jpg
Executable file
After Width: | Height: | Size: 81 KiB |
55
tileserver/demo/leafletxyz.html
Normal 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 © 2012 OpenStreetMap contributors, Imagery © 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
@@ -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
@@ -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
@@ -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
@@ -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/"> TileServer.php</a> project by
|
||||
<a href="http://www.klokantech.com/"> Klokan Technologies</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
BIN
tileserver/demo/qgis/qgis1.jpg
Executable file
After Width: | Height: | Size: 80 KiB |
BIN
tileserver/demo/qgis/qgis2.jpg
Executable file
After Width: | Height: | Size: 49 KiB |
BIN
tileserver/demo/qgis/qgis3.jpg
Executable file
After Width: | Height: | Size: 74 KiB |
BIN
tileserver/demo/qgis/qgis4.jpg
Executable file
After Width: | Height: | Size: 49 KiB |
BIN
tileserver/demo/qgis/qgis5.jpg
Executable file
After Width: | Height: | Size: 51 KiB |
BIN
tileserver/demo/qgis/qgis6.jpg
Executable file
After Width: | Height: | Size: 40 KiB |
BIN
tileserver/demo/qgis/qgis7.jpg
Executable file
After Width: | Height: | Size: 80 KiB |
BIN
tileserver/demo/udig/.DS_Store
vendored
Normal file
76
tileserver/demo/udig/udig.html
Normal 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/"> TileServer.php</a> project by
|
||||
<a href="http://www.klokantech.com/"> Klokan Technologies</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
BIN
tileserver/demo/udig/udig1.jpg
Executable file
After Width: | Height: | Size: 96 KiB |
BIN
tileserver/demo/udig/udig2.jpg
Executable file
After Width: | Height: | Size: 80 KiB |
BIN
tileserver/demo/udig/udig3.jpg
Executable file
After Width: | Height: | Size: 107 KiB |
BIN
tileserver/demo/udig/udig4.jpg
Executable file
After Width: | Height: | Size: 94 KiB |