En este instructivo, se explica cómo mostrar mosaicos de mapas de calor de la API de Pollen en una página web con HTML, CSS y JavaScript. Este es el mapa que crearás con este instructivo:
Comenzar
Estos son los pasos que abordaremos para crear una página web con mosaicos de mapas de calor de la API de Pollen:
- Obtén una clave de API.
- Cómo crear una página web con HTML
- Cómo configurar estilos con CSS
- Recupera datos de la API de Pollen con JavaScript
Para crear tu página web, necesitarás un navegador web que admita JavaScript. Consulta Compatibilidad con navegadores para obtener una lista completa de los navegadores compatibles.
Paso 1: Obtén una clave de API
En esta sección, se explica cómo autenticar tu app en la API de Pollen con tu propia clave de API.
Sigue estos pasos para obtener una clave de API:
Ve a la consola de Google Cloud.
Crea o selecciona un proyecto.
Haz clic en Continuar para habilitar la API y los servicios relacionados.
En la página Credenciales, obtén una clave de API y configura sus restricciones.
Para evitar el robo de cuota y proteger tu clave de API, consulta Cómo usar claves de API.
Habilitar la facturación Consulta Uso y facturación para obtener más información.
Ya puedes usar tu clave de API.
Paso 2: Crea una página web con HTML
Este es el código para una página web HTML básica:
<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 cargar un mapa en tu página web, agrega una etiqueta script que contenga el cargador de arranque de la API de Pollen y agrega tu clave de API:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
Paso 3: Configura estilos con CSS
A continuación, utiliza CSS para configurar la apariencia del mapa en tu página 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>
También puedes usar CSS para configurar botones que muestren diferentes datos de la API de 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>
Usa un elemento <div> para crear contenedores de botones y el 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>
Paso 4: Recupera los datos de la API de Pollen con JavaScript
Usa JavaScript para recuperar datos de la API de Pollen y mostrarlos en un mapa interactivo:
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 último, usa JavaScript para inicializar el mapa y mostrar los datos de la API de Pollen en función de los botones seleccionados:
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);
})
}