USING VISUAL FOX AS A DIGITIZER
IN DEVELOPING HTML IMAGE MAPS
Phil Bartow
phil@bartowassoc.com
In developing a web site http://www.vacationtrak.com I wanted to make maps clickable. This meant creating image maps.
A couple of years ago I developed a database system for the (now) First Union Center Sports Facility in Philadelphia to locate customized BRICKS. Fifteen thousand engraved bricks were embedded around the new sports facility. Of course people wanted to know where their brick was located. Operationally a person gives their name, or brick number or the brick message and a four-part display is generated (in a fraction of a second). The displays show a seagulls view of the facility, the quadrant where the brick is located, the pad of thirty-six bricks containing the desired brick and an enlarge view of the brick.
The database was originally developed by placing a drawing on the screen showing the 500 or so pads of bricks. By clicking on the pad on the image the pad number was displayed. (From a table of pad numbers and X,Y coordinates. An enlarged view of the pad of thirty-six bricks was displayed. By clicking on a brick, its coordinates within the pad were identified . The operator typed in the first few characters of the brick message (from a Polaroid picture) and the table of unassigned brick messages (in a grid) was displayed. By clicking on the message in the table the message was assigned a pad number and the pad coordinates. Using the image as a digitizing pad was very efficient in entering the coordinates for fifteen thousand bricks.
Back to image maps... The form shown here is used to display an image. By clicking along the border of a state the coordinates for the image map are stored in a table. The coordinates can be edited. A string of coordinates can be generated and written off as a text file. The string can later be lifted from the text file and placed in the HTML file developing the image map. I have used this to develop clickable maps around the world.
Placed in an HTML page, the coordinates for a state might look like
<area shape="POLY"
coords="492, 225, 488, 230, 488, 235, 473, 249, 472, 253, 467, 245, 463, 241, 458, 236, 451, 229, 448, 225, 444, 222, 442, 221, 442, 217, 452, 214, 459, 212, 466, 214, 469, 217, 477, 216, 482, 216, 493, 225, 492, 225"
href="aspmp07.asp" alt="Area 7 South Carolina">
<area shape="POLY"
coords="417, 222, 421, 236, 425, 248, 428, 253, 428, 258, 427, 259, 427, 265, 430, 273, 460, 273, 460, 268, 466, 269, 470, 253, 459, 239, 455, 234, 448, 229, 445, 225, 441, 222, 441, 218, 417, 222"
href="aspmp08.asp" alt="Area 8 Georgia ">
<area shape="POLY"
coords="400, 276, 402, 281, 412, 280, 417, 282, 423, 282, 426, 287, 427, 290, 433, 287, 437, 283, 439, 282, 447, 287, 453, 293, 456, 293, 459, 298, 459, 304, 457, 309, 463, 320, 468, 321, 471, 327, 474, 331, 476, 335, 479, 335, 483, 341, 488, 342, 491, 339, 492, 334, 493, 331, 492, 322, 492, 317, 488, 312, 484, 304, 484, 299, 480, 294, 474, 287, 471, 279, 469, 273, 468, 271, 462, 270, 461, 277, 459, 274, 430, 275, 428, 272, 400, 276"
href="aspmp09.asp" alt="Area 9 Florida ">
The code for the form is relatively straight forward.
A table name Points has three fields: Xpoint,Ypoint,Place. In the Image mousedown procedure the coordinates of the mouse are stored.
LPARAMETERS nButton, nShift, nXCoord, nYCoord
xpoint = nXCoord-THISFORM.image1.LEFT
ypoint = nYCoord-THISFORM.image1.TOP
SELECT points
APPEND BLANK
REPLACE pointx WITH LTRIM(STR(xpoint))
REPLACE pointy WITH LTRIM(STR(ypoint))
REPLACE place WITH UPPER(THISFORM.text4.VALUE)
THISFORM.text1.REFRESH()
THISFORM.text2.REFRESH()
The Source of Image List control is used to place the desired image on the form.
*** list gif and jpg files
gotit = GETFILE("gif,jpg")
IF LEN(TRIM(gotit)) >0
THISFORM.image1.PICTURE = gotit
THISFORM.text5.REFRESH()
ENDIF
.The Width data field determines the width of the image. This should be set to the width that will be used in the HTML <img....></img> statement. Image maps coordinates are relative to the 0,0 point of the image. If the width is changed the image maps have to be redone.
The Reset Control Zaps the Points table. Edit evokes a browse display in which records can be edited or deleted. If any records are deleted the table is packed.
The Generate Map String control concatenates the X and Y coordinates with commas.
*create string in command2.click
SELECT points
GO TOP
mapstr = ""
DO WHILE .NOT. EOF()
mapstr= mapstr+ TRIM(pointx)+","+TRIM(pointy)+", "
SKIP
ENDDO
mapstr = TRIM(mapstr)
maplen = LEN(mapstr)
IF RIGHT(mapstr,1) = ","
mapstr=LEFT(mapstr,(maplen-1))
ENDIF
THISFORM.text3.REFRESH()
The Write String control checks to determine if a Image Map Name has been assigned and if the place value in the table corresponds to the map string name.
*create string-check for proper values
GOTO 1
DO CASE
CASE LEN(TRIM(getplace)) = 0
MESSAGEBOX("Need an Image Map name")
CASE LEN(TRIM(mapstr)) = 0
MESSAGEBOX("Need to create image map string")
CASE UPPER(TRIM( place)) <> UPPER(TRIM(getplace ))
MESSAGEBOX("Place does not match string place.")
OTHERWISE
outstr = TRIM(getplace)+".txt"
LIST OFF mapstr TO outstr FOR RECNO() = 1
ENDCASE
Yet to be done:
Because of the transient nature of my immediate effort no attempt has been made to store the coordinate values of the image maps. In addition, no effort has been made to automatically recompute the coordinates should the width be changed. Neither should be difficult!