D3 Examples - map tile viewer

xxxxxxxxxx
 
<!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=''>
        <!-- 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='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.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>
​
    