This entry is part 2 of 5 in the series Anatomy of a Web Map

What does a Mapping Framework do?

If you think of web maps as cars, as we discuss in Anatomy of a Web Map (the first of this 6 part series), a Mapping Framework is the engine. It is a JavaScript library that loads when your web page does. It manages the display of your map data, handles user interactions with that data (e.g. clicking, scrolling, zooming, etc.) and provides ways for your own custom code to interact with the map and data.

Modern Mapping Frameworks are finely tuned to use web browser capabilities efficiently and to handle different browsers and devices. Your map should work as expected on Internet Explorer and Chrome, on your laptop and on your smartphone.

So which mapping framework should you choose? It depends on what features you need and how much you want to customize your map. Most users will be well served by choosing either Leaflet or Google Maps APIs.

Do I Even Need A Mapping Framework?

Let’s take a step back for a moment. If you need something set up quickly, don’t have much custom data, and are OK with the default map themes you may be able to simply use an embedded map like the Bing one to the left. Google, Bing and MapQuest all offer options to embed a map.

If you’re already using WordPress and your mapping needs are simple, you could consider one of the many available mapping plugins such as WP Google Maps or WP Google Maps Plugin.

Either of these choices (embedding or using a plugin) will meet only basic of mapping needs. If your use case fits within what they offer, then I encourage you to use them. When your mapping needs get more complex you will need to switch to using an actual mapping framework.

Google Maps API vs Leaflet

Both the Google Maps APIs and Leaflet are good, reliable, mapping frameworks and have a lot of overlap in what they can do. Choosing between the two will require consideration of several factors.

Framework Capabilities

A Plugin Architecture
A Plugin Architecture

Leaflet was designed from the outset to be lightweight and fast. Many features are intentionally excluded from the core code, and are available as plugins.

It’s similar to customizing a car direct from the manufacturer: you decide which features you want to include, and you get exactly what you ask for.

Building your own car (or framework) might require more input up front, but you get a customized product that exactly suits your needs.

An All In One Architecture
An All In One Architecture

The Google Maps API, on the other hand, bundles everything up into a single package. This can be convenient since you don’t have to decide which plugins to load; you know exactly what is available on any Google Map.

Choosing a pre-built framework (or car) might mean that you have features available that you’re not planning on using. Even if you’re not using them now, it can be reassuring to know that they’re available if you ever do want to use them.

A Partial List of Features

Since both frameworks are written in JavaScript you can probably accomplish anything you can in one framework in the other, it just may require varying amount of custom code and/or plugins. Below is a partial list of features that many users may be interested in. More plugins are available for Leaflet on the official site, and plugins for both frameworks can be found online on other un-official sites.

Feature Leaflet Google Maps API
Panning/Zooming Built In Built in
Mobile Support Built In Built in
Alternative Basemaps BYOBM (Bring your own base maps) or use a plugin. Built in
Display vector layers Built In Built In
GeoJSON Layers Built In Built In
Display raster images as layers Built In Built In
WMS Layers Built In With Custom Code
Point Clustering With plugin With plugin
Geocoding Several plugins available Built in
Routing Several plugins available Built in
Street View Can use Google Street View (standard Google Map API rules apply) Built in
Mini-map With plugin With Custom Code
Load data from CSV With plugin With Custom Code
Enable Editing With plugin With Custom Code

Licensing Differences

Open Source vs. Closed Source

Google Maps APIThe Google Maps API is created and maintained by Google. All updates, improvements and rules regarding its use come from Google. The current free tier allows up to 25,000 map loads and up to 2,500 geocoding requests per day. All free tier implementations must be publicly available — intranet usage and maps behind a paywall require a premium plan.

These requirements would include use inside a FileMaker database. If you want to use Google Maps API inside of FileMaker, you should have a premium plan, or consider an alternative framework.

Leaflet.js

Leaflet is an Open Source project, like WordPress, and there are fewer restrictions on its use. You can use it behind a paywall or on an intranet, use it for unlimited map views (though your basemap provider may have its own limitations), remove or customize the branding and more.

Releases and Upgrades

A Google Maps API Map
A Leaflet Map

Since Google controls the Google Maps API, they determine the release schedule and when new features are added. They also determine when older versions of the code will be retired. For the most part this is a good thing. It means that most websites will be using the same version of the API, and that developers using the Google Maps API will be familiar with exactly what options are available.

With Leaflet, upgrades are more frequent and incremental, new releases are made as new features are available. The plugin updates are also independent from the map updates, so additional improvements may come through those channels too. Or, if you’ve got a Leaflet map you’re happy with, you can copy the map code to your own server and keep using an older version for as long as you want — you aren’t forced to upgrade.

Support Options

Help Needed Let’s face it, the first place you’re going to check for support for either framework is Google. However, if Google searches fail, then what support options are available?

If you’re using the free tier of Google Maps, then you could check out their community support site. If you are a paid plan Google Maps API user, you will have other support options available to you, including a hotline you can call.

For Leaflet, there is active community support on StackExchange, StackOverflow and on GitHub, where the project code is hosted.

In either case, you can also find a reliable GIS and web development company like Cimbura.com to develop a new map for you or to enhance your existing map.

Personal Preferences

Both the Google Maps API and Leaflet are good web mapping frameworks. For most websites either one will produce a fine, usable map. In other words, in most cases it will come down to personal preferences.

If you are already using other Google Services, it may make sense to choose the Google Maps API over Leaflet. If your GIS or web developers prefer the Google Maps API, or if you really like the Google basemaps, those would all be good reasons.

All other factors being equal, I personally prefer using Leaflet. I find the documentation and API to be easier to understand, and I find the maps to be more responsive. The wide variety of available plugins makes it easy to add functionality, and it’s easy to build custom plugins when necessary. That being said, I do like the Google Maps API and think it’s the right choice for the job in many cases.

Other Alternatives

We believe in using the right tool for the job. Leaflet or the Google Maps API will work well for most use cases, but there are situations that call for other tools.

If your organization is already heavily invested in the Esri ArcGIS environment and need to integrate with ArcGIS Geoprocessing, then the ArcGIS API for JavaScript is an obvious candidate. It is created to facilitate web to ArcGIS server interaction and makes such tasks straightforward.

OpenLayers 3 (OL3)
OpenLayers 3 (OL3)

If you’d like to consider even more options, OpenLayers 3 is a very good Open Source web mapping library. Like Google Maps, it comes with most features built in.

Lastly, if your maps are more design and user interaction oriented you might want to consider using D3, a JavaScript animation library that can also do some types of mapping.

If you need help choosing a mapping framework, or need assistance determining how a map can serve your customers, contact Cimbura.com and let us help put you on the map!

Series Navigation<< Anatomy of a Web MapThe Basics of Basemaps >>

Tim Cimbura – CEO and Software Engineer

Tim is an expert in creating custom business solutions that make businesses more effective, productive, and profitable. He specializes in rapid application development with the Claris platform including FileMaker and WordPress. He also knows Apple macOS technology inside and out.