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 Continueto enable the API and any related services.
-
On the Credentialspage, get an API keyand 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 ); }) }
