Heatmap Tile Overlay

Last updated:Nov 1, 2018

Overview

BreezoMeter generates an air quality heatmap available through an API which provides access to tile image overlays (PNGs).

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 following API request:

https://tiles.breezometer.com/{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 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/{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