(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

[Kaeliah]

Image maps are VERY useful. I'm sure someone will find this handy. I've been doing HTML/CSS since I was 10 soo I'm kinda well versed but please keep making tutorials!! The more beginners can learn here the more activity we'll have. :3

[Hall of Famer]

Thanks for the comment Miss Kaeliah. And yeah, next time I'd consider a tutorial on how to add NPCs and other objects to an image map using either HTML or PHP, shouldnt be hard either but guess its fun. XD

[Kaeliah]

I usually cheat and use an image map maker for my image maps. It's so tedius making them, especially if you have a bunch to make. x.x When I open my site it's gonna have a halloween/fall theme already set up. The halloween theme/event will end after about 10 days but I've been working on this corn maze that is incredibly awesome(I think). I may leave that up there until December. But it uses image maps, and there's a bunch of them! Plus I'll be adding little things to it like a random jewel or egg somewhere that you can collect. I'm also creating a way to make it so you can only grab it once. ^.^ Corn Maze table! I'll delete it in the winter but yeaahhh lotsa work!

[Kesstryl]

Originally Posted by Kaeliah

I usually cheat and use an image map maker for my image maps. It's so tedius making them, especially if you have a bunch to make. x.x When I open my site it's gonna have a halloween/fall theme already set up. The halloween theme/event will end after about 10 days but I've been working on this corn maze that is incredibly awesome(I think). I may leave that up there until December. But it uses image maps, and there's a bunch of them! Plus I'll be adding little things to it like a random jewel or egg somewhere that you can collect. I'm also creating a way to make it so you can only grab it once. ^.^ Corn Maze table! I'll delete it in the winter but yeaahhh lotsa work!

Which map maker do you use?

@HoF this is great, if anything it helps me because though I'll probably use a 3rd party imap maker, I will still benefit from knowing how the code does this.

[Harrison jess]

hi Hall of Famer,...
the images map shared here was really nice,..
its very nice looking,...thanks for this work dude,...nice effort,..

[Hall of Famer]

Thank you very much for the comments Harrison Jess. This is by no means a mod/addon that can be directly copied to their pet site, it is more of a tutorial for users who aspire to create a customized map system. It is hard to do a general map engine for rusnak adoptable though, unless I can somehow add functions to admincp for users to create images, locations and direction urls in a more convenient way.

[schepers12]

do you mean something like this?
i've made it upon your tutorial, and it works very good on my (localhost!) site :D

*for people who want a woking script, ready to integrate, read below:*
___
the attached zip file includes a complete working map, you only need to change the titles and link url's in map.php, after that, put a link to "map.php" on your site :)
___

schepers12

[Hall of Famer]

Well actually this thread was almost 2 years old. It was my very first attempt at making a tutorial, I was merely an amateur at programming back then. Glad to know the code still works, it was really basic html. In Mys v1.6.0 I plan to incorporate a customizable exploration system in which you can create your own maps, locations, npcs in an integrated fashion. Don't expect it to be done earlier than 2014 though. XD

[schepers12]

by the way, if you want an individual image for every building without one large image (better for editing), you might want to use something like this as your map script :

PHP Code:

<?php

include("functions/functions.php");

//***************//
//  START SCRIPT //
//***************//
/*
NOTE THAT THE "margin-top" IS RELATIVE TO THE PREVIOUS BUILDING IN THE LIST BELOW HERE!!
also note that the last building needs to be the one which is the lowest on your map, otherwise you might have template errors ;3
note 2: the background of your map is defined in the first div
*/
$article_title = "Map";
$article_content .= '<div style="background: url(picuploads/map/bg.png);"><br /><br />
<div style="margin-left:100px;margin-top:100px; width:100px; height:100px;"><a href="index.php"><img border="0" src="picuploads/map/house1.png" /></a></div>
<div style="margin-left:250px;margin-top:-150px; width:100px; height:100px;"><a href="index.php"><img border="0" src="picuploads/map/house2.png" /></a></div>
<div style="margin-left:400px;margin-top:-100px; width:200px; height:150px;"><a href="index.php"><img border="0" src="picuploads/map/house3.png" /></a></div>
<div style="margin-left:550px;margin-top:-50px; width:180px; height:115px;"><a href="index.php"><img border="0" src="picuploads/map/house4.png" /></a></div>
<div style="margin-left:50px;margin-top:-50px; width:165px; height:130px;"><a href="index.php"><img border="0" src="picuploads/map/house5.png" /></a></div>
<div style="margin-left:740px;margin-top:-300px; width:165px; height:115px;"><a href="index.php"><img border="0" src="picuploads/map/house6.png" /></a></div>
<div style="margin-left:450px;margin-top:80px; width:100px; height:90px;"><a href="index.php"><img border="0" src="picuploads/map/house7.png" /></a></div>
</div>
<br />';
//***************//
//  OUTPUT PAGE  //
//***************//
echo showpage($article_title, $article_content, $date);
?>

which is a bit more work i guess, but for example: you can change the position of the buildings by using the html codes, and not editing the whole backgrund ;)

(also the reason i'm using it currently)