Mapzen Terrarium by wboykinm

index.html

<!DOCTYPE html>

<html>
<head>
  <title>Mapzen Shaded Relief Example</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
  <style>
	body {
	  padding: 0;
	  margin: 0;
    font-family: 'Rock Salt', cursive;    
  }
	
	html,body,#map {
	  height: 100%;
	}
	
	.leaflet-top-pane {
	  pointer-events: none;
	}
	
	#footer {
	  position: absolute;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: #e2e3e3;
	  z-index: 999;
	  overflow: auto;
	  padding: 5px;
	  opacity: 0.95;
	  color: #444;
	}
  </style>
</head>

<body>
  <div class="dark" id="map"></div>

  <div id="footer">
    <div class="container" style="padding-left:20px;">
      <h1>Mapzen Shaded Relief Tiles  (<a href="https://mapzen.com/blog/mapping-mountains" target="_blank"> Learn more . . .</a>)</h1>
    </div>
  </div>
  <script src="//cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  
  <script>
  var map = L.map('map', {minZoom:10,maxZoom:17});
  // DEFINE THE BASE LAYER (THE LOWER PART OF THE SANDWICH) HERE
	L.tileLayer('https://terrain-preview.mapzen.com/terrarium/{z}/{x}/{y}.png', {
	  maxZoom: 17,
	  attribution: "<a href='https://www.mapzen.com' target='_blank'>Mapzen<\/a>",
	}).addTo(map);
	map.setView([39.12437, -120.29720], 11);
	
	// ADD THE REFERENCE OVERLAY (THE TOP OF THE SANDWICH) HERE:
	var topPane = L.DomUtil.create('div', 'leaflet-top-pane', map.getPanes().mapPane);
	var topLayer = new L.tileLayer('//tile.stamen.com/toner-labels/{z}/{x}/{y}.png', {
	  maxZoom: 17
	}).addTo(map);
	topPane.appendChild(topLayer.getContainer());
	topLayer.setZIndex(7);
  </script>
</body>
</html>