map tile viewer

<!doctype html>
<html>
  <head>
    <meta charset='utf-8'>
   <link rel='stylesheet' href='https://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>

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>

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js to a secure url

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js