इस ट्यूटोरियल में बताया गया है कि एचटीएमएल, सीएसएस, और JavaScript का इस्तेमाल करके, Pollan API हीटमैप टाइल दिखाने का तरीका क्या है. यह रहा मैप जिसे इस ट्यूटोरियल का इस्तेमाल करके बनाया जाएगा:
शुरू करें
पोलन एपीआई हीटमैप टाइल की मदद से वेब पेज बनाने के लिए, हम इस तरीके का इस्तेमाल करेंगे:
- एपीआई पासकोड पाएं
- एचटीएमएल का इस्तेमाल करके वेब पेज बनाना
- सीएसएस का इस्तेमाल करके स्टाइल कॉन्फ़िगर करना
- JavaScript का इस्तेमाल करके पराग एपीआई का डेटा पाना
अपना वेब पेज बनाने के लिए, आपको एक ऐसा वेब ब्राउज़र चाहिए जो JavaScript के साथ काम करता हो. इसके साथ काम करने वाले ब्राउज़र की पूरी सूची देखने के लिए, ब्राउज़र सहायता देखें.
पहला चरण: एपीआई पासकोड पाना
इस सेक्शन में, एपीआई पासकोड का इस्तेमाल करके, Polen API की पुष्टि करने का तरीका बताया गया है.
API कुंजी प्राप्त करने के लिए इन चरणों का पालन करें:
Google Cloud Console पर जाएं.
कोई प्रोजेक्ट बनाएं या चुनें.
एपीआई और उससे जुड़ी किसी भी सेवा को चालू करने के लिए, जारी रखें पर क्लिक करें.
क्रेडेंशियल पेज पर, एपीआई पासकोड पाएं और एपीआई पासकोड की पाबंदियां सेट करें.
कोटा चोरी होने से बचाने और अपनी एपीआई कुंजी को सुरक्षित करने के लिए, एपीआई कुंजी का इस्तेमाल करना लेख देखें.
बिलिंग चालू करें. ज़्यादा जानकारी के लिए, इस्तेमाल और बिलिंग देखें.
अब आप एपीआई पासकोड का इस्तेमाल करने के लिए तैयार हैं.
दूसरा चरण: एचटीएमएल का इस्तेमाल करके वेब पेज बनाना
बेसिक एचटीएमएल वेब पेज का कोड यहां दिया गया है:
<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>
अपने वेब पेज पर मैप लोड करने के लिए, ऐसा script टैग जोड़ें जिसमें पोलन एपीआई के लिए बूटस्ट्रैप लोडर शामिल हो. साथ ही, एपीआई पासकोड शामिल करें:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>
तीसरा चरण: सीएसएस का इस्तेमाल करके स्टाइल कॉन्फ़िगर करना
इसके बाद, अपने वेब पेज पर मैप का दिखना कॉन्फ़िगर करने के लिए सीएसएस का इस्तेमाल करें.
<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>
सीएसएस का इस्तेमाल करके, अलग-अलग
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>
चौथा चरण: JavaScript का इस्तेमाल करके पराग एपीआई का डेटा फ़ेच करना
पराग एपीआई डेटा को फ़ेच करने के लिए JavaScript का इस्तेमाल करें और उसे इंटरैक्टिव मैप पर दिखाएं:
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) {}
}
आखिर में, चुने गए बटन के आधार पर मैप शुरू करने और Pollan API डेटा दिखाने के लिए JavaScript का इस्तेमाल करें:
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);
})
}