এই টিউটোরিয়ালটি আপনাকে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার করে কোনও ওয়েব পৃষ্ঠায় পরাগ এপিআই হিটম্যাপ টাইলগুলি প্রদর্শন করতে দেখায়। এই টিউটোরিয়ালটি ব্যবহার করে আপনি যে মানচিত্রটি তৈরি করবেন তা এখানে:
শুরু করুন
পরাগ এপিআই হিটম্যাপ টাইলস সহ একটি ওয়েব পৃষ্ঠা তৈরি করার জন্য আমরা এই পদক্ষেপগুলি কভার করব:
- একটি API কী পান
- এইচটিএমএল ব্যবহার করে একটি ওয়েব পৃষ্ঠা তৈরি করুন
- সিএসএস ব্যবহার করে স্টাইলগুলি কনফিগার করুন
- জাভাস্ক্রিপ্ট ব্যবহার করে পরাগ এপিআই ডেটা আনুন
আপনার ওয়েব পৃষ্ঠা তৈরি করতে, আপনার একটি ওয়েব ব্রাউজার প্রয়োজন যা জাভাস্ক্রিপ্ট সমর্থন করে। See Browser Support for a full list of supported browsers.
পদক্ষেপ 1: একটি এপিআই কী পান
This section explains how to authenticate your app to the Pollen API using your own API key.
একটি এপিআই কী পেতে এই পদক্ষেপগুলি অনুসরণ করুন:
গুগল ক্লাউড কনসোলে যান।
একটি প্রকল্প তৈরি করুন বা নির্বাচন করুন।
Click Continue to enable the API and any related services.
On the Credentials page, get an API key and set the API key restrictions.
To prevent quota theft and secure your API key, see Using API Keys .
বিলিং সক্ষম করুন। See Usage and Billing for more information.
আপনি এখন আপনার এপিআই কী ব্যবহার করতে প্রস্তুত।
পদক্ষেপ 2: এইচটিএমএল ব্যবহার করে একটি ওয়েব পৃষ্ঠা তৈরি করুন
Here's the code for a basic HTML web page:
<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> To load a map on your web page, add a script tag containing the bootstrap loader for the Pollen API and include your API key:
<script
src="https://maps.googleapis.com/maps/api/js?callback=initMap&v=weekly&key=YOUR_API_KEY&language=en" defer>
</script>পদক্ষেপ 3: সিএসএস ব্যবহার করে স্টাইলগুলি কনফিগার করুন
এরপর, আপনার ওয়েব পৃষ্ঠায় মানচিত্রের উপস্থিতি কনফিগার করতে 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> আপনি বিভিন্ন পরাগ API ডেটা প্রদর্শন করে এমন বোতামগুলি কনফিগার করতে CSS ব্যবহার করতে পারেন ( 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> Use a <div> element to create containers for buttons and the map:
<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: জাভাস্ক্রিপ্ট ব্যবহার করে পরাগ এপিআই ডেটা আনুন
পরাগ এপিআই ডেটা আনতে জাভাস্ক্রিপ্ট ব্যবহার করুন এবং এটি একটি ইন্টারেক্টিভ মানচিত্রে প্রদর্শন করুন:
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) {} }
Finally, use JavaScript to initialize the map and display Pollen API data based on the selected buttons:
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); }) }