Heatmap Tile Overlay

Last updated: Feb 11, 2019

Overview

BreezoMeter generates air quality and pollen heatmaps, available through an API, that provide access to tile image overlays (PNGs). BreezoMeter currently offers three types of heatmaps: current conditions air quality, current conditions pollen and pollen forecast. Each map can be requested using its own endpoint.

A tile overlay is a collection of image tiles that are displayed on top of a base map (such as Google Maps). Every image tile (256 x 256 pixels) is placed to the southeast side of an x/y location and scales according to the zoom level.

The BreezoMeter Air Quality Heatmap Tile Overlay API supports tile map services with the Mercator Projection such as:

  • Open Street Maps
  • Here Maps
  • Google Maps
  • Leaflet
  • ESRI ArcGIS Maps (for JavaScript)
Heatmap layers of france Map of france

The tile overlay is a grid assembled from a collection of tiles, each assigned (X,Y) coordinates. The tile with coordinates (0,0) is always at the northwest corner of the map. The X values increase from west to east, while the Y values increase from north to south.

For example:

World Map Tile Table

How to use

  1. Generate an API key from BreezoMeter’s developers dashboard
  2. Contact us to enable the heatmap feature
  3. Concatenate the API request using the appropriate endpoint

Air Quality

For the current conditions air quality heatmap use the following endpoint: https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/

For example, to get current conditions air quality heatmap, concatenate the following API request: https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/{z}/{x}/{y}.png?key={YOUR_API_KEY}

Required parameters

  • Z- Zoom level
  • X- X coordinate
  • Y- Y coordinate

TIP

A tile image opacity of 65% is recommended for map overlay.

Pollen

For the current conditions pollen heatmap, we support three main pollen types: tree, grass and weed. To get each pollen type heatmap use the following endpoint: https://tiles.breezometer.com/v1/pollen/{POLLEN_TYPE}/current-conditions/

For example, to get the tree pollen heatmap for current conditions, concatenate the following API request: https://tiles.breezometer.com/v1/pollen/tree/current-conditions/{z}/{x}/{y}.png?key={YOUR_API_KEY}

For all supported pollen types, please go to the Metadata Fields section on the Pollen API page

Required parameters

  • Z- Zoom level
  • X- X coordinate
  • Y- Y coordinate

TIP

A tile image opacity of 65% is recommended for map overlay.

Example

TIP

Make sure to place the Google Maps API key as well as the BreezoMeter's API key.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
    <title>BreezoMeter Tiles</title>
    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    <!-- GoogleMutant -->
    <!-- Make sure to place your google maps API key in order to load the tiles  -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
    <script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>

    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; z-index: 1; }
    </style>

</head>
<body>

<div id="map"></div>

<script>
    var apiKey = ''; // Your BreezoMeter API key
    // Google Maps
    var googleMapsTiles = L.gridLayer.googleMutant({ type: 'roadmap' });
    // Map
    var map = L.map('map', {
        center: [ 0, 0 ],
        zoom: 1,
        layers: [ googleMapsTiles ]
    });
    // Overlay BreezoMeter Layer
    var breezometerTiles = L.tileLayer('https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/{z}/{x}/{y}.png?key=' + apiKey, {
        tms: false,
        opacity: 0.65,
        maxNativeZoom: 8
    }).addTo(map);

</script>

</body>
</html>

Integrate BreezoMeter's data in your products today

Get API Key
Talk to an expert