FotoMaps User Guide

Here you will find step-by-step instructions to setup your FotoMap, choose a map, customize colors and text, add photos, and publish your FotoMap.

Getting Started With Your FotoMap

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

  • photos (folder)
    Folder contains sample images to get you started (thanks to pdphoto.org for the samples).
  • fotomaps.swf
    The Flash file that does the magic.
  • map-world.swf
    The map that you place your pictures on. You can download different maps from our library.
  • config.xml
    Edit this to customize your FotoMap with your colors and text.
  • photos.xml
    Edit this to add or update photos.
  • grid-world.gif
    Use as a reference to position your photos on the map.
  • index.html
    HTML file that your FotoMap is embedded in.
  • swfobject.js
    Javascript file detects Flash Player version and embeds the Flash file into index.html.
    (more info on SWFObject)
  • email.php
    Processes and sends email to you when someone fills in the contact form in your FotoMap.

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).

Topics

  1. Getting Started
  2. Choosing a Map
  3. Configuring Map, Colors, and Text
  4. Adding & Updating Photos
  5. Publishing Your FotoMap
  6. Advanced Options
  7. Requirements

Related Links

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 same folder as your other FotoMap files. Then, edit the config.xml file to point to your map (see Configuring Map, Colors, and Text below).

Top 2

Configuring Map, Colors, and Text

FotoMaps 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>
	  
<map path="map-world.swf" tooltips="true" />

<colors bgColor="dddddd" mapColor="ffffff" />

<text title="Your Title Here" email="your_name@your_host.com">

<about>Write something here about yourself or your photos. You can 
type anything you want here as long as it doesn't get too long. Remember 
that white space within this area will be preserved so don't indent your 
lines or move to a new line unless you want that formatting to be reflected 
in your text.
</about>

</text>

</config>

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 path="map-world.swf" tooltips="true" />

Change map-world.swf to the file name of the map you are using. Make sure to include the .swf file extension.

Tooltips On/Off

<map path="map-world.swf" tooltips="true" />

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

Changing Background and Map Colors

<colors bgColor="dddddd" mapColor="ffffff" />

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.

Changing Your FotoMap Title

<text title="Your Title Here" email="your_name@your_host.com">

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

Specify Your Email Address

<text title="Your Title Here" email="your_name@your_host.com">

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

Adding Custom "About" Text

<about>Write something here about yourself or your photos. You can type anything you want here as long as it doesn't get too long. Remember that white space within this area will be preserved so don't indent your lines or move to a new line unless you want that formatting to be reflected in your text. </about>

Replace this text with your desired "about" text. This can be about you, about your photos, or about anything. Be advised that there is a limit to the length of this text. Always check your FotoMap's about section to make sure your text is not getting cut off.

Also be aware that this text will display just as it's formatted in the XML file. Do not leave white space between the <about> and the beginning of your text. Do not create a line break unless you mean for it to show up in your text.

Top 3

Adding and Updating 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 or BBEdit). Your photos.xml file will come with the sample images already added to give you an example of the code:

 <fotomaps> 
	  
      <photo path="photos/image1.jpg" width="375" height="500" level="2" xPos="1650" yPos="-4130" caption="Image 1 caption" photographer="John Doe 2006" /> 
      <photo path="photos/image2.jpg" width="600" height="450" level="1" xPos="1510" yPos="-4180" caption="Image 2 caption" photographer="John Doe 2006" /> 
      <photo path="photos/image3.jpg" width="375" height="500" level="1" xPos="1530" yPos="-4050" caption="Image 2 caption" photographer="John Doe 2006" /> 

      <group imageSet="true" level="2" xPos="1140" yPos="-4100">
          <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" photographer="John Doe 2006" /> 
          <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" photographer="John Doe 2006" /> 
          <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" photographer="John Doe 2006" /> 
      </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.

Top 4

Adding 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 path="photos/image1.jpg" width="375" height="500" level="2" xPos="1650" yPos="-4130" caption="Image 1 caption" photographer="John Doe 2006" />

