FileMaker and Image Maps in a Web Viewer


Software, although continuously improving sometimes loses capabilities that were in older packages or versions. For a long time, I have wished there was a better way to tie an image map to data in FileMaker, something I saw demonstrated a long time ago.

Filevision offered the ability to link graphics and data

wpid1112-media_1304380909538.png

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.

Button driven image interface

wpid1113-media_1304381115767.png

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.

Building a FileMaker interface with a Web Viewer and Image Maps

wpid1114-media_1304381428195.png

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.

Generate a Local set of Image Map Web Pages and Keep Track of when the URL Changes

wpid1115-media_1304407647607.png

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.

Drilling down on the Image Map and Searching for Data

wpid1119-media_1304438525236.png

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 ‘Watcher’ script: OnObjectEnter Script Trigger is tied to the Web Viewer

wpid1120-media_1304438598208.png

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

The script trigger starts a Timer

wpid1121-media_1304438620814.png

The timer is set to delay for a half second and then run a script

wpid1122-media_1304438640285.png

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.

The timer script calls the Action script

wpid1123-media_1304438663029.png

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.

Rage MapDesign created the Image Maps

wpid1124-media_1304439810551.png

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.

Storing the Web Pages

wpid1116-media_1304407713901.png

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.

Generating the Web Pages in the Temp Directory

wpid1117-media_1304407722567.png

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

Busy Work

wpid1118-media_1304407731676.png

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.

Expanding on these Ideas

wpid1125-media_1304440541249.png

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

Extra Credit – ‘HTML Inception” – Embed a Page inside a Page

wpid1126-media_1304463391080.png

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="">

Test result

wpid1127-media_1304463417479.png

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

Advertisements

14 Responses to “FileMaker and Image Maps in a Web Viewer”

  1. Bruce Robertson May 3, 2011 at 9:13 pm

    The timer technique is a great technique and I’ve written about it in the past. However, it is sadly, not a cross platform technique. As far as I know it still doesn’t work in Windows. But it works on the Mac and in FileMaker Go.

    • HomeBase Software May 5, 2011 at 4:51 pm

      Hi Bruce,

      I tested the file in Windows and the OnTimer aspect worked fine. There was a problem with writing to the Temp Directory, so I added a conditional, (If Windows, write to Documents). It is a little messy now, because it drops all those files in your Documents folder, but not being a regular Windows user, I didn’t want to delve into why the Temp Directory thing didn’t work.

      Would love to see your blogging about the OnTimer technique.

  2. Wow, script triggers instead of plug-in… Great idea!

    I assume this might be way to go to implement FileMaker image maps that will work in FileMaker Go…

    Thanks, Doug!

  3. Very nice Douglas! I got inspired too, so I tried to come up with a way of actually creating the image maps inside FileMaker. I don’t blog so there’s only a demo file: http://www.camelcasedata.com/ImageMapCreator.fp7.zip

  4. Really cool stuff. Thanks for sharing.

Trackbacks/Pingbacks

  1. Creating Google Cluster Maps from FileMaker « HomeBase Software - February 17, 2012

    […] talked about mapping with FileMaker before on this blog. In the past, I have attempted to generate maps from FileMaker to […]

  2. Simple Static Map Overlays in FileMaker Pro | HomeBase Software - July 12, 2012

    […] Related Articles: Creating Google Cluster Maps from FileMaker FileMaker and Image Maps in a Web Viewer […]

  3. Where Am I? Using FileMaker Go 12 to track your Location | HomeBase Software - July 12, 2012

    […] Related Articles: Simple Static Map Overlays in FileMaker Pro FileMaker and Image Maps in a Web Viewer […]

  4. Interactive Charts driven by Virtual Javascript files | HomeBase Software - July 13, 2012

    […] Related Articles: Creating Google Cluster Maps from FileMaker FileMaker and Image Maps in a Web Viewer […]

  5. Creating Google Cluster Maps from FileMaker | HomeBase Software - July 13, 2012

    […] Static Map Overlays in FileMaker Pro Where Am I? Using FileMaker Go 12 to track your Location FileMaker and Image Maps in a Web Viewer Share this:EmailTwitterFacebookPrintStumbleUponRedditLinkedInDiggLike this:LikeBe the first to […]

  6. Creating and Storing 2D Bar Codes in FileMaker | HomeBase Software - July 14, 2012

    […] Related Articles: Making FileMaker interact with Google Translate Creating Google Cluster Maps from FileMaker FileMaker and Image Maps in a Web Viewer […]

  7. Processing Indicator in FileMaker 11 | HomeBase Software - July 14, 2012

    […] Articles: FileMaker Progress Indicators using a Web Viewer and Animated GIFs FileMaker and Image Maps in a Web Viewer Creating and Storing 2D […]

  8. Mapping Directions from FileMaker Pro with Google Maps | HomeBase Software - February 3, 2014

    […] FileMaker and Image Maps in a Web Viewer […]

%d bloggers like this: