Heatmap Tile Overlay

Last updated: Mar 27, 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, pollen current conditions 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

Last updated: Mar 27, 2019

Current Conditions

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.

Example

TIP

Make sure to place BreezoMeter's API key in the variable apiKey

<!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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.5.0/leaflet-providers.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
        var errorMessage = "Update the variable 'apiKey' with a BreezoMeter API key to see the tiles. Contact BreezoMeter if you need any help:    breezometer.com/contact-us"

        // Map
        var map = L.map('map', {
            center: [46.227638, 2.213749],
            zoom: 6,
            minZoom: 3,
        });

        L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Overlay BreezoMeter Layer
        L.tileLayer('https://tiles.breezometer.com/v1/air-quality/breezometer-aqi/current-conditions/{z}/{x}/{y}.png?key=' + (apiKey === '' ? alert(errorMessage) : apiKey), {
            tms: false,
            opacity: 0.65,
            maxNativeZoom: 8
        }).addTo(map);
    </script>
</body>
</html>

Pollen

Last updated: Sep 25, 2019

Daily Forecast

For the daily forecast pollen heatmap, we support three main pollen types: tree, grass and weed. For each of the pollen types, you will get the heatmap for today pollen conditions. To get each pollen type heatmap use the following endpoint: https://tiles.breezometer.com/v1/pollen/{POLLEN_TYPE}/forecast/daily/

For example, to get today's tree pollen forecast heatmap, concatenate the following API request: https://tiles.breezometer.com/v1/pollen/tree/forecast/daily/{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 BreezoMeter's API key in the variable apiKey

<!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 Pollen Forecast 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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.5.0/leaflet-providers.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 = '1e4e48bf6489d111b97543c80232d3944defe0f2'; // Your BreezoMeter API key
        var errorMessage = "Update the variable 'apiKey' with a BreezoMeter API key to see the tiles. Contact BreezoMeter if you need any help:    breezometer.com/contact-us"

        // Map
        var map = L.map('map', {
            center: [35.889050079360935,-99.1845703125],
            zoom: 5,
            minZoom: 3,
        });

        L.tileLayer('https://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // Overlay BreezoMeter Layer
        L.tileLayer('https://tiles.breezometer.com/v1/pollen/tree/forecast/daily/{z}/{x}/{y}.png?key=' + (apiKey === '' ? alert(errorMessage) : 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