(How to...) Create a map for your adoptable site

[Hall of Famer]

Well this is actually quite easy to do for some of you, so its simply a tutorial for newbie programmers who do not know how to add html to php codes. I am also posting this seeing no one else has ever made a tutorial for map system yet. Keep in mind that this is a tutorial rather than an addon script Miss Kaeliah has been doing. So do not add it directly to your site or you get tons of errors. I am using the map page of PokeMansion as the demo site, take a look at it to see exactly how it works:
http://www.pokemansion.net/map.php

To create a map file, the first thing to do is to construct a completely blank php file. This is your template to create any possible scripts:

PHP Code:

<?php

// **********************************************************************
// Rusnak PHP Adoptables Script
// Copyright 2009 Brandon Rusnak
// For help and support: http://www.rusnakweb.com/forum/
//
// Redistribution prohibited without written permission
// **********************************************************************

// Wake the sleeping giant

// **********************************************************************
// Basic Configuration Info
// **********************************************************************

include("inc/functions.php");
include("inc/config.php");
include("inc/bbcode.php");

$themeurl = grabanysetting("themeurl");

// **********************************************************************
// Define our top links by calling getlinks()
// **********************************************************************

$links = getlinks();

// **********************************************************************
// Define our ads by calling getads()
// **********************************************************************

$ads = getads("any");

// **********************************************************************
// Grab any dynamic article content from the content table
// **********************************************************************

$pagecontent = getsitecontent("");
$article_title = $pagecontent[title];
$article_content = $pagecontent[content];


// Convert the BBCODE to HTML
$article_content = bbconvert($article_content);

// Convert line breaks to <br>
$article_content = nl2br($article_content);

// **********************************************************************
// Grab any settings that we will need for the current page from the DB
// **********************************************************************

$browsertitle = grabanysetting("browsertitle");
$sitename = grabanysetting("sitename");
$slogan = grabanysetting("slogan");

// **********************************************************************
// Check and see if the user is logged in to the site
// **********************************************************************

$loginstatus = logincheck();
$isloggedin = $loginstatus[loginstatus];
$loggedinname = $loginstatus[username];

// **********************************************************************
// End Prepwork - Output the page to the user
// **********************************************************************



// **********************************************************************
// Begin Template Definition
// **********************************************************************

//Define our current theme
$file = $themeurl;

// Do the template changes and echo the ready template
$template = file_get_contents($file);

$template = replace(':ARTICLETITLE:',$article_title,$template);
$template = replace(':ARTICLECONTENT:',$article_content,$template);
$template = replace(':ARTICLEDATE:',$article_date,$template);

$template = replace(':BROWSERTITLE:',$browsertitle,$template);
$template = replace(':SITENAME:',$sitename,$template);

//Define our links
$template = replace(':LINKSBAR:',$links,$template);

//Get the content for the side bar...

$sidebar = getsidebar();
$template = replace(':SIDEFEED:',$sidebar,$template);

//Get the ad content...
$template = replace(':ADS:',$ads,$template);

//Get the slogan info
$template = replace(':SLOGAN:',$slogan,$template);


echo $template;

// **********************************************************************
// End Template Definition
// **********************************************************************



?>

Note that this blank template doesnt do anything, but it helps when you wish to create a new php script file on your own. To implement html in php, the first thing to do is to add html head and body codes to the very beginning of your script file:

PHP Code:

<html>
<head>

</head>
<body> 


Also add this codes to the very end of your script file:

PHP Code:

</body>
</html> 


By doing this, you can write a successful html script on top of your php codes without getting an error.

For a map system, we will be using the tag 'map'. What you should do before entering the information of a map is to define where the map image will be displayed on that page. To do this, simply use 'div style' code here:

PHP Code:

<div style="position: absolute; left: [b]X[/b]px; top: [b]Y[/b]px;"> 


This looks like css, isnt it? All you have to do here is to adjust the values entered for the highlighted part in the code. In my example, I am using 282px and 175px, but these are highly customizable.

The next thing to do is to specify the name and url of your map, the structure of the codes is provided below:

PHP Code:

<img border="0" alt="[b]Your Map's Name[/b]" src="[b]Your Map's url[/b]"/> 


However, you may want to add some special css effects so that the name of each location on your map will be displayed once you move your mouse onto it. Simply modify the script a little bit to add the 'Mouseover' codes to your script file, which should look like this:

PHP Code:

<img border="0" alt="[b]Your Map's Name[/b]" src="[b]Your Map's url[/b]" id="[b]Your Map's Name[/b]" onMouseOver="mouseOver()" onMouseOut="mouseOut()" usemap="#[b]Your Map's Name[/b]" /> 


This should take care of the settings of your map file. The very last thing to do, well, is apparently to specify each location on your map image. The codes structure is provided below:

PHP Code:

<map name="[b]Your Map's Name[/b]">
<area shape="[b]shape[/b]" coords="[b]Coordinates that cover the area of your shape[/b]" title="[b]Location Name[/b]" alt="[b]Location Name[/b]" href="[b]Destination url[/b]" />
</map> 


As you can see from above, this map script consists of five different fields. The first one is still the Map's name of yours, which should be completely your choice. The second one is called shape, which can be a rectangle, a circle, or even a triangle at times. For a rectangle, you should use the format (Upper left corner, Upper right corner, Lower left corner, Lower right corder), for a circle you simply need to enter the radius and the center point of your circular area. The Location name is a name specified for this particular area of your map, so do not confuse it with your Map's name. The last component is the your destination url, and you will be directed to this url if you click on the map. An example of the map code will look like this, you can just add multiple of such code within your map tag so that it can direct users to more than just one locations on the map:

PHP Code:

<area shape="rect" coords="227,174,275,225" title="Trainer Info" alt="Trainer Info" href="http://www.pokemansion.net/account.php" /> 


Alright, you are almost done. Just do not forget to enclose your html body code with this just above the point where your actual php code starts:

PHP Code:

 </div>
</font> 


I havent tested on this yet, but it looks like it is not a big deal if you place the map codes at the bottom or even in the middle of your php codes. All you have to do is to know how to integrate html with php, and apparently advanced programmers know much better than this so I wont explain. Its not really a complicated script, but it can be quite useful for an adoptable site. Enjoy!

Hall of Famer

Alright, you are almost done, just