Bu eğitimde; HTML, CSS ve JavaScript kullanarak bir web sayfasında Pollen API ısı haritası parçalarını nasıl görüntüleyeceğiniz gösterilmektedir. Bu eğiticiyi kullanarak oluşturacağınız haritayı burada bulabilirsiniz:
Başlayın
Pollen API ısı haritası parçalarıyla web sayfası oluşturmak için şu adımları ele alacağız:
- API anahtarı alma
- HTML kullanarak web sayfası oluşturma
- CSS kullanarak stilleri yapılandırma
- JavaScript kullanarak Pollen API verilerini getirme
Web sayfanızı oluşturmak için JavaScript'i destekleyen bir web tarayıcısı gerekir. Desteklenen tarayıcıların tam listesi için Tarayıcı Desteği'ne bakın.
1. Adım: API anahtarı alın
Bu bölümde, kendi API anahtarınızı kullanarak Pollen API'de uygulamanızın kimliğini nasıl doğrulayacağınız açıklanmaktadır.
API anahtarı almak için şu adımları uygulayın:
Google Cloud Console'a gidin.
Proje oluşturun veya seçin.
API'yi ve ilgili hizmetleri etkinleştirmek için Devam'ı tıklayın.
Kimlik bilgileri sayfasında bir API anahtarı alın ve API anahtarı kısıtlamalarını ayarlayın.
Kota hırsızlığını önlemek ve API anahtarınızı korumak için API Anahtarlarını Kullanma bölümüne bakın.
Faturalandırmayı etkinleştir. Daha fazla bilgi için Kullanım ve Faturalandırma bölümüne bakın.
Artık API anahtarınızı kullanmaya hazırsınız.
2. Adım: HTML kullanarak bir web sayfası oluşturun
Aşağıda, temel bir HTML web sayfasının kodu verilmiştir:
<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>
Web sayfanıza harita yüklemek için Pollen API'ye yönelik önyükleme yükleyicisini içeren bir script etiketi ve API anahtarınızı dahil edin:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
3. Adım: Stilleri CSS kullanarak yapılandırın
Ardından, CSS'yi kullanarak haritanın web sayfanızdaki görünümünü yapılandırın.
<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>
CSS'yi kullanarak farklı Pollen API verileri (TREE, GRASS veya WEED) gösteren düğmeleri yapılandırabilirsiniz:
<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>
Düğmeler ve harita için kapsayıcılar oluşturmak üzere bir <div> öğesi kullanın:
<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>
4. Adım: JavaScript kullanarak Pollen API verilerini alın
Pollen API verilerini getirmek ve etkileşimli bir haritada görüntülemek için JavaScript'i kullanın:
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) {}
}
Son olarak, haritayı başlatmak ve seçilen düğmelere göre Pollen API verilerini görüntülemek için JavaScript kullanın:
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);
})
}