2014

May

02

Av Rolf

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.

SwedishMap

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.

Kommentarer

2014-05-03 Norman

The graph wasn't working when I tried the file. Looked into it and needed to set set 'Always use file's settings' in File > File options > Text.

It then worked fine. I expect the delimiters were being interpreted wrongly.

2014-05-05 Rolf

Thanks for your comment! I have updated the sample file.

2014-06-24 Joel Shapiro

Thanks for this great example, Rolf.
FYI: I linked to this post on my blog:
http://blog.jsfmp.com/post/88307579211/responsive-web-viewer-layouts-fmp-url-javascript-demo

2014-06-26 Matt Bowlby

Great post! I love it. Hoving trouble getting it to work on WebDirect with FM13. I imagine it has something to do with the link:
fmp:// is going to open the link in the FM client. How do I correct this? What's the link for WebDirect? Would I have to have two separate XML files - one linking for FM client and one linking for the web?

2014-06-27 Rolf

It will not work in WebDirect, the fmp protocol is for FileMaker Pro/Advanced only.

2014-12-01 David Weaver

Thanks for this example. I have tried to apply the example to my own data, and can get everything working apart from the highlight of the currently selected polygon. Can you provide me with some advice please. FM 13.0.4 OSX.

2014-12-01 Rolf

You need to change the fill colour for a region, I use a Substitute calculation to insert a "fill" attribute for the selected region.

2014-12-05 David Weaver

Thankyou - finally got it to work

2015-12-16 Michael Ashley

Nice! Thanks for sharing this!

2016-07-19 FileMaker DevCon 2016 Update - FileMakerProGurus

[…] There are a lot of good-looking and useful Javascript libraries. The good thing is they can be integrated into a web viewer in FileMaker. It is even possible to interact with the web viewer, display more information or navigate to a certain FileMaker record using the fmp protocol. A couple of years ago (times goes by..) I wrote about an interactive map of Sweden. […]

2016-07-22 David Blitz

I have succeeded in converting an open-source SVG world map into Filemaker format, and have used the fmp protocol you describe - it works well. But I cannot figure out how to get this to work on Server, rather than just on client, as I would like to use this in a course that students could access via the web. Can you help - efforts to use http:// instead of fmp:// have not worked.

2016-09-25 Using JavaScript for a Timeline with FileMaker Web Viewer | FileMaker Connect

[…] There are a lot of good-looking and useful Javascript libraries. The good thing is they can be integrated into a web viewer in FileMaker. It is even possible to interact with the web viewer, display more information or navigate to a certain FileMaker record using the fmp protocol. A couple of years ago (times goes by..) I wrote about an interactive map of Sweden. […]

Skriv en kommentar

Din epost-adress stannar hos oss.