Path To Photo

path="photos/image1.jpg"

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 name of your image.

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

width="375" height="500"

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

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

level="2"

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.

Positioning the Photo

xPos="1650" yPos="-4130"

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

Caption and Photographer Info

caption="Image 1 caption" photographer="John Doe 2006"

Use the caption field to enter a caption or title for your image. Use the photographer field for photographer name and/or date. Both of these values may be left blank.

Top 4.a

Group Photos In a Slideshow

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 imageSet="true" level="2" xPos="1140" yPos="-4100">
    <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" photographer="John Doe 2006" />
    <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" photographer="John Doe 2006" />
    <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" photographer="John Doe 2006" />
</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 imageSet="true" level="2" xPos="1140" yPos="-4100">
    <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" photographer="John Doe 2006" />
    <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" photographer="John Doe 2006" />
    <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" photographer="John Doe 2006" />
</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="1140" yPos="-4100" is put inside the <group> tag and removed from the individual photos:

<group imageSet="true" level="2" xPos="1140" yPos="-4100">

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

<group imageSet="true" level="2" xPos="1140" yPos="-4100">

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 level, xPos, and yPos are removed because they have been already specified for the entire set inside the <group> tag

<group imageSet="true" level="2" xPos="1140" yPos="-4100">
    <photo path="photos/image4.jpg" width="600" height="450" caption="Image 4 caption" photographer="John Doe 2006" />
    <photo path="photos/image5.jpg" width="600" height="450" caption="Image 5 caption" photographer="John Doe 2006" />
    <photo path="photos/image6.jpg" width="375" height="500" caption="Image 6 caption" photographer="John Doe 2006" />
</group>
Top 4.b

Publishing Your FotoMap

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. They should all stay in the same directory. 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," 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.

If you do not have a website, you can sign up for inexpensive hosting (try Yahoo, Dreamhost, 1&1, Freewebs). Or, burn your FotoMap to a CD and give it out to your friends.

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.

Top 5

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:

  • Your map must be a scalable vector shape, not a raster (pixel) image.
  • To make sure that it fits on smaller monitors once imported into your FotoMap, keep your map to a maximum width of 1800 pixels and a maximum height of 1200 pixels.
  • Your map shape should be centered vertically and horizontally on the top left corner (0,0) of your flash movie.
  • If you want to be able to control the color of your map through the mapColor property in the config.xml file, you must make your map shape a movie clip with an instance name of mapShape_mc. If it has a different instance name or no instance name at all, the mapColor property will not work. In that case, just make sure to color your map how you want it before you export the file.
  • Save your map as an SWF file, and place it in the same folder as your other FotoMap files.
  • Edit your config.xml file to change the map path to the file name of your map.

Editing index.html

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

  • Editing the <title> and adding <meta> tags.
  • Adding alternative content to <div id="flashcontent"> that will be displayed for people who don't have Flash Player 8.
  • Using a different embed method. SWFObject is strongly encouraged because it detects Flash Player version and also bypasses the IE "activation click," however, if you wish to use a different method to embed fotomaps.swf into index.html you may do so. If using a method other than SWFObject you will no longer need to upload swfobject.js to your web server.

    FotoMaps is designed to be viewed at a screen resolution of 1024 x 768 or larger. It is not recommended to embed fotomaps.swf at a fixed size smaller than 100% width and height.

Regarding background colors: Even if you change the bgColor value in config.xml to something other than the default value of "dddddd" you should NOT change the background colors in index.html to match. The background colors set in 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.

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.

Top 6

Requirements

System Requirements

  • Windows 98/Me/NT/2000/XP/Vista or Mac OS X
  • Any simple text editor like Notepad (Mac users try TextEdit or BBEdit)

Requirements for your web hosting account:

  • Your host must support PHP for the email.php function
  • Your hosting account must have enough free storage space to store all of the photos you include in your FotoMaps
  • Ideally your host does not place any banner ads on your site which will take away from the viewable area of your FotoMap

Requirements for viewing FotoMaps online:

Top 7