Custom map plotting using FileMaker web viewers and javascript

Plotting Filemaker data on to maps can solve various problems and will make your data easier to interpret. FileMaker offers various ways to put your data, either through Tableau, Google Map API, other mapping APIs and using URL Schemes.

In this demo we show an example of using the Google Maps API embedded into a FileMaker Web Viewer to allow us to display the locations of fire stations on a map. We use FileMaker’s GPS location functions to determine the location of the user who is in an apparatus and then let the user filter the plotted stations to isolate one that is nearby and has the services they need while on the road.

We then use a “URL Scheme” for Apple Maps to run a script in FileMaker that passes the address to the Apple Maps app and plots it automatically in directions mode. Thus, allowing FileMaker Go to send GPS directions directly to the Maps app.

We ‘localized’ the javascript, API Code and javascript function and reference each within the HTML5 calc we use in the web viewer. The only reason the database needs to be connected to the web is for locations services and the Google Map API, not any of the FileMaker Programming.

Also, in this demo we show a modified version of the Cluster Map file from Home Base Software (http://hbase.net) where our client asked us to modify the demo and show “Total Sales” for each ‘cluster’ on the map. We were also asked to show the ‘Amount’ value on each pin pop up and allow users to drill down into the map.

We used a FMP URL to run a script each time the user drills down into the map that grabs the record ids of all the records in view and sets them to a global field on the layout.

This global field is then used as the Primary Key field in a multi-key relationship back to the table containing the data. This way we can use a ‘Go To Related Record’ to navigate back to a found set of the records shown on screen at any time. We can also use this relationship to aggregate the data in the records shown on screen.

We ‘localized’ the javascript, API Code and javascript function and reference each within the HTML calc we use in the web viewer.