Untitled


<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css" type="text/css">

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>

    <script type="text/javascript">
      function initialize() {
        var zoom = 8;
        var side = 800
        var extent = [0, 0, zoom*side*2, zoom*side*2];
        var center = [zoom*side+400/8/2, zoom*side-400/8/2];
        console.log(center)
        var projection = new ol.proj.Projection({
          code: 'decentraland-images',
          units: 'pixels',
          extent: extent,
        });
        var map = new ol.Map({
        target: 'map',
        layers: [
          new ol.layer.Tile({
            source: new ol.source.TileImage({
              url: 'map/{z},{x},{y}.png',
              wrapX: false,
            }),
          }),
          new ol.layer.Tile({
             source: new ol.source.TileDebug(),
          })
        ],
        view: new ol.View({
            projection: projection,
            center: center, //ol.extent.getCenter(extent),
            zoom: zoom,
            minZoom: zoom,
            maxZoom: zoom,
          })
        });
      }
    </script>
    <style type="text/css">
      #map {
        min-height: 100%;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: rgba(51,51,51,0.7);
      }
      html, body {
        height: 100%;
        margin: 0;
      }
    </style>
  </head>
  <body onload="initialize()">
    <div id="map">
    </div>
  </body>
</html>