Bu eğiticide, HTML, CSS ve JavaScript kullanarak bir web sayfasında Pollen API ısı haritası döşemelerinin nasıl görüntüleneceği gösterilmektedir. Bu eğitimde oluşturacağınız harita:
Başlayın
Pollen API ısı haritası döşemeleri içeren bir web sayfası oluşturmak için ele alacağımız adımlar şunlardır:
- API anahtarı alma
- HTML kullanarak web sayfası oluşturma
- CSS kullanarak stilleri yapılandırma
- JavaScript kullanarak polen API verilerini getirme
Web sayfanızı oluşturmak için JavaScript'i destekleyen bir web tarayıcısına ihtiyacınız vardır. Desteklenen tarayıcıların tam listesi için Tarayıcı Desteği başlıklı makaleye bakın.
1. adım: API anahtarı alın
Bu bölümde, kendi API anahtarınızı kullanarak uygulamanızın Pollen API'de nasıl kimlik doğrulayacağı açıklanmaktadır.
API anahtarı almak için aşağıdaki 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 API anahtarı alın ve API anahtarı kısıtlamalarını ayarlayın.
Kota hırsızlığını önlemek ve API anahtarınızın güvenliğini sağlamak için API Anahtarlarını Kullanma başlıklı makaleyi inceleyin.
Faturalandırmayı etkinleştirin. Daha fazla bilgi için Kullanım ve Faturalandırma başlıklı makaleyi inceleyin.
Artık API anahtarınızı kullanmaya hazırsınız.
2. adım: HTML kullanarak bir web sayfası oluşturun
Temel bir HTML web sayfasının kodu aşağıda 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 bir harita yüklemek için Pollen API'nin bootstrap yükleyicisini içeren bir script etiketi ekleyin 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: CSS kullanarak stilleri yapılandırın
Ardından, CSS 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>Farklı polen API verilerini (TREE, GRASS veya WEED) gösteren düğmeleri yapılandırmak için de CSS'yi kullanabilirsiniz:
<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 <div> öğesini 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 getirin
Pollen API verilerini getirmek ve bunları etkileşimli bir haritada göstermek 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'i 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); }) }