Neste tutorial, mostramos como exibir os blocos de mapa de calor da API Pollen em uma página da Web usando HTML, CSS e JavaScript. Veja o mapa que você criará usando este tutorial:
Começar
Estas são as etapas que abordaremos para criar uma página da Web com blocos de mapa de calor da API Pollen:
- Gerar uma chave de API
- Criar uma página da Web usando HTML
- Configurar estilos usando CSS
- Buscar dados da API Pollen usando JavaScript
Para criar sua página da Web, você precisa de um navegador compatível com JavaScript. Consulte Compatibilidade de navegadores para ver uma lista completa de navegadores compatíveis.
Etapa 1: gerar uma chave de API
Nesta seção, explicamos como autenticar o app na API Pollen usando sua própria chave de API.
Siga estas etapas para gerar uma chave:
Acesse o console do Google Cloud.
Crie ou selecione um projeto.
Clique em Continuar para ativar a API e os serviços relacionados.
Na página Credenciais, gere uma chave de API e defina as restrições dela.
Para evitar roubo de cota e proteger sua chave de API, consulte Como usar chaves de API.
Ative o faturamento. Consulte Utilização e faturamento para mais informações.
Agora você já pode usar sua chave de API.
Etapa 2: criar uma página da Web usando HTML
Este é o código de uma página HTML básica da Web:
<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>
Para carregar um mapa na sua página da Web, adicione uma tag script com o carregador bootstrap da API Pollen e inclua sua chave de API:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
Etapa 3: configurar estilos usando CSS
Em seguida, use CSS para configurar a aparência do mapa na sua página da 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>
Também é possível usar CSS para configurar botões que exibem diferentes
dados da 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>
Use um elemento <div> para criar contêineres para botões e o mapa:
<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>
Etapa 4: buscar os dados da API Pollen usando JavaScript
Use o JavaScript para buscar dados da API Pollen e mostrá-los em um mapa interativo:
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) {}
}
Por fim, use o JavaScript para inicializar o mapa e mostrar os dados da API Pollen com base nos botões selecionados:
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);
})
}