3.1 SmallMap.com's Download Page

3.2 Recommended Folder Tree

3.3 Map Images Subfolder

3.4 Customer Images Subfolder

3.5 Local Working Folder

3.6 Viewing Sample Town

This chapter explains how a Web Publisher can obtain a template of SmallMap program and customize it to quickly suit your community. In the process, you will need to set up folders (directories) to organize your files to be published, and we assume you will need a working folder.

We have also provided two alternative tools to help you format your database in order to work with the SmallMap program.

3.1 SmallMap.com's Download Page

All downloadable files are located at SmallMap.com's Download Page. The files to be downloaded are organized as a set of template files, created for the fictitious "Sample Town."

Windows users: All required files for Microsoft Windows operating systems are zipped into "sampletown.zip." This file is all you need if you operate in the Windows environment. The second column of the the Download Page page lists the full file contents.

Within the zipped file is a tool to format your data, in the form of an Excel spreadsheet. There are alternative formats in Open Office and StarCalc spreadsheets available for download as well. An alternative tool, written as a dynamic HTML program, tabtool.htm, is available to do the same job.

Non Windows users may use the second column of the Download Page page to download individual files, by right-clicking the individual links then saving the files.

3.2 Recommended Folder Tree

After downloading and any unzipping of the files, we recommend you place the files in the folder structure shown below. If you do not, you need to customize SmallMap code to refer to the correct paths.

We suggest that you place SmallMap program in a subdirectory or subfolder within on your Web site "www.thisismysite.com." On your local computer, we suggest unzipping "smallmap.zip" into a subfolder, initially named "sampletown". The unzipping process should automatically create this folder, three text files (index.htm, smallmap.js, largemap.htm) and two subfolders (custimages and mapimages).

Your folder structure may look like this:

Figure 1: Suggested Folder Structure

• The folder "sampletown" is the main program folder under your Web home. You can later change the name "sampletown" to some other name.
• The HTML file "index.htm" is the main program file and is required.
• The JavaScript file "smallmap.js" contains your mini database and is required.
• The HTML file "largemap.htm" is an optional static display of full-size map images.
• The folder "custimages" contains all product/shop/individual images of the shops/members listed.
• The folder "mapimages" contains a full-size map, an index map, and subdivision maps.

The zipped file also contains a spreadsheet tool for formatting data, "smallmap.xls" and an alternative tool "tabtoollocal.htm." The spreadsheet and tool are not to be uploaded for publication. You should place them in your local computer in a separate "working" folder, as described below in "3.5 Local Working Folder."

3.3 Map Images Subfolder

The "mapimages" subfolder is optional. It is needed if you intend to present map images alongside directory listing.

The "sampletown.zip" template package contains several sample map images, including a full-size "largemap.png," "indexmap.png," and several subdivision map images.

Later, you should prepare your own "largemap.png", shrink a copy to become "indexmap.png", and slice the full-size map into subdivision maps, using the suggestions provided in "Chapter 6. Preparing Map Images and Customer Images." Then replace your own map images into the "mapimages" directory.

You can customize the names of this folder and the files inside the "index.htm" main program file, as explained in Chapter 5. Customizing the Main Program File "index.htm".

The ".png" or Portable Network Graphic format is a graphic format just like the more familiar ".jpg" and ".gif" formats. You can use JPG or GIF images, as described in Chapter 6. Preparing Map Images and Customer Images.

3.4 Customer Images Subfolder

The "custimages" subfolder is also optional. It is needed if you have specific product or shop images from each customer or members. Prepare suitable-size images according to Chapter 6.1 Customer Images and save them here. The sample package contains three sample images in this subfolder for testing purposes.

Figure 2: Example of a customer "name card" and automatically-inserted customer image
      

You can place as many images in this folder as you like. SmallMap is currently designed to display a maximum of two images per customer listing, but you can modify the program to display more.

You can customize the names of this folder and the files inside the "index.htm." main program file, as explained in Customizing the Main Program File "index.htm".

See also

• Manual Chapter 1.7. Viewing a Specific Name Card
• Manual Chapter 6.1. Customer Images

3.5 Local Working Folder

We recommend you create a "working" folder/directory on your local computer to store your working files, recent backups, and the tools and templates we have provided. These files are not to be uploaded to your Web site.

Your original data (a list of clients/members/customers and their details) may reside in a spreadsheet or a database program, also not to be uploaded.

The SmallMap JavaScript data file "smallmap.js" requires these data in a very specific text format. See Chapter 4. Customizing Your Mini Database "SmallMap.js" for more details.

We have provided a spreadsheet tool to help you convert your data into the suitable SmallMap format. This spreadsheet is available in three version: Microsoft Excel (.xls), Open Office spreadsheet (.sxc), and StarCalc (.sdc).

We have also provided an alternative tool tabtool.htm to do the same job if you prefer not to use a spreadsheet. A plainer version, tabtoollocal.htm, does the same job but has been formatted to be saved on your local computer.

This spreadsheet "smallmap.xls" and tabtoollocal.htm (or tabtool.htm) are not required on your Web site to run the SmallMap program. Hence it should not be placed on your Web folder. It should be saved separately on a working directory on your local computer.

See the next chapter, "Chapter 4. Customizing Your Mini Database 'SmallMap.js'."

3.6 Viewing Sample Town

Assuming you have unzipped "sampletown.zip", or you have downloaded individual files into your local computer, under the "sampletown" folder, you should be able to view the Sample Town directory and map images immediately.

To run the Sample Town demonstration, simply go to the "sampletown" folder and open "index.htm" in a Web browser.

SmallMap should run, and you will be able to see the directory listing, map images, navigate the map, and find text in the Sample Town.

If there is a problem, check the folder tree structure. Unzip again, or download individual files. Compare what you see with our version Sample Town at SmallMap.com.

Web SmallMap.com

Two Sample Websites

1. Sample Town - This is a fictitious town's directory and "map," a demonstration, and a template containing the latest SmallMap codes and scripts. To illustrate the capability to link to external map and direction Websites, we have input the addresses of actual public places under the Aquarium, Arboretum, and Museum categories. It uses single-grid, PNG-formatted, map images for zoomed-in view. Click for an alternative color scheme.

2. S2BJ - A real-life commercial area with a real map: Sungаi Duа and Bukit Jаmbul, Pеnаng, MaIаysiа. It makes use of 3-grid-by-3-grid GIF subdivided map images.

Promotions

Free: First 10 registrations

Recent News

Apr 30, 2005 (Press Release)