FotoMaps User Guide

Getting Started

Start out by unzipping the FotoMaps package using WinZip or any other .zip unpacker. In your FotoMaps folder you will see the following files:

Most users will only be concerned with editing config.xml and photos.xml and adding their photos to the photos folder. More advanced users may wish to edit index.html or email.php, or build their own map (see advanced options below).

.
2 Config Options top

Configuration Options

FotoMaps options, map, colors, and text are configured by editing the config.xml file. We suggest using a simple text editor like Notepad to edit this file (Mac users try TextEdit or BBEdit). By default, your config.xml file will look like this:

<config>

	<OPTIONS
		title="FotoMaps 2.0"
		menuBar="true"
		toolTips="true"
		zoomSlider="true"
		music="false"
		logo="logo.jpg"
		logoLink="http://www.fotomaps.net"
		email="me@you.com"
		frameThickness="15"
		noCache="false"
	/>

	<MAP
		map="maps/map-world.swf"
		bgColor="b7d0e6"
		mapColor="ebf3f9"
		zoom="0"
	/>

	<ABOUT startOpen="false" heading="Welcome to FotoMaps">
	<![CDATA[

Write something here about yourself or your photos.
You can type anything you want here. There is no limit on length. 
A scrollbar will appear if necessary.White space and line breaks will 
be removed from your text. You can format it with basic HTML tags.<br><br>
<a href='http://www.fotomaps.net' target='_blank'>You can have links!</a>
You may also use <b>bold text</b> and <i>italic text</i><br><br>
See the user manual for instructions about including basic HTML tags in this text
	
	]]>
	</ABOUT>

</config>
.

General Options

Changing your FotoMap title

Insert your desired FotoMaps title here. This is displayed in the top left corner of your FotoMap.

title="FotoMaps 2.0 Beta"

Menu bar options

The black bar across the top of your FotoMap is called the Menu Bar. By default it is set to true which means it is always visible.

menuBar="true"

Change this value to false to remove the Menu Bar entirely, or use autoHide to make the Menu Bar show up only when the user's mouse is near the top of the window.

Tooltips On/Off

Tooltips give your FotoMaps user little tips about what actions they can take as they navigate your map.

tooltips="true"

Tooltips are set to true by default. If you'd like to hide the tooltips, change this value to false.

Zoom Slider

The Menu Bar contains a slider that helps you control the level of zoom into your map.

zoomSlider="true"

This feature is enabled by default. If you'd like to hide the slider, change this value to false.

Background Musicpro

You may specify an mp3 file to play as background music on your FotoMap. This is turned off by default.

music="false"

To activate this feature replace false with a path to an mp3 file on your server. Music on/off control will automatically appear in the Menu Bar. This feature is for FotoMaps Pro users only.

Display Your Logopro

Specify a path to your logo image here and it will be displayed on the right side of the Menu Bar. If you do not want to display a logo enter false instead of a path. This feature is for FotoMaps Pro users only.

logo="logo.jpg"

Important: Logo images must be JPG files with max dimensions of 100px wide by 34px tall.

Link Your Logopro

Link your logo image to your webpage or any other URL. If you do not wish to make the logo a link or you aren't displaying a logo enter false instead of a URL. This feature is for FotoMaps Pro users only.

logoLink="http://www.fotomaps.net"

Specify Your Email Address

Enter your email address here so those who view your FotoMap can leave you comments via the contact form. Enter false to disable the contact form.

email="your_name@your_host.com"

Frame Thickness

You can make a white frame around your photos by specifying a number here. Use positive whole integers please. Enter 0 (zero) for no frame.

frameThickness="15"

Disabling Image Caching

Some users have experienced that when they update their FotoMap, visitors still see old content because they are being served images from their browser's cache instead of fresh images from the web server.

noCache="false"

The noCache option defaults to false which allows the browser to cache your images and files as usual, and speeds up browsing for repeat visitors. If you experience problems with image caching you can force the FotoMap to always download new copies of your files by entering true.

.
3 Maps & Colors top

Maps & Colors

Choosing a Map

Your FotoMap comes with a World map by default. You can change your map at any time by downloading a new map from our map library. Or, if you know how to use Flash, you can make your own map.

After downloading a map, place the map SWF file in the maps folder. Then, edit the config.xml file to point to your map.

Changing the Path to Your Map

If you use the default World map you do not need to change this. If you download a different map or make your own, you will need to tell your FotoMap the name of your map file. To specify the path to the map of your choice edit this line of code:

map="maps/map-world.swf"

Change maps/map-world.swf to the path to the map you are using. Make sure to include the .swf file extension.

Changing Background and Map Colors

Replace these two values with any hexadecimal colors of your choice. Do not include the preceding # mark. You are not limited to "web safe" colors - choose any colors you like.

bgColor="b7d0e6"
mapColor="ebf3f9"

Setting the Initial Map Zoom Level

By default, when first loaded, your map is zoomed out completely. This is a value of 0. You may specify any number between 0 and 100 for the starting zoom value of your map. 0 is all the way out, 100 starts zoomed all the way in.

zoom="0"

.
4 About Text & Settings top

