C00L GuestMap 2

• What is a GuestMap?
• Guestmap Demo
• What's new in this version?
• Download the GuestMap script
• Installing the Guestmap
  • Having trouble?
• How to place the guestmap on your website
• In an iframe
• In a pop-up window
• Embedded in a page
• Themes, plug-ins, extensions and customizations
  • Themes (more demos!)
    • Standard gray
    • BrainError
    • Butterfly garden
    • Coral reef
    • Birds in tree
  • Plug-ins
    • Moving icons
    • Admin page

What is a GuestMap?

A guestmap is just like a guestbook. with the difference that a visitor can pick an icon, and the position where to place this icon to which he, or she attaches a message.

Unlike guestbooks, guestmaps have only been around for a few years. Until now guestmaps have been rather boring, a map with some tiny icons, and a message on it. C00L GuestMap 2 brings this a whole new level, it uses some of the most cutting edge techniques availible on the internet today, yet still works with some browsers that are over 4 years old.

The guestmap does not require any Java, or Flash plug-ins to be installed.

GuestMap Demo

Birds in tree theme

Move your mouse pointer over the birds to read the message that somebody else has left.

Click anywhere on the map to place an icon there. Fill in a name and a message, select a bird and click the button to confirm it.

What's new in this version?

Since the last version (1.3) the guestmap has been completely rewritten and has all kinds, of cool new features:

List view

View messages like they were in a guestbook

New zoom feature.

Zoom in on the map, very useful for crowded maps or precision placement of icons.

IPv6 ready

Be prepared for the future, IPv6 users are already among us, and it will only be more.

Multiple maps on the same website

The new guestmap can use the same database table, admin page and JavaScript for different maps, you can even use multiple maps on multiple websites without having to duplicate the database, PHP or JavaScript code.

Easier to embed in an existing page

The new guestmap can be placed anywhere on the page, no absolute positioning needed.

Easier to configure

All the basic settings are in one well commented file. The more advanced settings are also on top of each PHP script.

New admin page

The new admin page allows you to manage various guestmaps easily.

32 bit PNG support for icons, also in Internet Explorer!

Yes, you probably didn't know it was possible. Full color semi-transparent images in Internet Explorer, you got to see it to believe it!

Expandable with themes and plug-ins

Let users place birds, butterflies, fish icons, or whatever using different themes and then spice things up by making your icons move around, using a plug-in.

Fast and bandwith friendly

The JavaScript is only 10 KiloBytes in size. No pages need to be loaded for zooming or switching to list view for every page view. Requires 169 Bytes less for every icon, this saves in tens of KiloBytes for each page view.

Unicode support

Have your foreign visitors write strange, unreadble characters without any problems!

Download the GuestMap script

In order for the guestmap to work your server needs to support PHP 4 and MySQL 3 or later. This is by far the most common configuration on all webhosts that support serverside scripting.

Installing the GuestMap

1. Download and unzip guestmap2.zip.
2. Change the database settings in db.inc.php.
3. Place the guestmap directory on your webserver.
4. Create the table guestmap2 in your database by running install.php.
5. Create a link/iframe/pop-up to the guestmap on your website.

Put the guestmap directory in your website's main directory. The guestmap directory contains all the files needed for the guestmap to work.

Your guestmap will be available at http://example.com/guestmap/standard_gray where standard_gray is the default theme.

Having trouble?

If you have trouble installing the guestmap, please check the FAQ first, if the answer to your problem isn't there contact me or leave a message (with your email!) on the bottom of the page.

How to place the guestmap on your website

After downloading and installing the guestmap you need your give your visitors access to the guestmap. The easiest way of doing this just by creating a link to guestmap/theme_name, but if you want to make the guestmap blend in with your website there are some other options:

In an iframe

This is the preffered method of placing the guestmap on your website, it's easy too.

To make an iframe without any scrollbars use this code:

<iframe scrolling="no" frameborder="no" src="guestmap/butterfly_garden" style="width:520px; height: 378px; border:0; overflow:hidden;"></iframe>

Like you might as well have figured out, you may want to change the path, width, and height to fit your guestmap.

On top of this page you can find an example of an guestmap in an iframe.

In a pop-up window

A popup window makes the guestmap look like it's a seperate application, you can use a large gyuestmap since it doesn't have to fit in your design.

Please note that many users consider pop-up windows to be annoying, many people have a popup blocker installed that stops pop-ups in certain circumstances. Unless you have a very good reason not to, use an iframe instead.

