Dynamic JavaScript maps in LANtools

This is a really old entry — I will no longer vouch for its sanity. :)

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1061

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

Deprecated: Function ereg() is deprecated in /home/xargolne/public_html/gallery/modules/core/classes/GalleryStorage.class on line 1077

As you can read on the LANtools website, LANtools version 2.0 is going to have seat reservation functionality ala partyreg.net and partyticket.net. I had orginally planned to have the whole map in one single .png-file and just slap a imagemap on top of that. But, after having tried Google Maps, I decided to make a dynamic one instead. The result:

javascript_map

It’s mainly written in JavaScript on the client side, using a tiny PHP script as its backend. The big source image is first split into small 128px x 128px chunks at the server. Then the JavaScript on the client creates lots of img elements to fill up the map rectangle. Afterwards it requests the appropriate tile files from the server and places them evenly so the tiles make up a part of the source image.

When the user drags with the mouse inside the map rectangle all those small tile images are moved around accordingly. When one of the tiles reaches outside the frame it gets relocated to the opposite side of the rectangle with a new tile file. This reusing of tile placeholders keeps the number of images the browser has to render more or less constant.

This way you could have potentially huge maps while the client just has to download the area of the map it’s currently viewing. Try it out yourself here. The source code is also available.

(Note: currently doesn’t work in Internet Explorer.)

Posted in LANtools

Comments

  1. Matti "jaardsi" Peräkylä
    June 8th, 2005, 16:30

    Stunning work. You got it to work with Explorer after all?

  2. Vegard Edvardsen
    June 8th, 2005, 20:39

    Yup, actually. I knew Internet Explorer was a “bit behind” on the standards, but this was worse than I had excpected. Let’s just hope IE7 will make up for it, but after what I’ve heard so far all they seem to care about is tabs and CSS2. :-/

  3. Marius Davidsen
    March 18th, 2007, 12:26

    you need to get them on your new server to:P i cant get them, since the smestadlan.net isent anything any more:D
    Priciate (or how ever that is spelled) your work:D

  4. Vegard Edvardsen
    March 18th, 2007, 13:53

    Hmm, yeah, I’ll look into it. Gotta see if I can find the old files. :P