mirror/php-tileserver
1
0
Fork 0
mirror of https://github.com/klokantech/tileserver-php.git synced 2025-08-05 06:07:48 +02:00
Code Issues Releases Wiki Activity

Updated documentation for a custom template

Petr Pridal
2016-05-04 14:07:36 +02:00
parent 925631280a
commit 4f52a73ed2
2 changed files with 108 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
Template.md Normal file

@@ -0,0 +1,108 @@
## TileServer-PHP: Custom look&feel with a template
TileServer-PHP project uses TileViewer for the frontend. TileViewer shows several sample web viewers for the most popular JavaScript libraries such as Google Maps API, OpenLayers or Leaflet. In TileViewer there are also tutorials, embed links, guides for the GIS software on desktop, etc.
The user of the TileServer-PHP project can replace this default frontend with a different one - using a custom template.
The tileserver may then get a completely different branding and look&feel for the online visitors.
The custom template is a separate HTML or PHP file - linked from the main tileserver.php script.
There are several PHP variables available for use in the template:
- `$baseUrls` - array with URLs to server
- `$serverTitle` - string with name of server from config
- `$maps` - array with metadata about each layer
To start to use the template user should uncomment [line 13](https://github.com/klokantech/tileserver-php/blob/master/tileserver.php#L13) in the tileserver.php file and set a correct template filename e.g. `$config['template'] = 'template.php'`. If server runs in docker, the path to the environment variable could be used instead.
A sample template file showing Leaflet application with a layer switcher listing all layers in TileServer-PHP is available at:
``` php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; position: fixed; font-family: Verdana, Geneva, sans-serif; font-size: 12pt; color: #666666;}
h1{margin: 0; padding: 0; font-size: 24pt;}
label{font-size: 11pt; cursor: pointer;}
header{position: fixed; top: 10px; right: 10px; z-index: 1000;}
#map{position: fixed; width: 100%; height: 100%; margin: 0; padding: 0;}
#sliders{position: fixed; bottom: 10px; left: 10px; z-index: 1000;}
.bg{background-color: #fff; opacity: 0.9; padding: 10px 15px}
</style>
<title><?php echo $serverTitle ?></title>
</head>
<body>
<div id="page">
<div id="map"></div>
<script type="text/javascript">
<?php foreach ($maps as $map) { ?>
var <?php echo $map['basename'] ?>Bounds = new L.LatLngBounds(
new L.LatLng(<?php echo $map['bounds'][1] . ',' . $map['bounds'][0] ?>),
new L.LatLng(<?php echo $map['bounds'][3] . ',' . $map['bounds'][2] ?>));
var <?php echo $map['basename'] ?> = L.tileLayer(
'<?php echo 'http://' . $baseUrls[0] . '/' . $map['basename'] . '/{z}/{x}/{y}.' . $map['format'] ?>', {
minZoom: <?php echo $map['minzoom']; ?>,
maxZoom: <?php echo $map['maxzoom']; ?>,
opacity: 1,
bounds: <?php echo $map['basename'] ?>Bounds,
zIndex: 1
});
<?php } ?>
var OSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
});
var layers = [OSM
<?php
foreach ($maps as $map) {
echo ','.$map['basename'];
}
?>
];
var map = L.map('map', {
center: [50.2311, 17.24],
zoom: 12,
layers: layers
});
function updateOpacity(layer, value) {
layer.setOpacity(value);
}
function updateVisibility(layer, zIndex, checked) {
if (checked) {
layer.addTo(map);
layer.setZIndex(zIndex);
} else {
map.removeLayer(layer);
}
}
function fitBounds(layer) {
map.fitBounds(layer.options.bounds);
layer.bringToFront();
}
</script>
<div id="control">
<header class="bg">
<h1><?php echo $serverTitle ?></h1>
</header>
<div id="sliders" class="bg">
<?php foreach ($maps as $map) { ?>
<input type="checkbox" name="layerchecker"
onclick="updateVisibility(<?php echo $map['basename'] ?>, 1, this.checked);" checked>
<label onclick="fitBounds(<?php echo $map['basename'] ?>)"><?php echo $map['name'] ?></label><br>
<input id="slide" type="range" min="0" max="1" step="0.1" value="1"
onchange="updateOpacity(<?php echo $map['basename'] ?>, this.value)">
<br>
<?php } ?>
</div>
</div>
</div>
</body>
</html>
```
Gist: https://gist.github.com/klokan/09fb9981b5c3ca3407a1b07839f0653b

9
TileServer-php.md

@@ -1,9 +0,0 @@
## Custom templates
TileServer in default uses Klokantech's TileViewer. TileViewer is constructed as viewer/example base. You can find there pre-generated viewers from most used JavaScript libraries such as google Maps API, OpenLayers or Leaflet. In TileViewer is also tutorials, embed links, links to GIS web services provided by TileServer and more.
In TileServer is possible to define a custom template which will be served on a root instead of TileViewer. The template is meant as single HTML or PHP file which will be included into a script. To define a template and turn on this functionality is necessary to uncomment variable on [line 13](https://github.com/klokantech/tileserver-php/blob/master/tileserver.php#L13) in a tileserver.php file and set a right string name of template e.g. `$config['template'] = 'template.php'`. If you are running it in docker you can set template variables as environment variable.
In this file could be used variables from PHP with information about layers. TileServer puts those variables into PHP template. Flowing variables are provided:
`$baseUrls` - array with URLs to server
`$serverTitle` - string with name of server from config
`$maps` - array with metadata about each layer