To use a popup first make a javaScript function that opens a window with no toolbars:

<script type="text/javascript">
function openWin(url,name,width,height) {

window.open(url, name, 'width='+width+',height='+height+',toolbar=0,menubar=0,resizable=0,scrollbars=0,
location=0,status=0,scrollbars=0,directories=0');

return false;
}
</script>

Then create a link or a button that calls the function.

<a href="javascript:openWin('guestmap/birds_tree','gmTree',516,505)">Open guestmap in a pop-up window</a>

<form method="get" action="" onsubmit="return openWin('guestmap/birds_tree','gmTree',516,505)">
<input type="submit" value="Open guestmap in a pop-up window" />
</form>

If you want to use an image, just put it betwee the <a> tags. Do not use the onclick event handler (unless you have a very good reason), it doesn't work when navigating with a keyboard, that's also the reason why it's better to use an onsubmit for the form.

Embedded in a page

Although it's lots easier to embed this new guestmap anywhere in a page in this new version, it's still not that easy. For it to work correctly in Microsoft Internet Explorer the guestmap page needs a Strict DTD, else it will be messed up.

The second thing you need to watch out for is duplicate ID's. Id's have to be unique. If you use one that the guestmap is already using, it will be messed up.

Unless you have a very good reason not to: use an iframe instead.

If you still want to embed the guestmap in a page, the best way to start off is by modifying the index.html and style.css files.

Themes, plug-ins, extensions and customizations

Themes

These are the variuos themes availible. Place them in your guestmap directory. The new guestmap will now be availible on the following location:

http://mywebsite.ext/guestmap/theme_name

You can rename the theme's directory to anything you fancy.

If you are using multiple guestmaps make sure they all have a unique ID. You can check, and set the ID by changing the value of the gmId variable in gm_conf.js that is in each theme's directory.

• Standard gray
• BrainError
• Butterfly garden
• Coral reef
• Birds in tree

---

Standard gray

Just your plain old boring guestmap with some standard smilies and a worldmap on the background. Very basic, easy to customize. This theme is included with the guestmap

Demo - Download

---

Birds in tree

Various types of birds sitting in a tree. This theme uses some rather large, fading 32 bit PNG's, will probably not be suited for very active maps, unless you set the icon fade out time to very fast.

Demo - Download

---

Brainerror

The BrainError.net theme, in this page's style, again nothing to fancy, just an example on how you can customize the map to blend in with your design.

Demo - Download

---

Butterfly garden

A gorgeous garden of butterflies flying around. This theme comes with the moving icons plug-in!

Demo - Download

---

Coral reef

Fish swimming around on a coral reef and looks like your own virtual aquarium. The zoom function is disabled here by default. This theme comes with the moving icons plug-in!

Demo - Download

---

Plug-ins

C00L GuestMap 2 can be extended using plug-ins. Currently, these plug-ins are availible:

• Moving icons
• Admin page

---

Moving icons

This plug-in makes icons move around on your map. Although the icons move around randomly you can set the interval, mimimum and maximum speed and directions.

If you are having problems installing the plugin, look at the source of the demo (or just copy the whole index.html).

Demo - Download moving icons plug-in

Installation

1. Download gm_moveicon.js.
2. Open the file and follow the instructions for activating and setting the movements.
3. Place it in the same directory as your guestmap on the webserver.

---

Admin page

Place this script in your guestmap directory to manage all your guestmaps. This is a very basic admin system and has some built in security that uses sessions and requires you to log in with a username and password which you have to set yourself.

The reason the admin page is very basic is so that it can easily be customized, or be built into an existing CMS/admin page/control panel.

Download

Installation

1. Download and unzip gm2_admin.zip.
2. Change the password and username in login.php!
3. Place the admin directory in the guestmap directory on your webserver.

Warning: The admin page has been reported not to work on all servers. I suspect it has something to do with various versions of PHP. If the admin page doesn't work I can't help you. If you find the cause and/or solution, let me know!

---

License information

Scripts shown here can be copied, used and altered as you please. However, I don't like other people taking credit for my work. It really pisses me off. I'm a real bad ass person, once I feel pissed off. So here are the rules:

1. Don't distribute the scripts, I am already doing that for you.
2. Don't claim that they're your own, because they're not (unless you altered them a lot). That means when you get money for it, I have done work for you and you have to give all your money to me.

---