[JavaScript]Obsługa mapy cyfrowej (kafelki), Sposób na obsługę mapy cyfrowej na wzór Google Maps i innych Opcje

[mhyjek]

Witam.
Próbowałem coś znaleźć w internecie ale wszędzie tak jak i tu na forum niewiele znalazłem - poza pytaniami bez konkretnych odpowiedzi.
Chodzi stworzenie obsługi mapy cyfrowej, złożonej z kafli - głównie chodzi o przesuwanie mapy i markery.
Potrafię wrzucić mapę i ją przesuwać zgodnie z tym co sobie założyłem.
Robię to przy wykorzystaniu X Library
Zupełnie nie mam pomysłu jak to pociągnąć dalej, nie mogę uzyskać efektu pojawiania się kolejnych kafli w pustych miejscach.
Kafle będą wystawiane przez skrypt PHP z pociętej mapy rastrowej.
Próbuje podmieniać obrazki dla elementów (obrazków) 'mapa_img01' i przesunąć warstwę 'map' do oryginalnego położenia, ale wychodzi z tego straszna kiszka.
Nie o ten efekt chodziło. Zacząłem już nawet kombinować z wrzucaniem obrazków do kolejnej warstwy ale także nie wygląda to za dobrze.

Może coś podpowiecie, ew. pokierujecie w odpowiednim kierunku...

Poniżej to co wymyśliłem do tej pory i działa bez zarzutu - samo przesuwanie mapy większej niż widoczny obszar.

Style i JS

Kod

<style type="text/css">
    body{margin:0px; padding:0px; font-family:Verdana,sans-serif; background-color:White; font-size:70%;}
    .drag{position:relative; z-index:100;}
    .supercontainer{position:relative; display:block; margin:0px;}
    .viewport{position:absolute; display:none; overflow:hidden; background-color:transparent; font-size:0px;}
</style>
<script type='text/javascript' src='handlers/x/x.js'></script>
<script type='text/javascript'  src='handlers/x/lib/xenabledrag.js'></script>
<script type='text/javascript'>

    xAddEventListener(window, 'load', winOnLoad, false);

    function winOnLoad(){
        xEnableDrag('map', onDragStart, onDrag, onDragEnd);
    }
    function onDrag(e, dx, dy){
        xMoveTo(e, xLeft(e) + dx, xTop(e) + dy);
    }
    function onDragStart(e, x, y){
        //
    }
    function onDragEnd(e, x, y){
        //
    }
</script>

HTML:

Kod

<div id="supercontainer" class="supercontainer" style="border: 0px solid black; left: 0px; top: 0px;">
<div id="viewport" class="viewport" style="border: 1px solid black; left: 10px; top: 10px; width: 400px; height: 300px; display: block; z-index: 0;">
  <div id="tilebox" style="border: 1px solid magenta; margin: 0px; padding: 0px; position: absolute; background-color: transparent; width: 800px; height: 600px; left: 0px; top: 0px; z-index: 2;">

   <div id="map" class="drag" style="margin: 0pt; padding: 0pt; left: -200px; top: -150px; z-index: 2;">
    <img id="mapa_img01" src="images/map/mapa_01.gif" style="margin-right: -1px;">
    <img id="mapa_img02" src="images/map/mapa_02.gif" style="margin-right: -1px;">
    <img id="mapa_img03" src="images/map/mapa_03.gif" style="margin-right: -1px;">
    <img id="mapa_img04" src="images/map/mapa_04.gif" style="margin-right: -1px;"><br>
    
    <img id="mapa_img05" src="images/map/mapa_05.gif" style="margin-right: -1px;">
    <img id="mapa_img06" src="images/map/mapa_06.gif" style="margin-right: -1px;">
    <img id="mapa_img07" src="images/map/mapa_07.gif" style="margin-right: -1px;">
    <img id="mapa_img08" src="images/map/mapa_08.gif" style="margin-right: -1px;"><br>

    <img id="mapa_img09" src="images/map/mapa_09.gif" style="margin-right: -1px;">
    <img id="mapa_img10" src="images/map/mapa_10.gif" style="margin-right: -1px;">
    <img id="mapa_img11" src="images/map/mapa_11.gif" style="margin-right: -1px;">
    <img id="mapa_img12" src="images/map/mapa_12.gif" style="margin-right: -1px;"><br>

    <img id="mapa_img13" src="images/map/mapa_13.gif" style="margin-right: -1px;">
    <img id="mapa_img14" src="images/map/mapa_14.gif" style="margin-right: -1px;">
    <img id="mapa_img15" src="images/map/mapa_15.gif" style="margin-right: -1px;">
    <img id="mapa_img16" src="images/map/mapa_16.gif" style="margin-right: -1px;">
   </div>

</div>
</div>
</div>