"About" Text & Settings

Show "About" Panel on Start?

The "About" panel opens when you click the "about" link in the Menu Bar. It can also open right when your FotoMap loads by entering true instead of false.

<ABOUT startOpen="false" heading="Welcome to FotoMaps">

"About" Panel Heading

Enter text here to appear as the heading on the top bar of the About panel.

<ABOUT startOpen="false" heading="Welcome to FotoMaps">

Adding Custom "About" Text

<![CDATA[

Write something here about yourself or your photos.
You can type anything you want here. There is no limit on length. 
A scrollbar will appear if necessary.White space and line breaks will 
be removed from your text. You can format it with basic HTML tags.<br><br>
<a href='http://www.fotomaps.net' target='_blank'>You can have links!</a>
You may also use <b>bold text</b> and <i>italic text</i><br><br>
See the user manual for instructions about including basic HTML tags in this text
	
]]>

Replace this text with your desired "about" text. This can be about you, about your photos, or about anything. A scrollbar will show if your text is too long to fit in the panel all at once. Please be careful to leave the <![CDATA[ and ]]> parts as they are.

Be aware that this text will display just as it's formatted by you in the XML file. Do not leave whitespace or linebreaks and expect them to show up. You need to use basic HTML code to format your text. Flash has very minimal HTML support. You can use the following tags:

<br> - creates a line break. Use two consecutive <br> tags to create a full break bewteen paragraphs.
<b>bold text</b> - use the <b> and </b> tags around text to make it bold.
<i>italic text</i> - use the <i> and </i> tags around text to make it italicized.
<a href="URL">link text</a> - use the <a> and </a> tags around text to make it a link. The href property is where you enter the URL of the link.

.
5 Adding Photos top

Adding Photos

To add photos to your FotoMap gallery you simply have to put your photos in the photos folder and edit the photos.xml file. Use a simple text editor like Notepad to edit the XML file (Mac users try TextEdit, BBEdit, or similar). Your photos.xml file will come with the sample images already added to give you an example of the code:

<fotomaps> 
	  
      <photo name="image1" path="photos/image1.jpg" width="375" height="500" level="2" xPos="150" yPos="-130" caption="Image 1 caption" info="Image 1 extra info line" link="http://www.fotomaps.net" /> 
      <photo name="image2" path="photos/image2.jpg" width="600" height="450" level="1" xPos="10" yPos="-180" caption="Image 2 caption" info="Image 2 extra info line" link="http://www.fotomaps.net" /> 
      <photo name="image3" path="photos/image3.jpg" width="375" height="500" level="1" xPos="30" yPos="-50" caption="Image 3 caption" info="Image 3 extra info line" link="http://www.fotomaps.net" /> 

      <group slideshow="true" name="group1" level="2" xPos="-140" yPos="-100">
          <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" info="Image 4 extra info line" link="http://www.fotomaps.net" /> 
          <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" info="Image 5 extra info line" link="http://www.fotomaps.net" /> 
          <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" info="Image 6 extra info line" link="http://www.fotomaps.net" /> 
      </group>
	  
</fotomaps>

The first three images are examples of individual photos. The second three images are grouped in a slideshow

An individual photo is a single photo placed by itself on your map. A slideshow is a group of photos that are all from the same location on your map — like a mini gallery or stack of photos on that location.

Tip: When editing the photos.xml file to add photos to your FotoMap, we suggest you start by copying and pasting the line of code for an existing photo so that you can be sure to include all of the required elements.

Individual Photos

Below is an example of the code required to add an individual photo to your FotoMap. An explanation of the different parts of the code and their functions will follow.

<photo name="image1" path="photos/image1.jpg" width="375" height="500" level="2" xPos="150" yPos="-130" caption="Image 1 caption" info="Image 1 extra info line" link="http://www.fotomaps.net" />

Name of Photo

Specify a unique name for each photo. This name is used as part of the deeplink (i.e. permalink) to each photo so it's best if it's descriptive.

name="image1"

Important: The name should consist of letters, numbers, and dashes only and should not contain spaces.

Path To Photo

This tells your FotoMap where to find this photo. If your photos are in the photos folder than your path will look like the one above. Simply replace image1.jpg with the file name of your image.

path="photos/image1.jpg"

Important: Your photos must be .jpg format and NOT "progressive."

If your FotoMap has many photos you may consider organizing your photos in more than one folder. If this is the case make sure that your path not only includes the proper image name but also the proper folder. Replace the folder name path="photos/image1.jpg" with the name of the folder containing your image.

Photo Width and Height

Replace these values with the width and height of your photo in pixels. This number must be exact.

width="375" height="500"

Important: Your FotoMap does not resize your photos. You will need to save your photos at the size you want them to display, and then enter the actual pixel size of the saved image for the width and height. We suggest keeping your photos to a maximum width of 750 pixels and a maximum height of 500 pixels to avoid having your images cut off on smaller screens.

Photo Level

To create a feeling of depth and to help you arrange photos in close proximity, your photos can exist on two different levels. When viewing your FotoMap level 2 appears to be above level 1. This value must be only "1" or "2." If you enter any other number your photo will not be displayed.

