Apple Maps Integration with the Claris FileMaker Platform

Every few years I like to generate a map of Databuzz customers to get visual sense of where they are located around the world. It’s been while since I last did this and blogged about it – the most recent one was in 2018 when I generated a map of our fmAccounting Link (Xero Edition) customers after Xero had passed the 1 million subscriber mark (they now have 3.945 million subscribers and are on track to break the 4 million subscriber mark in 2024).

Databuzz has released a number of new FileMaker integration products since 2018 and I was curious to see how many countries our customers were located in now. Back in 2017 fmSMS was our most popular product and our last map showed we had customers in Australia, Asia, Africa, the Middle East, North America and Europe.

Previously I’ve used the Google Maps API to geocode the customer addresses and create a map with multiple markers showing their location. This process is all automated using FileMaker scripts so it usually only takes a few minutes.

Over the past couple of years I’ve worked on a number of Apple Maps integrations using Apple’s MapKit JS and was also lucky enough to be invited to do a presentation on Apple Maps Integration at the recent EngageU European Claris FileMaker conference in Antwerp, Belgium. The video of my presentation has just become available on YouTube.

I’ve been wanting to write an article on integrating Apple Maps and MapKit JS with the FileMaker Platform so I decided to switch to using Apple Maps for this exercise.

Comparing Google Maps and MapKit JS

It’s hard to do a like-for-like comparison of the Google Maps API and MapKit JS as their billing models and included usage are different. Like the Google Maps API Apple’s MapKit JS allows you to geocode addresses, which is the process of converting an address into the latitude and longitude coordinates required for generating the markers for the map. To get started with MapKit JS you’ll need an Apple Developer Program membership (99 USD per membership year or your local equivalent). This allows you to generate 250,000 map views and 25,000 service calls (used for geocoding) per day which is usually enough for most FileMaker integrations. Both APIs use JavaScript as the programming language so knowledge of HTML, CSS and JavaScript certainly helps.

Here’s a slide from my EngageU presentation comparing MapKit JS and Google Maps at a high level:

Google Maps does require a credit card to be stored in your billing account but your usage might remain in the free monthly tier so you won’t incur any billable charges. MapKit JS requires a paid Apple Developer Program membership regardless of how many maps your generate each year.

I’m not going to go into the steps to generate the credentials required to start generating maps using MapKit JS – these are covered on the Apple Developer website here – but they include:

• create a Maps ID
• create a Maps Private Key
• generate a JWT (JSON Web Token) – make a note of the expiry date
• generate an access token required for geocoding

The JWT and access token can all be generated using native FileMaker script steps and functions so you can be up and running in a matter of minutes. You can then use the FileMaker Web Viewer to start generating maps using MapKit JS – here’s some examples:

Single Address

This shows a single address at the centre of the map without any markers and uses the Coordinate Span parameter to indicate the desired zoom level of the map:

Single Address With Marker

Like Google Maps MapKit JS can show markers at the location of the geocode – the default is a red balloon with a white pin icon inside the balloon. This shows a map of a single address with the red marker and a Title below the marker that was passed in as a parameter from a FileMaker field:

The colour of the marker can also be changed by passing in a parameter – here’s the same map with a purple marker:

You can also change the default white pin icon to another graphic using unicode characters. Here’s a map of Bondi Beach with a yellow colour marker and a surfer icon generated from the 1F3C4 unicode characters:

Single Address With Marker and Callout

In addition to displaying a marker with a title and customising the appearance of the marker you can also add a callout to the marker which acts like a FileMaker Pro popover when you click on the marker:

In the example shown above I’m showing a callout that displays data from the record that has been clicked on so you can dynamically control the content of the callout. We’ve also built integrations where the callout contains links – for example a company’s website or a link back to the FileMaker record to view more details etc.

Multiple Addresses/Markers

As well as mapping single addresses you can map multiple addresses/geocodes. After importing my customer addresses and running a FileMaker script to geocode them using the MapKit API I created a map with a marker for each customer:

We now have customers in 38 unique countries and most of the states in the USA! Here’s the same customer map showing a white balloon with the country flag:

Directions Between 2 Locations

In addition to mapping a single address or a found set of addresses you can also use MapKit JS to generate directions between 2 locations. Here’s a map showing the walking route between 2 addresses:

If you would like to discuss integrating Apple Maps using MapKit JS with your FileMaker solution please get in touch to arrange a free consultation and discuss your requirements.