FileMaker and Image Maps in a Web Viewer

Source: ebay auction

Back in the day, (mid 1980’s) there was a Macintosh database program called FileVision from Telos Software. It was rudimentary on the database side, but it had one really cool feature, the ability to link images to data. For example, your front end could be a map of a country, click on a region and get data for that region. It probably wasn’t as good in reality as I remember it, but I have always wanted more of this type of capability inside FileMaker.

While it is possible to simulate a map driven interface in FileMaker, employing buttons, the results are a little limited because you are working with buttons. Each button can only be a square or rectangle and so the interface can be a little clunky with maps, especially if your underlying map doesn’t happen to consist of entirely square regions, or if your grid is not horizontal.

A recent blog posting by New Zealand-based Digital Fusion about using Image Maps in a Web Viewer got me thinking about this idea again. The folks down in upside-down Hobbitland set out to conquer this task employing the HTML concept of image maps. Their blog posting and demo file are well worth a look.

They came up with three approaches, all of which employed image maps, only two of which they got working. The first approach was to deploy the image map on a web server. The second approach was to employ a very useful plugin called Reactor. The third approach, which they say they did not get working fully, was to use Base64 encoding for the image and generate the Image Map on the fly in a web viewer.

The ideas generated by Digital Fusion got me thinking about another approach.

My idea consisted of creating a set of pages, containing image maps, one for each of the image map subareas. This would be a self-contained mini-website, where all the links either went down one level or up to the top level.

The HTML code for each page is stored in FileMaker with an image in a container field, rather than using the Base64 technique that Digital Fusion employed. The mini-website is then generated and stored in FileMaker’s Temp directory. It can be regenerated on demand, or each time the database launches.

The idea that makes this all work was to employ Digital Fusions’ script watching technique to catch when the sub-page loads, display the secondary page and then have a FileMaker script detect the change and do something based on which new page loaded.

Using the listening technique, the web viewer waits until the new page loads, grab its contents, or URL and then a conditional script executes based on the new URL. The bonus of this approach is the user gets the effect of drilling down to a more detailed view of the larger map. Clicking on the detailed map image takes the user back up to the top level map.

This approach lets the web browser do the work of figuring out where the user clicked. No need for a C program/FileMaker plugin, since the ‘where in the polygon did the user click’ capability is already built into the web browser.

Clicking on the larger map drills down to the sub-map. In the demo database it also sets a global field, which filters a portal with matching records.

The Web Viewer with the HTML Image Map has an OnObjectEnter script tied to it.

Digital Fusion recommended a .25 second Interval pause in their blog posting, but in the demo file, this led to sporadic performance on an older MacBook that was used for testing. Instead a .5 second interval was used. This seemed to clear up the issue. The function of the interval is to allow the new page to load.

This script is where the logic for displaying your data in relation to the map would be placed.

1) After a half second delay, the script checks to see what the current URL of the Web Viewer is using the GetLayoutObjectAttribute function.

GetLayoutObjectAttribute ( “MapViewer” ; “Source” )

2) Then a series of case statements perform the logic of what group to filter on.

3) Finally turn off the Install OnTimer Script, by setting the interval to 0.

The Image Maps for this demo were created using a Mac App called ‘Rage MapDesign‘ to build the demo image map with a set of sub-pages, themselves containing image maps that link back up to the main map. I can’t vouch for it being the best of breed, it was just an app I happened to have from a software bundle purchase.

I tweaked the code, using a text editor so that all the images lived at the same level of directory, to simplify the exporting script. Also the Rage Map Design program defaults to the same Image Map name in each map you created, so the sub-map names were also edited. Have a look at the code for each page to see in more detail how to do this.

There is a data table in the demo database that stores each web page, including the name of the page, and the name of the graphic employed in the image map.

Note that when you quit FileMaker, it clears out its Temp directory, hence the need to refresh it on start up. If you don’t want to re-write these pages all the time, you might consider storing the pages in the FileMaker Extensions or Documents folders.

Besides running the mini-website creation script on startup, there is a button to refresh the pages on the Generate Pages layout.

The People data table is just to have some sample data (from the Fake Name Generator site) to filter. I randomly assigned different Groups and then from the Image Map, the script runs a search based on the polygon that the user clicks on. Group A, B, C, D or E is pulled up.

This demo uses only two levels in the mini-website, but in theory a set of image maps could go as deep as required, down 4 and 5 levels. The complexity would be in creating the original image maps to import into FileMaker and then building your case statements to perform the data searches.

Another obvious area to improve would be the look and feedback of the image maps, employing Javascripts to create rollovers and other interface improvements.

Building an Image Map creator within FileMaker is another idea. I could imagine an interface where users imported an image map, then clicked off the points to create the map buttons, using Digital Fusion’s technique of capturing click coordinates. Once the map area had been created, the FileMaker database could generate all the required HTML pages. Sounds like a lot of work, and it might be simpler to keep this in a separate Image Map program, unless you have dozens of these image maps to create.

In conclusion, employing image maps in this manner to create a locally stored mini-website and an infrastructure around it to notify script logic as to the level of the website a user is on, in order to perform searches, takes a bit of work. It isn’t a particularly dynamic, on-the-fly technique. Still for specific interfaces or management dashboard requirements, it might be a useful technique.

Demo File (2011-05-05 – updated to work in Windows. For some reason it was not writing to the Temp Directory properly. I put a conditional in to write to the Documents folder instead.)

If you are really against the idea of writing your web pages out to the Temp Directory, there is another way, suggested by Cory Alder of Davander Mobile. He calls it “HTML Inception,” His idea was to go back to storing all the pages inside FileMaker and generating them on the fly. The first page is fairly straightforward, Six Fried Rice blog has a good article entry on this. The sub-pages are what I couldn’t figure out. Cory suggested to embed the sub-pages within the first page. So where the first area shape was, instead of pointing to a web page (in this case a.html), instead include all the code for the HTML and a Base64 image embedded, using the “data:text/html” capability of the Web Viewer

<area shape="poly" href="data:text/html;charset=utf-8,%3C%21DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhead%3E%0D%0A%3Cbody%3E%3Ch1%3EThis%20is%20a%20demo%20document%3C%2Fh1%3E%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A%0D%0A" coords="63,25,92,25,273,4,333,37,254,135,100,224,32,289,2,99,64,27" alt="">

The basics of this work, but it starts to get a little contorted and the HTML code is not very readable, especially if you add the images encoded as Base64. Still, if you really don’t want your HTML code to ever be written to a file, this might be a way to do it.

Update 2011-05-06 – Following on from these ideas and the Digital Fusion original concept, David Wikstrom of Camel Case Data created this really cool image map maker inside of FileMaker. Check it out.

Related Articles:
Simple Static Map Overlays in FileMaker Pro
Creating Google Cluster Maps from FileMaker
Where Am I? Using FileMaker Go 12 to track your Location