level="2"

Positioning the Photo

Use grid.gif as a reference to position your photo. xPos is the horizontal coordinate and yPos is the vertical coordinate.

xPos="150" yPos="-130"

Caption and Info

Use the caption field to enter a caption or title for your image. This may be as long as you wish -- the caption area will resize itself to fit your text.

Use the info field for extra information like photographer name, date, location, or to show the URL of the link for that image. This may only be one line of text, and appears directly below the caption.

caption="Image 1 caption" info="Image 1 extra info line"

Both caption and info values may be left blank.

Photo Linkpro

Each photo can be linked to any URL you specify. This could be a larger version of the photo, more info about the photo, etc. Replace http://www.fotomaps.net with your URL. You can leave this field blank or delete it entirely if you do not wish to link your photo to another webpage. This feature is for FotoMaps Pro users only.

link="http://www.fotomaps.net"

.
6 Photo Slideshows top

Photo Slideshows

If you have multiple photos from the same location, you can group them together in a slideshow.

The following code is an example of a slideshow:

<group slideshow="true" name="group1" level="2" xPos="-140" yPos="-100">
    <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" info="Image 4 extra info line" link="http://www.fotomaps.net" /> 
    <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" info="Image 5 extra info line" link="http://www.fotomaps.net" /> 
    <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" info="Image 6 extra info line" link="http://www.fotomaps.net" /> 
</group>

You'll notice that all of the bits and pieces of photo information are the same as an individual photo, but a few of them are moved around.

To create a slideshow, first make sure your photos are surrounded by the <group> tag:

<group slideshow="true" name="group1" level="2" xPos="-140" yPos="-100">
    <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" info="Image 4 extra info line" link="http://www.fotomaps.net" /> 
    <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" info="Image 5 extra info line" link="http://www.fotomaps.net" /> 
    <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" info="Image 6 extra info line" link="http://www.fotomaps.net" /> 
</group>

All photos within a slideshow must be on the same level, and they must exist at the same coordinates, so you'll see that level="2" xPos="-140" yPos="-100" is put inside the <group> tag and removed from the individual photos. The name attribute is also specified once for the group rather than for each photo in the group:

<group slideshow="true" name="group1" level="2" xPos="-140" yPos="-100">

The only other difference here is that there is one extra attribute added to the <group> tag:

<group slideshow="true" name="group1" level="2" xPos="-140" yPos="-100">

This lets your FotoMap know that this is a slideshow and not an individual image.

In between the <group> and </group> tags, the photos that comprise your slideshow are just the same as individual photos, only the name, level, xPos, and yPos are removed because they have been already specified for the entire slideshow inside the <group> tag

<group imageSet="true" level="2" xPos="-140" yPos="-100">
    <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" info="Image 4 extra info line" link="http://www.fotomaps.net" /> 
    <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" info="Image 5 extra info line" link="http://www.fotomaps.net" /> 
    <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" info="Image 6 extra info line" link="http://www.fotomaps.net" /> 
</group>
.
7 Publishing FotoMaps top

Publishing FotoMaps

Once you have chosen your map, configured your FotoMap, and added your photos, upload all of the FotoMaps files (and all of your photos) to your website, making sure to maintain the original directory structure. If you do not know how to upload files to your website, contact your web host for assistance.

Once uploaded, the URL of your FotoMap gallery will be in the form of: www.yourdomain.com/index.html.

For example, if the domain name of your site is "mywebsite.com," and you upload your FotoMap file to the root folder of your site, then www.mywebsite.com/index.html will be the URL of your FotoMap. If you upload your FotoMap to a folder within your site called "myphotos," then the URL to your FotoMap will be www.mywebsite.com/myphotos/index.html. When writing the URL you can eliminate index.html as the server will open this page by default when you navigate to the domain name.

Would you be interested in a hosted FotoMaps option? If so, contact us and let us know. We may look into the possibility of making a partnership with a web hosting service to offer a hosted FotoMaps package in the future.

.
8 Advanced Options top

Advanced Options

Creating Your Own Map

If you have Flash software you can create your own map to use with your FotoMap gallery. Here are some important tips:

Editing index.html

If you are comfortable working with HTML you may wish to edit index.html. Common edits would be:

Regarding background colors: Even if you change the bgColor value in config.xml to something other than the default color you should NOT change the background colors in index.html to match. The background color set in the CSS of index.html should remain at #ffffff for proper display of your FotoMap.

Editing email.php

Those familiar to PHP can edit this file to customize the emails sent to them through the FotoMaps contact form.

Using SWF Files Instead of JPG Photos?

If you're familiar with Flash, you may experiment with importing .swf files into your FotoMap gallery instead of .jpg photos. This would give you the option of displaying any kind of information in the photo frame: text, animations, audio, or video. To do this simply point to a .swf file for the photo path in photos.xml. All other attributes like width, height, level, caption, etc. would be used in the same way as with a normal photo.

If you do this . . . Be aware that FotoMaps was not designed for this purpose, and adding memory-intensive media like complex animations or video may slow down your FotoMap's animation or create jerky movement.

.
.