Create a Collection of Maps With Tabs for Your Site

While watching the list of Make friendly shops increase on Makezine I wondered if it would be possible to geotag the shop locations on a map somehow.

Using Platial MapKit, I will show how to make a tabbed map collection for a website, using the maps I put together for Make: as an example.

You can go ahead and add Places to these maps. They will be going live on Makezine.com pretty soon.

So, try out the maps, get a feel for the functionality, and then proceed with this instructable to get an overview of what is needed to build something similar for your own site.

The Platial MapKit faq might also come in handy.

I am not affliated with Platial or Makezine more than being an avid user.

Step 1: Generate Code for Your Maps on Platial.com

After having decided how many maps you want, use the MapKit wizard on Platial to generate your code.

Save that code in to a text document and label it for future reference.

Note: you can only publish MapKits of maps that you own. You can make the map first and add places to it, then get the MapKit code or you can create the map and get the code first, then add places to it. It doesn't matter which way you do it.

Step 2: Create the Html to Hold the Map

In this example I created 3 maps for Make: , shops, user locale & interesting places.

You can only put one MapKit per web page. After deciding the structure (3 maps = 3 pages) I started work on the code to contain the structure.

My design decisions:
1. I wanted a row of buttons across the top of the map which linked to each page
1.1 These buttons must change to indicate linking ability
2. I wanted the map to fit in the minimum basic screen size of 800x600 with the possiblility of advertising if I wanted. Therefore the max width of the map = 700.
2.1 I made the asthetic desicision to center the map

The diagram shows roughly how the code is laid out in the attached file 'makeloctaions.htm'

The <head> contains the javascript code used to animate the buttons as well as the code to define the style of the <body>

The <body> contains 3 main elements.
1. The 'body content' is essentially an empty container that holds the button & map containers. It has some code to make it float in the center of your browser
2. The 'menu' container holds the buttons
3. The 'platial_mapKit' container holds the code you got from the Platial map wizard and saved in the text file.

makerlocations.html
Download

Step 3: HTML Breakdown 1: the Head

I'll assume you have some working html knowledge so I wont go in to too much detail. Unique to this page is the stylin & javascript.

In the previous step's layout diagram you'll note there are three portions to the bit rendered by the browser, i.e. the bit you see. These parts need some instruction on how to look when they go out in public. Note the #menu and #platial_mapKit style definitions in the code below. I put the stylin for the main floating div in the div header itself for some unknown reason.. it should be up here with its breathern, if only I was a good coder.

In the second section of the head between the <script> tag I had dreamweaver autogenerate roll-over button code for me, its open for anyone to use. You dont need to modify it at all.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Makerlocations</title>

<style type="text/css">
#menu {
position:absolute;
left:0px;
top:15px;
width:700px;
height:33px;
z-index:1;
}
#platial_mapKit {
position:absolute;
left:0px;
top:47px;
width:700px;
height:402px;
z-index:1;
}
</style>

<script type="text/JavaScript">

</script>
</head>

Step 4: HTML Breakdown 2: the Body

The  just sets up the funky way the page centers itself. Its not really necessary, just a design aesthetic.

 This is the 'interesting' bit if you like this sort of stuff. Now, before any high-end web developer starts pouring over this code and lamenting at the fact that there's no strict formating for the buttons, yeah.. I knows.

Important, if you're going to re-use this then get your head around this next statement:
Essentially I just plonked each button into the menu div sequentially. The logo is first, there is no spacing, the shop button comes next. As you read the code, note where one image starts and the other ends. When you go to swap stuff out for your own images be careful not to reformat too much, you might wonky things up a little. You have been warned.

In other words, when you read the code for the button placement, just look at it as a straight, uninterrupted sentence. You want to swap out any of my words for your words, do so without worrying about formating.

Note that this code is taken from the Maker's locations page. That means two things
1. There needs to be roll-over images and code for all other pages. Roll-overs = links = code
2. You do not need to link to the page that you are on. This is the maker locations page, so you only need to display the button image, no need to link it to something, no need for roll over magicry, i.e.

<img src="Images/makers_tall.png" alt="maker locations" width="94" height="33" />

Finally there is the MapKit. You need do nothing more than dump the code you got from the MapKit wizard in to a div and you are done.

<body onload="imagePreload('Images/shops_rollover.png')">

 <div style="margin-left: auto; margin-
right: auto; position: relative; background: #ffffff; text-align:
left; width: 700px; " id="body_content">

 <div id="menu">
<img src="Images/make.png" alt="" width="130" height="33" /><a
href="makershops.html" onmouseout="imageRestore()"
onmouseover="imageSwap('shops',,'Images/shops_rollover.png',
1)"><img src="Images/shops_normal.png" alt="maker shops" width="93"
height="28" border="0" id="shops" /></a><img src="Images/
makers_tall.png" alt="maker locations" width="94" height="33" /><a
href="cool_places.html" onmouseout="imageRestore()"
onmouseover="imageSwap('places',,'Images/places_rollover.png',
1)"><img src="Images/places_normal.png" alt="places" width="94"
height="28" border="0" id="places" /></a>
 </div>

 <div id="platial_mapKit">

You enter the platial mapKit code here!!!

</div>

</div>

</body>

Step 5: Design the B'uttons

It's not really important that you follow this process to create your buttons. Before I start, you have three main paths to choose from.

1. You could have basic text links to each page. The easiest option, but may look a little basic. However, with some clever html you can make these look really good. I'm not that clever.
2. You can create a single image for each button. But the button must be designed in a way that users will know it's a link. I recommend making the text underlined.
3. Roll-over image buttons. Looks good, can be designed to sit well with the default Platial map colours.

I will cover option 3, but be aware of these limitations. These buttons and the text on them are pure images. Users who have limited sight and who like to increase the font size on your webpage will not be able to do so with this option. Also, if you decided to change the name of the button at a later date you must rebuild the button from scratch.

Ok, I built up the button using a vector graphics application called Omnigraffle. There are many free, open source apps which will do a similar job. For the mac I recommend Inkscape if you dont have Omni.

For roll-overs to work, you need two final images. I chose to indicate the button is clickable with a text shadow. In the image you can see the two final variations of the button, a & b.

Step 6: Link Each Page Together

To re-cap;
1. You decided how many pages you want.
2. You created map code in Platial for each map and saved it on your computer.
3. You created the code to hold each map.
4. You have created two roll-over buttons for each map.

Now you must link it all together. It helps to draw out the links for your pages to ensure you dont miss anything.

From the Makers locations page again, lets take a look at the first button: Maker Shops
<a href="makershops.html" onmouseout="imageRestore()" onmouseover="imageSwap('makerlocations',,'Images/shops_rollover.png',1)"><img src="Images/shops_normal.png" alt="maker shops" width="93" height="28" border="0" id="makerlocations" /></a>

There are two sets of < >, the first makes it a link and tells the browser what the roll over image should be
<a href="makershops.html" onmouseout="imageRestore()" onmouseover="imageSwap('makerlocations',,'Images/shops_rollover.png',1)">

The second is the definition for the natural state of the button, that is, what does it look like without the user rolling the mouse over it or clicking on it?
<img src="Images/shops_normal.png" alt="maker shops" width="93" height="28" border="0" id="makerlocations" /></a>

Step 7: Go Publish!

To recap

1. Create map code.
2. Create html structure.
3. Create some buttons if you have more than one page.
4. Link it all together.

Now test it, then publish as you would to make public any of your other pages.