Ce tutoriel explique comment afficher les tuiles de carte de densité de l'API Pollen sur une page Web à l'aide de code HTML, CSS et JavaScript. Voici la carte que vous allez créer à l'aide de ce tutoriel:
Commencer
Voici les étapes que nous allons suivre pour créer une page Web avec des tuiles de carte de densité de l'API Pollen:
- Obtenir une clé API
- Créer une page Web au format HTML
- Configurer des styles à l'aide de CSS
- Récupérer les données de l'API Pollen à l'aide de JavaScript
Pour créer votre page Web, vous avez besoin d'un navigateur Web compatible avec JavaScript. Consultez la page Navigateurs compatibles pour obtenir la liste complète des navigateurs compatibles.
Étape 1 : Obtenez une clé API
Cette section explique comment authentifier votre application auprès de l'API Pollen à l'aide de votre propre clé API.
Pour obtenir une clé API, procédez comme suit :
Accédez à la console Google Cloud.
Créez ou sélectionnez un projet.
Cliquez sur Continuer pour activer l'API et les services connexes.
Sur la page Identifiants, obtenez une clé API et définissez les restrictions associées.
Pour éviter le vol de quotas et sécuriser votre clé API, consultez Utiliser des clés API.
Activez la facturation. Pour en savoir plus, consultez la page Utilisation et facturation.
Vous pouvez maintenant utiliser votre clé API.
Étape 2: Créez une page Web au format HTML
Voici le code d'une page Web HTML de base :
<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>
Pour charger une carte sur votre page Web, ajoutez une balise script contenant le chargeur d'amorçage pour l'API Pollen et incluez votre clé API:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
Étape 3: Configurez les styles à l'aide de CSS
Utilisez ensuite le code CSS pour configurer l'apparence de la carte sur votre page Web.
<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>
Vous pouvez également utiliser CSS pour configurer des boutons qui affichent différentes données de l'API Pollen (TREE, GRASS ou 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>
Utilisez un élément <div> afin de créer des conteneurs pour les boutons et la carte:
<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>
Étape 4: Extrayez les données de l'API Pollen à l'aide de JavaScript
Utilisez JavaScript pour récupérer les données de l'API Pollen et les afficher sur une carte interactive:
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) {}
}
Enfin, utilisez JavaScript pour initialiser la carte et afficher les données de l'API Pollen en fonction des boutons sélectionnés:
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);
})
}