index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>OSM Raster Tile Map</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <script src="index.js"></script>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <canvas id="mapCanvas"></canvas>
    <div class="controls">
      <button id="zoomInButton">+</button>
      <button id="zoomOutButton">-</button>
      <span id="centerCoordsSpan"></span>
      <span id="pointerPointsSpan"></span>
      <span id="pointerCoordsSpan"></span>
      <span id="zoomSpan"></span>
      <span id="tilesSpan"></span>
      <span id="poisSpan"></span>
      <button id="modeButton"></button>
      <button id="trackButton">Track</button>
      <select id="serverSelect">
        <option value="mapy.cz">Mapy.cz</option>
        <option value="osm">OSM</option>
        <option value="wikimedia" selected>Wikimedia</option>
        <option value="fau">FAU HD</option>
      </select>
    </div>
  </body>
</html>