Untitled

<!DOCTYPE html>
<html>
  <head>
    <title>maptiles</title>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js" type="text/javascript"></script>
    <script src="https://cdn.rawgit.com/ardhi/Leaflet.MousePosition/master/src/L.Control.MousePosition.js" type="text/javascript"></script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; z-index: 1; background: #ffffff; }
      #slider{ position: absolute; top: 10px; right: 10px; z-index: 5; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">

      var center = [0.0,0.0];
      var southWest = L.latLng(435.0, -435.0),
      northEast = L.latLng(-435.0, 435.0),
      bounds = L.latLngBounds(southWest, northEast);

      var latlngs = L.rectangle(bounds).getLatLngs();
      var map = L.map('map').setView(center, 1);
      L.tileLayer('./{z}/{x}/{y}.jpeg', {
          minZoom: 1,
          maxZoom: 4,
      }).addTo(map);
      map.setMaxBounds(bounds);


      var imageUrl = './overlay.jpeg',
      imageBounds = [[-10950.0, -10950.0], [1950.0, -180.0]];
      imageBounds2 = [[1090.0, 180.0], [-10950.0, 10950.0]];
      L.imageOverlay(imageUrl, imageBounds).addTo(map);
      L.imageOverlay(imageUrl, imageBounds2).addTo(map);

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