You’ve read our Mapping and More post. You know what Geographic Information Systems are. You’re starting to understand why you need GIS in FileMaker… now let’s get to the how. In this post we’re going to cover the basics of creating maps in your FileMaker solutions from built-in, no code required options to interactive Leaflet maps that require just a bit of HTML, CSS, & JS.
If you’re new to web programming and these acronyms make your cringe, don’t fear, we’re providing a demo file with the code you need to get started. The demo file is actually set up as a sandbox where you can effortlessly experiment with creating maps and other webviewer technologies in FileMaker… more in bit. For now, let’s dive in assuming you have a database that stores mailing address information in some way, shape, or form and want an interactive map.
You need a map in FileMaker, where do you start?
If you’ve ever added a webviewer to a solution you know that the setup dialog holds your hand through building a number of different Web Addresses including Google Maps and MapQuest. You simply choose fields (or enter static text) for each required parameter and FileMaker calculates the proper url.
Both Google Maps and Mapquest do offer APIs that allow developers to make maps with more control over how they look. The problem with this approach is that you need to be a developer, hire one, buy a third party tool, or spend a lot of time learning these APIs and the technologies needed to interact with them. Furthermore you need to comply with their terms of service and unless your needs are very simple, low volume, and very public, you’ll likely need pay for services. Read more on this topic:
It is worth noting that there are some FileMaker specific products that make working with the Google Maps API easier. If you desire the look of a Google Map, can afford to use the Google API and comply with their terms of service than one of these products might be right for you:
- ProMaps by Seedcode – A commercial product that allows adding of customizable, multi-pin, Google Maps to your FileMaker Pro layouts
- FMEasyMaps by Tim Dietrich – An open source solution for generating interactive maps based on addresses in FileMaker databases.
Let’s get to the Demo Already!
fmFiddle is completely unlocked and the first thing you may want to do is enter layout mode so you can see how the webviewer’s “Web Address” is set up. What you’ll find is that instead of constructing a URL it builds all the source code needed for a complete web page that renders locally without a server. The HTML you see is a basic skeleton of webpage with the code you’ll enter interested in the most commonly used sections. The List() function is used simply as clean way to handle line endings (i.e. & “¶” &).
The demo is loaded with 4 examples. They are:
- Getting Started with HTML: This “fiddle” provides an overview of the most commonly used tags in HTML. If you’re new to HTML, this is a great reference.
- alert() is a method that displays an alert dialog with a specified message and an OK button not unlike FileMaker’s Show Custom Dialog.
- onclick=”window.location = ‘fmp://$/fmFiddle?script=WebTriggeredScript¶m=Next'”
- Leaflet Map Quickstart Example: If you’re new to Leaflet, definitely walk through this quickstart tutorial, the working example they use is provided in this fiddle with 2 additions:
Now that you’re building interactive maps in FileMaker it would be good time to catch up on our Anatomy of a Web Map blog series which fills in all the gritty details of webmaps and discusses your options for GIS and WordPress too! As promised you can also soon expect more techniques and demos in the next posts in the series including geocoding, spatial queries, advanced maps, and more. Sign-up at luminfire.com/our-solutions/gis-spatial-mapping if you wish to be notified when these posts are published. We welcome your comments and questions and as always, if you need help building GIS into your custom app, don’t hesitate to contact us.