une solution : https://leafletjs.com/examples/crs-simp ... imple.html

Dans l'exemple que j'ai proposé, les coordonnées des tiles doivent être uniques.
La première tile en haut à gauche doit avoir les coordonnées pos_x=0 et pos_y=0, la suivante pos_x=0 et pos_y=1, etc.

Exemple de données attendus avec mon exemple :

<?php

const TILE_WIDTH = 40;
const TILE_HEIGHT = 40;

$tiles = [
		['tile' => 'https://picsum.photos/40/40?random=1', 'pos_x' => 0, 'pos_y' => 0],
		['tile' => 'https://picsum.photos/40/40?random=2', 'pos_x' => 0, 'pos_y' => 1],
		['tile' => 'https://picsum.photos/40/40?random=3', 'pos_x' => 0, 'pos_y' => 2],
		['tile' => 'https://picsum.photos/40/40?random=4', 'pos_x' => 1, 'pos_y' => 0],
		['tile' => 'https://picsum.photos/40/40?random=5', 'pos_x' => 1, 'pos_y' => 1],
		['tile' => 'https://picsum.photos/40/40?random=6', 'pos_x' => 1, 'pos_y' => 2],
		['tile' => 'https://picsum.photos/40/40?random=7', 'pos_x' => 2, 'pos_y' => 0],
		['tile' => 'https://picsum.photos/40/40?random=8', 'pos_x' => 2, 'pos_y' => 1],
		['tile' => 'https://picsum.photos/40/40?random=9', 'pos_x' => 2, 'pos_y' => 2],
	];

?>
<h1>Test</h1>

<?php if (empty($tiles)) : // on vérifie si le tableau $tiles (avec un s) est vide ?>

    <p>Pas de tiles !</p>

<?php else : ?>

    <div style="position: relative;">

        <?php foreach ($tiles as $tile) : // pour chaque "tile" dans le tableau $tiles ?>
            <img src="<?= $tile['tile'] ?>" 
                style="position: absolute; top: <?= $tile['pos_x'] * TILE_WIDTH ?>px; left: <?= $tile['pos_y'] * TILE_HEIGHT ?>px;" 
                alt="">
        <?php endforeach; ?>

    </div>

<?php endif; ?>

Ce qui génère le code html suivant où chaque image est bien positionné en fonction des coordonnées :

<h1>Test</h1>

<div style="position: relative;">

  <img src="https://picsum.photos/40/40?random=1" style="position: absolute; top: 0px; left: 0px;" alt="">
  <img src="https://picsum.photos/40/40?random=2" style="position: absolute; top: 0px; left: 40px;" alt="">
  <img src="https://picsum.photos/40/40?random=3" style="position: absolute; top: 0px; left: 80px;" alt="">
  <img src="https://picsum.photos/40/40?random=4" style="position: absolute; top: 40px; left: 0px;" alt="">
  <img src="https://picsum.photos/40/40?random=5" style="position: absolute; top: 40px; left: 40px;" alt="">
  <img src="https://picsum.photos/40/40?random=6" style="position: absolute; top: 40px; left: 80px;" alt="">
  <img src="https://picsum.photos/40/40?random=7" style="position: absolute; top: 80px; left: 0px;" alt="">
  <img src="https://picsum.photos/40/40?random=8" style="position: absolute; top: 80px; left: 40px;" alt="">
  <img src="https://picsum.photos/40/40?random=9" style="position: absolute; top: 80px; left: 80px;" alt="">

</div>

https://jsfiddle.net/z6nsxve4/

Il faudrait revoir tes données et/ou apporter plus de précision car je ne comprends pas pourquoi tes tiles n'ont pas de coordonnées uniques.

Ok, je vois.
En fait, dans mon exemple, les coordonnées des tiles démarrent de '58.60' à '62.60' car elles sont extraites d'une map globale,...