This tutorial shows you how to display Pollen API heatmap tiles in a web page using HTML, CSS, and Javascript. Here's the map you'll create using this tutorial:
Get started
These are the steps we'll cover for creating a web page with Pollen API heatmap tiles:
- Get an API key
- Create a web page using HTML
- Configure styles using CSS
- Fetch Pollen API data using JavaScript
To create your web page, you'll need a web browser that supports Javascript. See Browser Support for a full list of supported browsers.
Step 1: Get an API key
This section explains how to authenticate your app to the Pollen API using your own API key.
Follow these steps to get an API key:
Go to the Google Cloud Console.
Create or select a project.
Click Continue to enable the API and any related services.
On the Credentials page, get an API key and set the API key restrictions.
To prevent quota theft and secure your API key, see Using API Keys.
Enable billing. See Usage and Billing for more information.
You are now ready to use your API key.
Step 2: Create a web page using HTML
Here's the code for a basic HTML web page:
<html> <head> <title>Pollen heatmaps around the world</title> <style> /* Configure CSS here. */ </style> </head> <body> <!-- Add JavaScript functions and button containers here. --> </body> </html>
To load a map on your web page, add a script
tag containing the bootstrap
loader for the Pollen API and include your API key:
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer> </script>
Step 3: Configure styles using CSS
Next, use CSS to configure the map's appearance on your web page.
<style> /* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 600px; } #container{ position:absolute; display:inline-block; z-index:10; margin-left:50%; transform:translateX(-50%); bottom:40px; } </style>
You can also use CSS to configure buttons that display different
Pollen API data (TREE
, GRASS
, or WEED
):
<style> button{ width:100px; height:34px; /*top:50px;*/ display:inline-block; position:relative; text-align:center; border:none; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.29); color:#FFF; font-weight:400; border-radius:4px; margin-left:4px; font-family:"Google Sans","Roboto","Arial"; line-height:1em; } #tree{background:#009c1a} #grass{background:#22b600} #weed{background:#26cc00} button:active{background:#999999 !important;} </style>
Use a <div>
element to create containers for buttons and the map:
<div id="container"> <button type="button" id="tree">TREE</button> <button type="button" id="grass">GRASS</button> <button type="button" id="weed">WEED</button> </div> <div id="map"></div>
Step 4: Fetch Pollen API data using JavaScript
Use JavaScript to fetch Pollen API data and display it on an interactive map:
function getNormalizedCoord(coord, zoom) { const y = coord.y; let x = coord.x; // Define the tile range in one direction. The range is dependent on zoom level: // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc. const tileRange = 1 << zoom; // don't repeat across y-axis (vertically) if (y < 0 || y >= tileRange) { return null; } // repeat across x-axis if (x < 0 || x >= tileRange) { x = ((x % tileRange) + tileRange) % tileRange; } return { x: x, y: y }; } let pollen = "TREE_UPI" class PollenMapType { tileSize; alt = null; maxZoom = 16; minZoom = 3; name = null; projection = null; radius = 6378137; constructor(tileSize) { this.tileSize = tileSize; } getTile(coord, zoom, ownerDocument) { const img = ownerDocument.createElement("img"); const mapType = pollen; const normalizedCoord = getNormalizedCoord(coord, zoom); const x = coord.x; const y = coord.y; const key = "YOUR_API_KEY"; img.style.opacity = 0.8; img.src = `https://pollen.googleapis.com/v1/mapTypes/${mapType}/heatmapTiles/${zoom}/${x}/${y}?key=${key}`; return img; } releaseTile(tile) {} }
Finally, use JavaScript to initialize the map and display Pollen API data based on the selected buttons:
function initMap() { const myLatLng = { lat: 40.3769, lng: -80.5417 }; const map = new google.maps.Map(document.getElementById("map"), { mapId: "ffcdd6091fa9fb03", zoom: 0, center: myLatLng, maxZoom: 16, minZoom: 3, restriction: { latLngBounds: {north: 80, south: -80, west: -180, east: 180}, strictBounds: true, }, streetViewControl: false, }); const pollenMapType = new PollenMapType(new google.maps.Size(256, 256)); map.overlayMapTypes.insertAt(0, pollenMapType); document.querySelector("#tree").addEventListener("click", function(){ pollen ="TREE_UPI" map.overlayMapTypes.removeAt(0); const pollenMapType = new PollenMapType(new google.maps.Size(256, 256)); map.overlayMapTypes.insertAt(0, pollenMapType); }) document.querySelector("#grass").addEventListener("click", function(){ pollen ="GRASS_UPI" map.overlayMapTypes.removeAt(0); const pollenMapType = new PollenMapType(new google.maps.Size(256, 256)); map.overlayMapTypes.insertAt(0, pollenMapType); }) document.querySelector("#weed").addEventListener("click", function(){ pollen ="WEED_UPI" map.overlayMapTypes.removeAt(0); const pollenMapType = new PollenMapType(new google.maps.Size(256, 256)); map.overlayMapTypes.insertAt(0, pollenMapType); }) }