En este instructivo, se muestra cómo mostrar segmentos de mapa de calor de la API de Pollen en una página web con HTML, CSS y JavaScript. A continuación, se muestra el mapa que crearás con este instructivo:
Comenzar
Para crear una página web con mosaicos de mapa de calor de la API de Pollen, tendrás que seguir estos pasos:
- Obtén una clave de API.
- Crea 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 las claves de API.
Habilita la facturación. Consulta Uso y facturación para obtener más información.
Ahora 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 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 los estilos con CSS
A continuación, usa 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 para los 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 datos de la API de Pollen con JavaScript
Usa JavaScript para recuperar los 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 según 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); }) }