Hands On

The Secret Lives of APIs — Book Four: Map Image & Heat Maps

By Richard Süselbeck | 18 February 2020

One of the things I like to do is highlight neat API features you may not yet know about. In this blog post, we'll once again be taking a closer look at the Map Image API. This API lives in the shadows of its bigger brothers, the interactive maps found in our Mobile and Web SDKs. However, it's both a powerful and lightweight API, which can be really useful in contexts where interactive maps don't make sense or simply cannot be used. Think of putting personalized maps into your customers’ emails or visualizing a response in an Alexa skill card!

Like many of our APIs, the Map Image API also hides a few neat features you may not be aware of, so I've decided to write a series of short blog posts to bring these hidden features to light. Today we're going to look at how to display heat maps using the Map Image API. Let’s have a look at an example map.



This maps shows both a circular heat area and a triangular heat area over Manhattan. It is generated using the following API call:

&a0=40.73735, -73.99262
&a1=40.73735, -73.99262
&a2=40.73735, -73.99262

Let’s look at the various parameters in detail.

  • apiKey: This key is part of your application credentials. If you don’t have a set of credentials yet, go ahead and sign up for our Freemium account here on the portal.
  • h/w: As you would probably guess, these are the dimensions (height/weight) of the image in pixels.
  • f: This represents the image format. In this case, we’ve chosen PNG, though other formats like JPG (1) or SVG (5) are also available.

Of course, none of these parameters are new to you if you’ve ever used to Map Image API before. It’s the rest of them that generate the heat maps which are of special interest to us.

  • ax: These parameters define the heat areas. You can either use a single location with a latitude,longitude pair (see a0) or a polygon with a series of latitude,longitude pairs (see a3).
  • radx: When using a single location you can indicate the size of the heat map around it by defining a radius with this parameter.
  • lx: This allows you to select the color of each area you’ve created. If you don’t like the default colors, you can define your own using the plt parameter.
  • op: This allows you to define the opacity of the heat areas from 0-100.

As you’ll note this feature doesn’t really generate heat maps on the fly from data points, but merely simulates the look of a heat map. In essence you are drawing fuzzy areas on the map and then stacking them on top of each other. It's not the most sophisticated system, but it allows you to create some neat visualizations with a single API call!

Check out the documentation for more details and feel free to play with some other parameters like noblur (guess what it does!) and sb (which allows your do add scale bars).

See you soon, when we will uncover more API secrets!