A little more than a year ago I wrote how to make a clickable map in FileMaker using a web viewer. The fmp protocol was a little bit limited in the FileMaker desktop version back then, but with the new possibilities in 13v2 it is more useful!
I really like the web viewer and try to use it whenever I get the chance. With the fmp protocol the web viewer can interact with data in FileMaker in an almost seamless manner. Not only with Javascript, like I have written before about hiearchical trees and calenders, but also using SVG where you can have free shaped buttons sending data to FileMaker. SVG (Scalable Vector Format) is an XML based format (read more about the file format on Wikipedia) and drawings can be displayed in all modern browsers as well as in a FileMaker web viewer. As it is XML and it is readable as text, it can be stored in a normal text field in FileMaker and manipulated with the built-in text formulas. One of my favourites is different kind of maps or floor plans where you can click on different regions and show information about it in charts etc., or vice versa.
If you, unlike me, have any drawing skills you can produce SVG images using Illustrator or any other image processing software capable of exporting to SVG. Instead I have found a map of Sweden with different regions on Wikimedia which I will use.
The idea is to click on a Swedish region on the map and show the population (using data from SCB 2009) for the selected region. It might as well be other information, sales figures for stores in their region, or budget for the region, etc.
In the FileMaker database I have 2 tables. I have one table of population figures for each region, there are 25 records with 5 fields (id, name, total, male and female). The second table has only one record with the map in SVG format (I’ve pasted the entire XML file in a plain text field), a global field with the ID number of the selected region, and a calculation field where I have choosen to highlight the selected region with a different color. The calculation field with the map is displayed in a web viewer. In the same layout is also a chart where I display the figures for the selected region in a simple bar graph.
I have added a link for each region in the SVG file. The link uses the fmp protocol to send the ID of the selected region to FileMaker, the link looks like this:
<a xlink:href="fmp://$/SwedishMap.fmp12?script=ShowRegion&m=24">
When the user clicks a region it runs the script ”ShowRegion” with the region id as an argument (the id is 24 in the link above). The script is short and easy, it sets a global field with the script argument which triggers the graph and updates the web viewer as the next step.
I have also added a small marker in the SVG file for each region, I replace the marker with a colour to highlight the selected region with a Substitute calculation. The resulting field is displayed in a web viewer with the following calculation:
"data:text/html, " & Sverigekarta::KartaSVG
You can download the sample file here: SwedishMap.fmp12. It should work on both Mac, Windows and iOS. Please note: For Mac and Windows it requires 13.0v2 or above.