Questo tutorial mostra come visualizzare i riquadri della mappa termica dell'API Pollen in una pagina web utilizzando HTML, CSS e JavaScript. Ecco la mappa che creerai utilizzando questo tutorial:
Inizia
Di seguito sono riportati i passaggi che tratteremo per creare una pagina web con i riquadri della mappa di calore dell'API Pollen:
- Recuperare una chiave API
- Creare una pagina web utilizzando HTML
- Configurare gli stili utilizzando CSS
- Recuperare i dati dell'API Pollen utilizzando JavaScript
Per creare la tua pagina web, devi disporre di un browser web che supporti JavaScript. Consulta Supporto dei browser per un elenco completo dei browser supportati.
Passaggio 1: ottieni una chiave API
Questa sezione spiega come autenticare la tua app nell'API Pollen utilizzando la tua chiave API.
Per ottenere una chiave API, segui questi passaggi:
Vai alla console Google Cloud.
Crea o seleziona un progetto.
Fai clic su Continua per abilitare l'API e tutti i servizi correlati.
Nella pagina Credenziali, ottieni una chiave API e imposta le limitazioni della chiave API.
Per impedire il furto di quota e proteggere la tua chiave API, consulta la sezione Utilizzo delle chiavi API.
Abilita la fatturazione. Per ulteriori informazioni, consulta Utilizzo e fatturazione.
Ora puoi utilizzare la chiave API.
Passaggio 2: crea una pagina web utilizzando HTML
Ecco il codice per una pagina web HTML di 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>Per caricare una mappa sulla tua pagina web, aggiungi un tag script contenente il caricatore bootstrap per l'API Pollen e includi la tua chiave API:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>Passaggio 3: configura gli stili utilizzando CSS
Poi utilizza CSS per configurare l'aspetto della mappa nella tua pagina 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>Puoi anche utilizzare CSS per configurare pulsanti che mostrano dati diversi dell'API Pollen (TREE, GRASS o 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>Utilizza un elemento <div> per creare contenitori per i pulsanti e la mappa:
<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>Passaggio 4: recupera i dati dell'API Pollen utilizzando JavaScript
Utilizza JavaScript per recuperare i dati dell'API Pollen e visualizzarli su una mappa interattiva:
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) {} }
Infine, utilizza JavaScript per inizializzare la mappa e visualizzare i dati dell'API Pollen in base ai pulsanti selezionati:
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); }) }