GithubHelp home page GithubHelp logo

Custom template about tileserver-php HOT 3 CLOSED

maptiler avatar maptiler commented on September 10, 2024
Custom template

from tileserver-php.

Comments (3)

klokan avatar klokan commented on September 10, 2024

It is a nice idea. This development should happen in a separate branch - with a sample viewer.

from tileserver-php.

daliborjanak avatar daliborjanak commented on September 10, 2024

Implemented. If is in $config['template'] url to file provided then Tilesever will on / include this file if file exists. In this file could be used variables from PHP:
$baseUrls - array with urls to server
$serverTitle - string with name of server from config
$maps - array with metadata about each layer

So the simple example with leaflet of template could be:

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

from tileserver-php.

klokan avatar klokan commented on September 10, 2024

The documentation is available at:
https://github.com/klokantech/tileserver-php/wiki/Template

from tileserver-php.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.