Tutorial ini menunjukkan cara menampilkan kartu peta panas Pollen API di halaman web menggunakan HTML, CSS, dan JavaScript. Berikut adalah peta yang akan Anda buat menggunakan tutorial ini:
Mulai
Berikut adalah langkah-langkah yang akan kita bahas untuk membuat halaman web dengan petak peta panas Pollen API:
- Mendapatkan kunci API
- Membuat halaman web menggunakan HTML
- Mengonfigurasi gaya menggunakan CSS
- Mengambil data Pollen API menggunakan JavaScript
Untuk membuat halaman web, Anda memerlukan browser web yang mendukung JavaScript. Lihat Dukungan Browser untuk melihat daftar lengkap browser yang didukung.
Langkah 1: Dapatkan kunci API
Bagian ini menjelaskan cara mengautentikasi aplikasi ke Pollen API menggunakan kunci API Anda sendiri.
Ikuti langkah-langkah ini untuk mendapatkan kunci API:
Buka Konsol Google Cloud.
Buat atau pilih sebuah project.
Klik Continue untuk mengaktifkan API dan layanan terkait.
Pada halaman Credentials, dapatkan API key dan tetapkan pembatasan kunci API.
Untuk mencegah pencurian kuota dan mengamankan kunci API Anda, lihat Menggunakan Kunci API.
Aktifkan penagihan. Lihat Penggunaan dan Penagihan untuk informasi selengkapnya.
Sekarang Anda siap menggunakan kunci API.
Langkah 2: Buat halaman web menggunakan HTML
Berikut adalah kode untuk halaman web HTML dasar:
<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>
Untuk memuat peta di halaman web, tambahkan tag script yang berisi loader bootstrap untuk Pollen API dan sertakan kunci API Anda:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
Langkah 3: Konfigurasi gaya menggunakan CSS
Selanjutnya, gunakan CSS untuk mengonfigurasi tampilan peta di halaman web Anda.
<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>
Anda juga dapat menggunakan CSS untuk mengonfigurasi tombol yang menampilkan data
Pollen API yang berbeda (TREE, GRASS, atau 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>
Gunakan elemen <div> untuk membuat penampung untuk tombol dan peta:
<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>
Langkah 4: Mengambil data Pollen API menggunakan JavaScript
Gunakan JavaScript untuk mengambil data Pollen API dan menampilkannya di peta interaktif:
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) {}
}
Terakhir, gunakan JavaScript untuk menginisialisasi peta dan menampilkan data Pollen API berdasarkan tombol yang dipilih:
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);
})
}