이 튜토리얼에서는 HTML, CSS, JavaScript를 사용하여 웹페이지에 Pollen API 히트맵 타일을 표시하는 방법을 설명합니다. 이 튜토리얼을 사용하여 다음과 같은 지도를 만듭니다.
사용해 보기
다음은 Pollen API 히트맵 타일로 웹페이지를 만들기 위해 다루는 단계입니다.
웹페이지를 만들려면 JavaScript를 지원하는 웹브라우저가 필요합니다. 지원되는 브라우저의 전체 목록은 브라우저 지원을 참고하세요.
1단계: API 키 가져오기
이 섹션에서는 자체 API 키를 사용하여 Pollen API에 앱을 인증하는 방법을 설명합니다.
다음 단계에 따라 API 키를 가져옵니다.
Google Cloud 콘솔로 이동합니다.
프로젝트를 만들거나 선택합니다.
계속을 클릭하여 API와 모든 관련 서비스를 사용 설정합니다.
사용자 인증 정보 페이지에서 API 키를 가져오고 API 키 제한사항을 설정합니다.
할당량 도난을 방지하고 API 키를 보호하려면 API 키 사용을 참고하세요.
결제를 사용 설정합니다. 자세한 내용은 사용량 및 결제를 참고하세요.
이제 API 키를 사용할 준비가 되었습니다.
2단계: HTML을 사용하여 웹페이지 만들기
다음은 기본 HTML 웹페이지를 만들기 위한 코드입니다.
<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>
웹페이지에 지도를 로드하려면 Pollen API의 부트스트랩 로더가 포함된
script 태그를 추가하고 API 키를 포함합니다.
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
3단계: CSS를 사용하여 스타일 구성
그런 다음 CSS를 사용하여 웹페이지에서 지도의 모양을 구성합니다.
<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를 사용하여 다양한 Pollen API 데이터 (TREE, GRASS 또는 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>
<div> 요소를 사용하여 버튼과 지도의 컨테이너를 만듭니다.
<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단계: JavaScript를 사용하여 Pollen API 데이터 가져오기
JavaScript를 사용하여 Pollen API 데이터를 가져와 대화형 지도에 표시합니다.
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) {}
}
마지막으로, JavaScript를 사용하여 지도를 초기화하고 선택한 버튼을 기반으로 Pollen API 데이터를 표시합니다.
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);
})
}