Skip to content
This repository has been archived by the owner on Jun 25, 2024. It is now read-only.

Template

Jump to bottom
Petr Pridal edited this page May 4, 2016 · 1 revision

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 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:

<!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

Clone this wiki locally