miketahani · January 19, 2018 12:25
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <meta charset='utf-8'>
   <link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css' />
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        font: bold 24px 'Helvetica', arial;
      }

      body,
      svg,
      canvas {
        margin: 0;
        padding: 0;
      }

      #map,
      #ui {
        position: absolute;
      }

      #map {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      #ui {
        top: 0;
        right: 0;
        background-color: #fff;
        text-align: right;
      }

      #info {
        padding: 1%;
      }

      input {
        font-size: 48px;
        font-weight: bold;
        margin-bottom: 1%;
      }

    </style>
  </head>
  <body>
    <div id='map'></div>
    <div id='ui'>
      <form action=''>
        <!-- something like https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png -->
        <input placeholder='tile url' />
      </form>
      <div id='info'></div>
    </div>

    <script src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>
    <script>

      const $ = document.querySelector.bind(document),
            map = L.map('map').setView([36.76, -97.55], 6);

      let layer = undefined;

      const updateLayer = url => {
        if (layer) {
          map.removeLayer(layer)
        }
        layer = L.tileLayer(url, {attribution: ''}).addTo(map);
      }

      const updateUI = () => {
        let center = map.getCenter();
        $('#info').innerHTML = `lnglat: ${center.lng.toFixed(4)}, ${center.lat.toFixed(4)}<br>zoom: ${map.getZoom()}`;
      }

      map
        .on('move', updateUI)
        .on('moveend', updateUI)
        .on('viewreset', updateUI);

      $('form').onsubmit = e => {
        e.preventDefault()
        updateLayer($('input').value)
        updateUI();
      };

    </script>
  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset='utf-8'>
	<link rel='stylesheet' href='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css' />
	<style>
	* {
	box-sizing: border-box;
	}

	body {
	font: bold 24px 'Helvetica', arial;
	}

	body,
	svg,
	canvas {
	margin: 0;
	padding: 0;
	}

	#map,
	#ui {
	position: absolute;
	}

	#map {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	#ui {
	top: 0;
	right: 0;
	background-color: #fff;
	text-align: right;
	}

	#info {
	padding: 1%;
	}

	input {
	font-size: 48px;
	font-weight: bold;
	margin-bottom: 1%;
	}

	</style>
	</head>
	<body>
	<div id='map'></div>
	<div id='ui'>
	<form action=''>
	<!-- something like https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png -->
	<input placeholder='tile url' />
	</form>
	<div id='info'></div>
	</div>

	<script src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>
	<script>

	const $ = document.querySelector.bind(document),
	map = L.map('map').setView([36.76, -97.55], 6);

	let layer = undefined;

	const updateLayer = url => {
	if (layer) {
	map.removeLayer(layer)
	}
	layer = L.tileLayer(url, {attribution: ''}).addTo(map);
	}

	const updateUI = () => {
	let center = map.getCenter();
	$('#info').innerHTML = `lnglat: ${center.lng.toFixed(4)}, ${center.lat.toFixed(4)}<br>zoom: ${map.getZoom()}`;
	}

	map
	.on('move', updateUI)
	.on('moveend', updateUI)
	.on('viewreset', updateUI);

	$('form').onsubmit = e => {
	e.preventDefault()
	updateLayer($('input').value)
	updateUI();
	};

	</script>
	</body>
	</html>