|
SmallMap Manual
Chapter 6 Preparing Map Images and Customer Images |
||||||||||||||
SmallMap is designed to work with maps of any size and any number of grids. For minimal modification, you should follow our recommendations below. You'll need to do some drafting and planning about the dimensions and ways to cut up the Web version of your map. Chapter 6.1 is about "customer images," or those showing client/shop products. The rest of the chapters are about map images.
If you decide to present your own map images, you will need to create a large map image, and subdivide it for the end user to zoom in. To split the large image into smaller ones, there are two options:
Adding customer images is an optional feature. When a visitor or end user clicks a particular shop or listing, that shop's "name card" appears above the listing table. This name card can display one, two, or no images about the client, depending on your database inputs. You specify the URL of these images under the data fields, which index numbers are iImg1 and iImg2. For example, to display two images called "product1001a.jpg" and "product1001b.jpg" for client #1001, first create two images. Second, save them in the customer folder, which is the "custimages/" subdirectory in the template SmallMap. Third, enter the image names in the database, for client #1001, in the data fields which index numbers are "iImg1" and "iImg2" (items index number 17 and 18 in the SmallMap template). If you do not have any customer images, simply leave the data field blank (a pair of double quotes, ie, ""). See Manual Chapter 4. Customizing Your Mini Database "SmallMap.js" for more details. In the mini database, client #1001's data would look like this partially: un[NN]=[....,"product1001a.jpg","product1001b.jpg",...] With this in the database, SmallMap will know where to look for the images for Client #1001, and will display them whenever the name card is called for. Dimensions Customer images should be cropped to a width of about 300 pixels, and should be smaller than the variable "leftTableWidth" of 340px in template SmallMap, to allow for table margin and paddings. The "leftTableWidth" value is set in the main program, explained in Chapter 5.13 "Page Format, Color Variables For Style Sheet." Although there is an alternative, and wider, format "altLeftTableWidth" of 420px (for screens wider than 800x600px), you should aim for the lowest common denominator among your visitors (images of around 300px for 800x600px monitor) which would look pleasant for all visitors.
There is no limit to image height, although the sensible thing to do is to keep the image around 100-300px in height. The image format can be JPG, GIF, or PNG. Image quality should be kept low to reduce download time for visitor, so that a JPG file, eg, should be 10-30KB only. We suggest adjusting the image color levels, add a little brightness, contrast, shrink and crop to about 300px width, sharpen a little, then save the image to as small a size a possible, while still looking crisp.
See also
Adding map images is an optional feature of SmallMap. Even without adding your own map images, given enough address details and in countries where map and direction Web services are available, you may be able to activate the automatic and individualized links to the major map and direction Websites, using the variables "enableMapEngineN" described under Chapter 5.11: Enabling or Disabling Features. Four Steps There are four general steps in preparing the map images:
Your community maps are your unique contents and the copyrights are yours. SmallMap.com and its owners do not claim any copyright over your graphic and database contents. Dimensions We recommend an original (full-size) map of about 1000-2000px in width, and 1000-2000px in height. See chapter sections 6.4 and 6.5 below for more details. Presented as a HTML file, SmallMap is flexible. The constraints mainly stem from the need to give the end user a clear overview at all time.
Later, as explained in Chapter 6.6 below, you will need to create an "indexmap.png," which should be about 400px width, since that gives the best fit on a 800px by 600px screen common to most personal or laptop computers.
Becoming familiar with the alternative image formats, color depth requirements, and additional tools will help create sharper and smaller image files. Vector Graphic, Not Raster (Bitmapped) Your map image should originally be drawn in a "vector" graphic program, not the "raster" (bitmapped) type. Vector graphic files are pictures that can be mathematically expanded and shrunken without losing clarity; they are used for mapping, architectural, engineering drawing. "Raster" or "bitmapped" images are for "dot like" images, and loses accuracy as you manipulate them; they are used in photos and final output images, and in Web images, such as JPG, GIF, and PNG. It is generally not a good idea to use map image scanned from a printed map, especially a large one. A scanned image is a raster file, tends to be unclear, has complex colors (such as JPG or BMP formats), and can result in large image files. Yet if you try to convert that to GIF, the image quality deteriorates substantially. Large files are a drag for users to download. Image Format: PNG or GIF For images to be presented on the Web (the full-size map, index map, subdivision maps), we suggest saving them in the PNG or GIF format, rather than JPG format. PNG and GIF formats compress well when there are stretches of uniformed, 256 colors (such as an evenly-distributed, green, color representing a football field on a map). The JPG format can better handle gradient (gradually shifting) and photo-like colors, but produces larger files. PNG, or Portable Network Graphics, is a newer format than GIF. It is an International Standard and a W3C recommendation. See A Basic Introduction to PNG Features and Wikipedia on PNG. PNG has been created for Web browsing, partly because the GIF format has a lingering patent royalty issue. For example, the freeware programs we suggest later to help you split your images do not support the GIF files because of the patent royalty cost. The major graphic programs you already own may support GIF, but they may not have the functions to split images. Color Depth We recommend using fewer colors rather than more. Color depth should be 8-bit colors, ie, 256 colors. Too many colors and the image file size can become very large and slow for end users to download. Too few colors, and the image may not look pleasing to the eyes. When saving into both PNG and GIF file format, we suggest using your graphic software's options of 8-bit (256 color) indexed color. Additionally, if saving into the GIF format, we suggest using the "non-interlace" format and "adaptive" palette. These options appear to yield smaller PNG and GIF files with higher quality. Additional Tools to Split Image SmallMap can accommodate two types of subdivided map images, or the "zoomed-in" maps. In Option A, you split your full-size map into subdivisions that is each 1-grid wide and 1-grid high. This option is suitable if you have software to help you neatly split your full-size image into smaller one. The splitting needs to be precise because SmallMap will put 9 of them back together and there shouldn't be gaps or protrusion between columns and rows. Generally, it is tedious and imprecise to manually crop each image. In Option B, you manually crop full-size map images into smaller one. Since it is difficult to do this precisely, we have designed SmallMap to accept 3-grid-by-3-grid maps, so that there is no need to put together a mosaic of single-grid images. This is suitable if you do not have a software to split your images neatly, and you have to manually crop them. GIF is also more widely supported by older browsers such as Internet Explorer 4.x or Netscape 4.x (but these older versions are now rarely found among Web users). You the Web Publisher can switch from one Option to the other by setting the variable "imgIs9Grid" under the "Map-related Settings" code segment. You must of course also prepare the corresponding subdivision map images accordingly. Here are links to two image editing freeware programs that will help you split a large image by grid lines, and output to smaller images. Both these programs currently do not support GIF output because of royalty demanded by the owners of the GIF compression patent from graphic program developers. Disclaimer: Both programs are third-party software programs unrelated to SmallMap.com. We disclaim all responsibilities for your using them. You must use them only after reading and agreeing to their terms. SmallMap.com and its owners are not responsible for any problems or questions you may have regarding these program. Please do not send questions regarding their usage to SmallMap.com. Please consider their requests for donation to support the authors. Both will output to the PNG format, which is quite efficient for our purpose if you specify 8-bit (256) index color output. The PNG format can also handle more complex colors up to 48 bit, similar to or more than the JPG format. But then the file size can be very large with more complex colors. For each of these two image-editing freeware programs that are capable of splitting a large image into smaller ones, we provide several possible links to information and to download:
Castle's Splitimage
6.4 Planning The Map Images: Some Constraints You need to do some planning for any map images you wish to use with SmallMap. You need to bear in mind several practical constraints when planning the map images. Most Web visitors are using 800x600 pixel monitor, which is often smaller than the monitors that a Web developer may be using. You should keep most information (Web directory and map) on a single screen, so that the visitor can get a bird's eye view immediately. Many visitors will not be patient with downloading large image files. Further, monitor resolution is poorer than print resolution. Small text of font size 6 to 8 points may print very clearly on a glossy paper map, but the same text may appear blurry on a computer monitor, especially if the image is bitmapped/raster (GIF, JPG) format and has been edited, transformed, or re-sized several times. Original map image should be in vector graphic program Your original map image will be in some proprietary format associated with your graphic software, such as Corel Draw. This file is not uploaded to your Web site. This original map image can be of any size. One important constraint is that, once shrunken to the "large map" or "full size map" described below, the smallest of the text should still be legible on the computer monitor. In the next few sections, we will suggest some parameters for your maps, balancing the need for the images to be large and clear, and the need to be small to ease the download and make it easier for visitors to get a good overview. Division into grids: columns and rows Your map may already have a grid system planned earlier. If not, you need to divide the large map so that it is easier to refer to a client or shop's location. The template SmallMap package assumes that your grids columns are named alphabetically, that is, moving to the right you will have column A, column B, column C, etc. It assumes that your grid rows are identified numerically, that is moving down, you have row 1, row 2, row 3, etc. In combination, the cells would be named like an electronic spreadsheet. That is, the first row, moving to the right, should have grid a01, a02, a03, etc If the right-most column in the grid system is narrower (say 50px) than the other columns (say 100px), you should use your graphic program to add a "border area" to make the right-most column as wide (ie, add a border area of 50px of a bland color of your choice) as the others. The same applies to the bottom row, you need to add a border area (do not enlarge the image) to make all rows equal in height. This will help the program when it draws a HTML table around your map images, as well as help the HTML page correctly draw the "map area" element and its "square grids". See Chapter 6.11: Map Related Settings in "index.htm for more details. See also the closely related topic and illustrations in Chapter 6.5 Full-Size or Large Map Image: Relationship with Index Map and Zoomed-in Maps
6.5 Full-Size or Large Map Image: Relationship with Index Map and Zoomed-in Maps The SmallMap Web page is generally divided into two halves. The left half is reserved for listing table and search operation. The right half is designed for any map images, either the index map or zoomed-in maps. We recommend that you design your map images with an end user using 800x600 px monitors in mind. That means about 400px of width is reserved for any map images. The picture below demonstrates your index map, which the end user sees immediately upon opening your SmallMap page. Whatever the width of your full-size map, you should shrink it to about 400px of width if you are to let the end user get a good overview of your community.
When the end user clicks on the index map above, SmallMap reloads to display a 3-grid-by-3-grid view of your zoomed-in map, as shown below. This view may have been constructed from 9 pieces of single-grid map (Option A), or one piece of 9-grid map (Option B). Whatever the underlying image arrangement, the total width of 3 grids should be 400px, the same as the whole index map. In other words, each of the 3 grids should have a maximum width of 133px (133x3 = about 400).
Because the zoomed-in maps are unshrunked slices of the full-size map, it means each of the grids in your full-size map should have the same width of 133px. This number is constraint by the assumption of 800x600 px monitor, and the use of 3-grid-by-3-grid map in the zoomed in presentation. This observation has important implications for planning the dimension of your full-size map (and even the original vector graphic map). If you have decided there should be 6 grid/columns across for your full-size map, for example, then your full-size map should be about 133x6 pixels in width. The height then should be adjusted proportionally.
The full-size map image is named "largemap.png" in the template SmallMap package available at our Download. Your full-size map should not be too large. Ideally, Web visitor should be able to view it by scrolling no more than once down and once to the right. Two uses of full-size map image "largemap.png" This full-size map has two uses. First, you will be dividing it into the zoomed-in maps. Second, visitor can view this full-size map by itself, by clicking a link on the SmallMap Web page. SmallMap gives the Web Publisher four options to present the large map, by setting the variable "enableLargeMap", within the main program file "index.htm," under Section I.A., under "Map-related settings."
See also
Optimal dimensions for largemap.png Most Web visitors still use monitors with 800x600 pixel resolution. The Web browsers' scrollbar use up perhaps 30px of the 800px width, as illustrated in Figure 3 above. It also use up 100-150px of the 600px height for menu, scrollbar, and various tool bars. Different Web browsers and operating systems have slightly different widths or heights for these menu bar, location bar, tool bars, scrollbar, status bar, task bars, and other elements. This means a full-size image should be less than 1500 pixels in width, if we aim for the visitor to scroll no more than once. That is, two screen's width, subtracting scrollbars, or about 2x800-2x30 px. The image should be less than 900px in height, ie, at most two screens in height, subtracting menu, toolbars, scrollbars, or 2x600-2x150 px. The SmallMap program is flexible. These are only guidelines.
The index map is a required image file if you have decided to display map images for your community. The index map is a zoomed-out, key map that has been shrunken from the full-size map to provide an overview. It appears as soon as SmallMap is loaded, provided you have activated the map images in your customization. By default, the index map is named "indexmap.png" in the template version of SmallMap. See Figure 2 above for an illustration. You create the index map by shrinking the full-size map to a size that will roughly fit into the right half of an 800x600px monitor screen, or a width of about 400 pixel. The file "index.htm" is optimized to show an index map of about 400px width in the map space in the right column. You can make minor adjustments. The best approach is to directly resize your original map in the vector graphic software; a second best approach is to indirectly resize from your "largemap.png". Save it as "indexmap.png," overwriting the sample file under the "mapimages/" directory. See also Chapter 1.3 SmallMap Layout on Web Page for a view of the SmallMap Web page with an index map.
As depicted in Figure 3 above in Chapter 6.5 (Full-Size or Large Map Image: Relationship with Index Map and Zoomed-in Maps), the zoomed-in view contains 3-grid by 3-grid map images. The zoomed-in maps are unshrunked slices of the full-size map.
This view may contain nine pieces of single-grid map (Option A), or one piece of 9-grid map (Option B). Each option is discussed later in
In either case, the zoomed-in view presents nine grids at any one time. Why 9 grids? An example is the zoomed-in view of Grid C03. It covers grids b02, c02, d02, b03, c03, d03, b04, c04, and d04. That is Grid C03 in the center, and eight surrounding grids. Displaying 9 grids in a block allows the visitor to focus on the center grid, yet to be able to see the 8 neighboring grids, and alternative shops or listings. Our experimentation has shown that displaying a single grid is often unnecessarily narrow in focus. The cluster of shops or clients within a single grid is often too small to be helpful to visitors searching for a category of shops or listing in the area. How wide per grid? Each 9-grid subdivision should have a dimension of about 400px by 400px to fit optimally into the SmallMap design for a 800x600px screen (same logic as indexmap.gif). This means each grid in the original full-size map should only be (400px/3) x (400px/3) in width and height, or about 133px by 133px. Below is a duplicate of Figure 3 already presented in Chapter 6.5 above.
6.8 How to Subdivide to Get Zoomed-in Map Option A: Single-Grid Images If you have decided to present your own map images, you will need to create a large map image, and subdivide it for the end user to zoom in. To split the large image into smaller ones, there are two options:
This section discusses only Option A. Single grid map images means each file is smaller and reusable when the end user navigates to the neighboring grid. In contrast, Option B's 9-grid map images have substantial overlapping area, and are larger to download. Option A may be said to be more efficient. However, to use Option A, your graphics program must be able to split your large image into smaller ones in a precise and neat way. We suggest two freeware programs in Chapter 6.3 Image Formats and Tools to help you do this. These programs do not process GIF image, only PNG and others. JPG files tend to be larger. Follow their instruction to split your map image.
We recommend that you save your single-grid image in the PNG file format, in 8-bit (256) indexed color to reduce file size. Make sure that you set the variable "imgIs9Grid" under the "Map-related Settings" code segment to "false." This tells the SmallMap program that your subdivision map images are not 3-grid-by-3-grid (or 9-grid) images, but are single-grid map images.
6.9 How to Subdivide to Get Zoomed-in Map Option B: 3-Grid-By-3-Grid Images When presenting your zoomed-in maps, Option B means splitting your large map into overlapping, 3-grid-by-3-grid, maps. When a visitor clicks anywhere on the index map, the Web page zooms into one of these 9-grid pieces. This will work around the problem if you do not have graphic software to split the large map into smaller images precisely along grid lines.
Preparing them may be a confusing and repetitive manual process of cropping images. As illustrated in Figure 6 below, these subdivision map images may appear confusing because:
Make sure that you set the variable "imgIs9Grid" under the "Map-related Settings" code segment to "true." This tells the SmallMap program that your subdivision map images are 3-grid-by-3-grid (or 9-grid) images, not single-grid map images. You will require regular image editing software such as Photoshop and Paint Shop, the capability to crop and image, and save in the GIF or PNG format, with 8-bit, index color images. Even if you have decided on Option B, you could still use the freeware programs suggested in Chapter 6.3 Image Formats and Tools and a few rounds of splitting to create the necessary 9-grid images. Here is further explanation on preparing your map subdivisions. In this section, we are assuming you use the GIF format, but PNG format will work just as well. How wide should 3-grids be? Each 9-grid subdivision should have a dimension of about 400px by 400px to fit optimally into the SmallMap design for a 800x600px screen (same logic as indexmap.gif). This means each grid in the original full-size map should only be (400px/3) x (400px/3) in width and height, or about 133px by 133px.
Why overlapping map images? Overlapping images make it more intuitive to navigate and view the map images.
An example is image c03.gif. It covers grids:
Yet the image c04.gif also covers two of the same rows (rows 3 and 4 in red color):
Overlapping grids give visitors visual continuity, as they navigate from an image to the next. For example, it is much easier to follow a 3-row map block as it steps down row by row, than it is to follow a jump to the next unseen map block below. Why are there no images named for the grids on the edges? In Figure 6 above, there is 9-grid map images named b02.gif, b03.gif, b04.gif, etc. But there are no a01.gif, a02.gif, .. b01.gif, c01.gif, ... f02.gif, f03.gif, ... b05.gif, c05.gif, ... etc. In fact there are no subdivision images named after the grids on the four edges: left-most column (a), right-most column (f), top row (01), and bottom row (05). The reason is simply that there are no map grid beyond the edges. The only grids that have 8 other surrounding grids are those one step removed from the edges (b02, b03, etc). When you click grid a01, a02, or b01, for example, in the Index Map, SmallMap will automatically look for the closest map towards the center, and in this case display image b02.gif. How many subdivided map images is enough? When subdivided properly, you will be creating (C-2)x(R-2) pieces of 9-grid map images, where C means the number of columns, and R means the number of rows. That formula deducts 2 from C, or the number of columns, because there is no need for images named for the left-most and right-most columns. That formula deducts 2 from R, or number of rows, because there is no need for images named for the top and bottom rows. For example, if your full-size map have columns A to F, and rows 1 to 5, you will be creating (6-2)x(5-2), or 12, pieces of subdivided map images. There will be no subdivided map named after the top and bottom rows (1 and 5), and the left-most and right-most columns (A and F). This is what Figure 6 above is demonstrating. Although there are 30 grids in our example above, you will need to create only 12 subdivided map images. The task quickly becomes more repetitive if you have a 10-grid-by-10-grid full-size map. It means creating 64 subdivided map images.
The SmallMap template file assumes that your grid columns are named alphabetically, in the lower case, that is, moving to the right: columns a, b, c, etc. It assumes that grid rows are identified numerically: rows 1, 2, 3, etc. In combination, the grids are named like an electronic spreadsheet; the first row, moving to the right, should be: grids a01, a02, a03, etc In Option A's subdivided maps, the image name is simply the name of the grid, such as a01.png. In Option B, the subdivision map images are named after the center of the 9 grids, such as b02.gif. For row numbers smaller than 10, you need to add a zero (0) in front of the number, to round up the places to two, such as "b02.gif" rather than "b2.gif" for the image name. Image names should be in lower case, such as "b02.gif" rather than "B02.gif". Although our sample images above have appeared with uppercase (capital) letter names, these are only for visual emphasis. This distinction is important because Unix-related Web servers distinguish between upper-case and lower-case file names. It will not find your image if there is a mismatch in the cases of the file name. Windows PCs make no such distinction and your customized SmallMap may appear to work on your Windows test PC even when there is mismatch, but will fail once uploaded to a Unix-related Web server. The safest thing to do is thus to ensure that your "index.htm" refers to lowercase image names, and your images are named in lowercase. SmallMap also provides a convenient switch. If you decide to use upper case for your image file names, such as B03.gif, you can customize the variable "imageFileNameLowerCase" to false, under main program file's Section I.A., under "Map-related settings." See Chapter 6.11 below. See also Download for a list of files.
6.11 Map Related Settings in "index.htm" If you have decided to include map images in your community directory, you will need to customize the variable values in this section in the main program file "index.htm," under Section I.A., under "Map-related settings." Bear in mind that if your last column (or last row) in the map image grid has a narrower width (or height) than the others, you need to use your graphic software to add a stripe of "border area" (of the color of your choice) to make all columns (rows) of equal width (height). Uneven column width or row height can distort the way SmallMap presents your map images, particularly the HTML table around the index map, and the invisible map grid lines for the index map and 9-grid maps. See below for more details. In the Sample Town template for "index.htm", this code segment looks like this (comment lines and long text abbreviated): //Map-related Settings //-------------------- //Ignore these if you have no map, and only intend to ... ... //Index map column width and row height var alphabets="ABCDEF" //index map column alphabetic headings. ... var indexMapCutX=[0,66,133,199,265,333,399] //Cut off points for columns on index map ... var indexMapCutY=[0,66,133,199,264,333] // Cut off points for rows on index map ... var imgIs9Grid=false //Option whether to use subdivided maps that are ... var widthOf9GridMap=400 var heightOf9GridMap=400 var largeMapBgColor="#ffff00" var imageFileNameLowerCase=true var imageFileExtension=".png" var largeMapNameAndExt="largemap.png" var largeMapHTML="largemap.htm"
"alphabets" The variable "alphabets" refers to the grid columns in your full-size map. If you have 10 columns, then you must change this value to "ABCDEFGHIJ" without spaces. SmallMap can only correctly handle up to 26 columns. It is acceptable to use uppercase here, as they will be used only for displaying the columns. The program will automatically convert the alphabets to lowercase later when referring to file names. However, if you have set "imageFileNameLowerCase" to false, then SmallMap will use uppercase image file names internally and when calling for image files. "indexMapCutX" and "indexMapCutY" The variables "indexMapCutX" and "indexMapCutY" are two arrays applied to the Index Map. In the function "drawMapSections()" when drawing index map, these two arrays tell the HTML "map area" element where to draw a set of invisible vertical and horizontal grid lines. In the SmallMap template, "indexMapCutX" tells the program to draw an invisible set of vertical grid lines at x values of 0, 66, 133, 199 ... pixels. The array "indexMapCutY" specifies the horizontal grid line at the y values of 0, 66, 133, ... pixels. These invisible lines do not actually cut up the image file; they are basic feature of the "map" elements of HTML files. The values in the SmallMap template in combination tells the HTML "map area" to draw squares bordered by X values of 0, 66, 133, ... and Y values of 0, 66, 133, ... When a visitor clicks on the index map on X and Y coordinates of 100 and 100 pixels, for example, the click will fall on the second column and second row, or grid square b02. This information is fed to SmallMap program, which seeks out the image "b02.png" or "b02.gif," depending on your settings. "widthOf9GridMap" and "heightOf9GridMap" The variables "widthOf9GridMap" and "heightOf9GridMap" apply to the 3-grid-by-3-grid subdivision map images, as in Option B. Ignore this if you are dividing your map images in to single-grid images as in Option A. They should be set to correspond to the actual width and height of your 3-grid-by-3-grid subdivision map images. Your 3-grid-by-3-grid subdivision images should, in turn, be designed to have width of around 400 pixel to fit into most Web visitor's computer monitor, which have 800x600-pixel resolution. The function "drawMapSections()" draws two types of map: index map and subdivision (9-grid) maps. When it draws the subdivision maps, it branches into two options. For Option B, when "imgIs9Grid" is set to true, the function will call upon these two variables, then divide the width and height into three, creating the invisible grid lines for a 3-grid-by-3-grid HTML map image. As the visitor clicks anywhere on the image, the HTML map area and JavaScript will then be able to read information about which grid you have clicked. "largeMapBgColor" The variable "largeMapBgColor" sets the document background color for "largemap.htm" mentioned above. "imageFileNameLowerCase" The variable "imageFileNameLowerCase" has been described above in Manual Chapter 6.10 Naming the Image Files. SmallMap by default looks for subdivision map images using lowercase file name, such as "b02.gif." Unix-related servers are case sensitive. However, if you insists on using uppercase file name, you should reset "imageFileNameLowerCase" to "false" (without the quotes). "imageFileExtension" The variable "imageFileExtension" is the file name extension for subdivision map images. By default, ie, in the template SmallMap program file "index.htm," this variable is set to ".png" (be sure to include the dot or "."). You can use another image format, such as GIF, and change the value to ".gif". "largeMapNameAndExt" The variable "largeMapNameAndExt" is the name for your large map image, including file extension. Default value in the template SmallMap file is "largemap.png" but you can customize this. "largeMapHTML" The variable "largeMapHTML" is the name of your large map HTML page, including file extension. Default value in the template SmallMap file is "largemap.htm" but you can customize this. See Chapter 6.12 below for more details. See also Chapter 5.11 Enabling or Disabling Features.
This is an optional feature for presenting two links which the end user can click to open a new window to view a full-size map. SmallMap gives the Web Publisher four options to hide or present the full-size map, initially named "largemap.png." You can set the variable "enableLargeMap", within the main program file "index.htm," under Section I.A., under "Map-related settings." Two links are available on the SmallMap Web page for visitors to click to view the large map. First is the "Large Map" link just below the listing table on the left column. The second is the "L" link on the upper left of the map image, in the right column. They perform exactly the same function. See also Chapter 5.11 Enabling or Disabling Features, under variable "enableLargeMap." Four Possible Settings By setting "enableLargeMap" to 0, you disallow the visitor from calling "largemap.png". The two links "Large Map" and "L" described above will become invisible. By setting "enableLargeMap" to 1, SmallMap will generate a new HTML page on-the-fly that will display "largemap.png" whenever the visitor clicks one of the two links. By setting "enableLargeMap" to 2, SmallMap will generate a new HTML page on-the-fly that will build a mosaic of your single-grid map images whenever the visitor clicks one of the two links. This assumes you have made these single-grid images available. This "mosaic approach" saves time by avoiding the download of a large and uncached map image. By setting "enableLargeMap" to 3, SmallMap will call an existing HTML file "largemap.htm", which will call the map images, whenever the visitor clicks one of the two links. The Web Publisher can redesign and decorate this "largemap.htm" as desired. In the template SmallMap package, "largemap.htm" reuses the large map image. If you redesign "largemap.htm" to build a "mosaic" from 3-grid-by-3-grid subdivided maps, it will have to skip some of the overlapping pieces. For example, b02.gif covers grids a01 to c03. Therefore, the next image file to the right should be e02.gif, which covers grid a04 to c05. There is no need for c02.gif or d02.gif. However, if your total column number is not exactly divisible by three, you will need to prepare several one-column or two-column images for the right edge of your mosaic. The same applies to the rows and the bottom edge. If your row number is not a multiple of three, you need to create additional one-row or two-row image pieces for the bottom row of the mosaic.
|
|
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 Recent News |