napo/template_tilelayer_mask.html

## template_tilelayer_mask.html
<!doctype html>
<html>
<head>
        <meta charset="UTF-8">
	<!-- inserire il titolo della mappa -->
    	<title>titolo della mappa</title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
        <script src="http://frogcat.github.io/leaflet-tilelayer-mask/leaflet-tilelayer-mask.js"></script>
    	<script src="http://labmod.org/maps/trento1915/leaflet-hash.js"></script>
  	 <style type="text/css">
        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
        }

        #map {
            width: 99%;
            height: 100%;
        }

     </style>
</head>
<body>
	<div id="map"></div>
    <br>

	<script type="text/JavaScript">
	/*
	inserire le coordinate dell'angolo in basso a destra (southWest)
	inserire le coordiante dell'angolo in basso a sinistra (northEast)
	*/
        var southWest = L.latLng(46.05858084649358, 11.102843284606934),
    	    northEast = L.latLng(46.07879771278557, 11.1436128616333),
	    bounds = L.latLngBounds(southWest, northEast);

	var layer1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright/it">OpenStreetMap contributors</a>'
        });
	/* inserire l'indirizzo del TMS di Mapwarper
	   e cambiare il titolo che si vuole avere sotto la mappa */
        var layer2 = L.tileLayer.mask('http://mapwarper.net/maps/tile/19481/{z}/{x}/{y}.png',{
            attribution: 'sottotitolo da cambiare'
        });
        /* inserire le coordinate del centro
	   e il livello di zoom
	  */
        var map = new L.map('map', {
            center: new L.LatLng(46.06847,11.11925),
            zoom: 17,
	    maxBounds: bounds,
            inertia: false,
            layers: [layer1, layer2],
            zoomControl: true
       	   }).on("mousemove", function(e) {
             layer2.setCenter(e.containerPoint.x, e.containerPoint.y);
           }).zoomControl.setPosition("topleft");

	var hash = new L.Hash(map);
	L.control.scale().addTo(map);
	</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<!-- inserire il titolo della mappa -->
	<title>titolo della mappa</title>
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
	<script src="http://frogcat.github.io/leaflet-tilelayer-mask/leaflet-tilelayer-mask.js"></script>
	<script src="http://labmod.org/maps/trento1915/leaflet-hash.js"></script>
	<style type="text/css">
	body, html {
	height: 100%;
	width: 100%;
	margin: 0;
	}

	#map {
	width: 99%;
	height: 100%;
	}

	</style>
	</head>
	<body>
	<div id="map"></div>
	<br>

	<script type="text/JavaScript">
	/*
	inserire le coordinate dell'angolo in basso a destra (southWest)
	inserire le coordiante dell'angolo in basso a sinistra (northEast)
	*/
	var southWest = L.latLng(46.05858084649358, 11.102843284606934),
	northEast = L.latLng(46.07879771278557, 11.1436128616333),
	bounds = L.latLngBounds(southWest, northEast);

	var layer1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright/it">OpenStreetMap contributors</a>'
	});
	/* inserire l'indirizzo del TMS di Mapwarper
	e cambiare il titolo che si vuole avere sotto la mappa */
	var layer2 = L.tileLayer.mask('http://mapwarper.net/maps/tile/19481/{z}/{x}/{y}.png',{
	attribution: 'sottotitolo da cambiare'
	});
	/* inserire le coordinate del centro
	e il livello di zoom
	*/
	var map = new L.map('map', {
	center: new L.LatLng(46.06847,11.11925),
	zoom: 17,
	maxBounds: bounds,
	inertia: false,
	layers: [layer1, layer2],
	zoomControl: true
	}).on("mousemove", function(e) {
	layer2.setCenter(e.containerPoint.x, e.containerPoint.y);
	}).zoomControl.setPosition("topleft");

	var hash = new L.Hash(map);
	L.control.scale().addTo(map);
	</script>
	</body>
	</html>