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 seguendo questo tutorial:
Inizia
Questi sono i passaggi che tratteremo per creare una pagina web con riquadri di mappa termica dell'API Pollen:
- Ottenere 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, avrai bisogno di un browser web che supporti JavaScript. Consulta la pagina Supporto dei browser per un elenco completo dei browser supportati.
Passaggio 1: ottieni una chiave API
Questa sezione spiega come autenticare la tua app all'API Pollen utilizzando la tua chiave API.
Per ottenere una chiave API:
Vai alla console Google Cloud.
Crea o seleziona un progetto.
Fai clic su Continua per abilitare l'API ed eventuali servizi correlati.
Nella pagina Credenziali, ottieni una chiave API e imposta le relative limitazioni.
Per evitare il furto di quota e proteggere la tua chiave API, consulta Utilizzo delle chiavi API.
Abilitare la fatturazione. Per ulteriori informazioni, consulta Utilizzo e fatturazione.
Ora è tutto pronto per utilizzare la chiave API.
Passaggio 2: crea una pagina web utilizzando HTML
Di seguito è riportato 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 nella tua pagina web, aggiungi un tag script contenente il bootstrap
loader 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
Successivamente, utilizza CSS per configurare l'aspetto della mappa sulla 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 visualizzano diversi
dati 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 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
Usa 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);
})
}