Map by map-machine server is empty

Update: with the code below the tiles appear, but the most tiles are white squares, and tiles that should be adjacent are not in the correct relative position. Eg, the two non-blnak tiles in the screenshot should be one on top of the other, NOT side by side:

Screenshot 2024-06-19 at 19-57-52 Map Machine test

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Map Machine test</title>

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://uidnpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
/*      .mapid {
            //height: 400px;
            //width: 600px;
            max-width: 100%;
            max-height: 100%;

        }*/
    </style>
</head>
<body>

<h3>Map Machine</h3>
<div id="mapid" style="height: 1024px; width: 1024px"></div>

<script>

const map = L.map('mapid').setView([41.8990, 12.4775], 18);

const tiles = L.tileLayer('http://127.0.0.1:8081/tiles/{z}/{x}/{y}', {
    maxZoom: 20,
    attribution: 'Map data &copy; ' +
        '<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> ' +
        'contributors, imagery &copy; ' +
        '<a href="https:/github.com/enzet/map-machine">Map Machine</a>',
    id: 'map_machine',
    tileSize: 256,
    zoomOffset: 0
}).addTo(map);
</script>
</body>
</html>

enzet / map-machine

Map by map-machine server is empty #164

Testing Map Machine