index.html

## 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=''>
        <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}, ${center.lat}<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>