ক্লায়েন্ট-সাইড ওয়েব অ্যাপে আর্থ ইঞ্জিন এপিআই

এই নির্দেশিকাটি আপনাকে দেখাবে কীভাবে আর্থ ইঞ্জিনে তাৎক্ষণিকভাবে গণনা করা ফলাফলসহ একটি ইন্টারেক্টিভ মানচিত্র প্রদর্শনকারী ওয়েব পেজ তৈরি করতে হয়। এটি HTML, CSS, এবং JavaScript-এ প্রাথমিক বা মধ্যম স্তরের জ্ঞানসম্পন্ন ব্যক্তিদের জন্য উপযোগী।

এই নির্দেশিকায় আপনি যে ইন্টারেক্টিভ মানচিত্রটি তৈরি করবেন, তার একটি ডেমো নিচে দেওয়া হলো। এতে আর্থ ইঞ্জিনে গণনা করা গ্র্যান্ড ক্যানিয়নের ভূখণ্ডের ঢাল দেখানো হয়েছে, যা ধূসর রঙের বিভিন্ন শেড দ্বারা উপস্থাপিত। আপনি অতিরিক্ত এলাকার ফলাফল গণনা ও প্রদর্শন করার জন্য মানচিত্রটি প্যান এবং জুম করতে পারেন। মনে রাখবেন, ডেমোটি ব্যবহার করার জন্য আপনাকে অবশ্যই লগইন করতে হবে।

এখানে বর্ণিত পদ্ধতিটি সাধারণত সিঙ্গেল-পেজ অ্যাপ্লিকেশন (SPA) তৈরির ক্ষেত্রে ব্যবহৃত হয়। একটি SPA-তে, সার্ভার থেকে পেজটি পুনরায় লোড না করেই সম্পূর্ণ অ্যাপটি একটি ওয়েব ব্রাউজারে ব্যবহার করা যায়। একারণে, এই অ্যাপগুলোর জন্য কোনো কাস্টম সার্ভার-সাইড কম্পোনেন্টের ডেভেলপমেন্ট এবং হোস্টিংয়ের প্রয়োজন হয় না।

যেহেতু অ্যাপটির কোড ব্যবহারকারীর ওয়েব ব্রাউজারে রান হবে (যা ক্লায়েন্ট-সাইড এক্সিকিউশন নামেও পরিচিত), তাই ডেভেলপারদের সার্ভিস অ্যাকাউন্টের প্রাইভেট কী-এর মতো সংবেদনশীল ক্রেডেনশিয়াল সরাসরি অ্যাপ্লিকেশনে যুক্ত করা উচিত নয়। এর পরিবর্তে, অ্যাপ্লিকেশনটির ব্যবহারকারীদের অবশ্যই তাদের নিজস্ব অ্যাকাউন্ট ব্যবহার করে প্রমাণীকরণ করতে হবে, যা আর্থ ইঞ্জিন অ্যাক্সেসের জন্য রেজিস্টার করা হয়েছে।

এই নির্দেশিকায় আপনি শিখবেন কীভাবে:

  1. একটি বাটন প্রদর্শন করুন, যার মাধ্যমে ব্যবহারকারীরা তাদের আর্থ ইঞ্জিন অ্যাকাউন্ট ব্যবহার করে সাইন ইন করতে পারবেন।
  2. আর্থ ইঞ্জিনে একটি মৌলিক বিশ্লেষণ সংজ্ঞায়িত করুন।
  3. Maps JavaScript API ব্যবহার করে ফলাফল প্রদর্শনের জন্য একটি ইন্টারেক্টিভ মানচিত্র যুক্ত করুন।

পূর্বশর্ত

আপনার ক্লাউড প্রজেক্ট সেট আপ করুন

  1. শুরু করার আগে, "আপনার আর্থ ইঞ্জিন-সক্ষম ক্লাউড প্রজেক্ট সেট আপ করুন" অংশের নির্দেশাবলী অনুসরণ করুন। "OAuth 2.0 সেট আপ করুন" বিভাগে প্রাপ্ত ক্লায়েন্ট আইডিটি লিখে রাখুন। যেহেতু আপনার অ্যাপ্লিকেশনটি ব্যবহারকারীদের তাদের নিজস্ব গুগল অ্যাকাউন্ট দিয়ে সাইন ইন করার অনুমতি দেবে, তাই আপনি "একটি পরিষেবা অ্যাকাউন্ট তৈরি এবং নিবন্ধন করুন" বিভাগটি এড়িয়ে যেতে পারেন।
  2. আপনার প্রোজেক্টের জন্য ম্যাপস জাভাস্ক্রিপ্ট এপিআই সক্রিয় করুন ।

একটি ম্যাপস এপিআই কী পান

আপনার ওয়েব অ্যাপ্লিকেশনে ম্যাপস জাভাস্ক্রিপ্ট এপিআই ব্যবহার করার জন্য কীভাবে একটি এপিআই কী পেতে হয় তা জানতে, ম্যাপস জাভাস্ক্রিপ্ট এপিআই ডকুমেন্টেশনের "এপিআই কী পান" অংশটি দেখুন।

আপনার এপিআই কী ব্যবহার করে যেন শুধুমাত্র অনুমোদিত অনুরোধই করা হয়, তা নিশ্চিত করতে ‘এপিআই কী সীমাবদ্ধ করুন’ বিভাগের নির্দেশাবলীও অনুসরণ করার জন্য দৃঢ়ভাবে সুপারিশ করা হচ্ছে।

আপনার অ্যাপ্লিকেশন তৈরি করুন

ধাপ ১. একটি HTML পৃষ্ঠা তৈরি করুন।

শুরুতে, নিম্নরূপভাবে একটি মৌলিক HTML ওয়েব পেজ সংজ্ঞায়িত করুন:

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map. */
      #map-container {
        height: 400px;
        width: 100%;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <!-- The "Sign in with Google" button, initially hidden. -->
    <input
      id="g-sign-in"
      type="image"
      src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
      onclick="onSignInButtonClick()"
      alt="Sign in with Google"
      hidden
    />

    <!-- Element where map will be added. -->
    <div id="map-container"></div>
    <script>
      // JavaScript code goes here.
    </script>
  </body>
</html>

এই সাধারণ HTML বেশ কয়েকটি কাজ করে:

  • ইনিশিয়ালাইজ করার সময় প্রদর্শিত ম্যাপের আকার ও ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করতে CSS স্টাইল ব্যবহার করা হয়।
  • একটি "গুগল দিয়ে সাইন ইন করুন" বাটন সংজ্ঞায়িত করে, যা ক্লিক করা হলে onSignInButtonClick() ফাংশনটি কল করে। এই ফাংশনটি পরবর্তী বিভাগগুলিতে জাভাস্ক্রিপ্টে সংজ্ঞায়িত করা হবে।
  • একটি খালি এলিমেন্টকে সংজ্ঞায়িত করে, যা একবার ইনিশিয়ালাইজ করা হলে ম্যাপটিকে ধারণ করবে।
  • নিচে সংজ্ঞায়িত জাভাস্ক্রিপ্ট কোড ধারণ করার জন্য একটি খালি <script> ব্লক যোগ করে।

ধাপ ২. জাভাস্ক্রিপ্টে আচরণসমূহ সংজ্ঞায়িত করুন

পরবর্তী ধাপগুলোতে জাভাস্ক্রিপ্ট কোড সরাসরি <script> ট্যাগের ভিতরে রাখা যাবে।

এপিআই এবং ম্যাপ সেট আপ করার জন্য কলব্যাক সংজ্ঞায়িত করুন।

ব্যবহারকারী সাইন ইন করার পর কাজ করার জন্য একটি ফাংশন নির্ধারণ করুন। ব্যবহারকারী প্রমাণীকৃত হলেই কেবল আর্থ ইঞ্জিন এপিআই ইনিশিয়ালাইজ এবং কল করা যাবে। এ বিষয়ে শীঘ্রই আরও জানানো হবে।

এই উদাহরণটি আর্থ ইঞ্জিন এবং ম্যাপস এপিআই ইনিশিয়ালাইজ করে, একটি টাইল সোর্স তৈরি করে যা চাহিদা অনুযায়ী ভূখণ্ডের ঢাল গণনা করে, এবং ম্যাপস জাভাস্ক্রিপ্ট এপিআই দ্বারা প্রদর্শিত একটি ওভারলে হিসাবে টাইল সোর্সটিকে ম্যাপে যুক্ত করে:

// Initializes Maps JavaScript API and Earth Engine API, instructing the map
// to pull tiles from Earth Engine and to overlay them on the map.
function setUpMap() {
  // Hide the sign-in button.
  document.getElementById("g-sign-in").setAttribute("hidden", "true");

  // Initialize the Earth Engine API. Must be called once before using the API.
  ee.initialize(null, null, null, null, null, 'my-project');

  // Get a reference to the placeholder DOM element to contain the map.
  const mapContainerEl = document.getElementById("map-container");

  // Create an interactive map inside the placeholder DOM element.
  const embeddedMap = new google.maps.Map(mapContainerEl, {
    // Pan and zoom initial map viewport to Grand Canyon.
    center: {lng: -112.8598, lat: 36.2841},
    zoom: 9,
  });

  // Obtain reference to digital elevation model and apply algorithm to
  // calculate slope.
  const srtm = ee.Image("CGIAR/SRTM90_V4");
  const slope = ee.Terrain.slope(srtm);

  // Create a new tile source to fetch visible tiles on demand and display them
  // on the map.
  const mapId = slope.getMap({min: 0, max: 60});
  const tileSource = new ee.layers.EarthEngineTileSource(mapId);
  const overlay = new ee.layers.ImageOverlay(tileSource);
  embeddedMap.overlayMapTypes.push(overlay);
}

সাইন-ইন বোতামে ক্লিকের জন্য হ্যান্ডলার নির্ধারণ করুন

এরপরে, সাইন-ইন বোতামে ক্লিক করা হলে সাইন-ইন পপআপ দেখানোর জন্য একটি ফাংশন যোগ করুন। সফল হলে, setUp() মেথডটি কল করা হবে।

// Handles clicks on the sign-in button.
function onSignInButtonClick() {
  // Display popup allowing the user to sign in with their Google account and to
  // grant appropriate permissions to the app.
  ee.data.authenticateViaPopup(setUpMap);
}

এই কলব্যাকটি উপরের HTML-এর বাটনটির onclick অ্যাট্রিবিউটের মাধ্যমে এর সাথে যুক্ত করা হয়েছে। লক্ষ্য করুন যে এই উদাহরণে, পেজটি লোড হওয়ার সময় সাইন-ইন বাটনটি প্রাথমিকভাবে লুকানো থাকে। পরবর্তী অংশে, বাটনটি দেখানোর আগে আমরা যাচাই করব যে ব্যবহারকারী সাইন ইন করেছেন কি না।

প্রধান প্রবেশ বিন্দু সংজ্ঞায়িত করুন

এখন পেজ লোড হওয়ার সাথে সাথে প্রথমে যে টপ-লেভেল কোডটি এক্সিকিউট হবে, তা নির্ধারণ করতে হবে। এটি ব্যবহারকারী আগে থেকেই সাইন ইন করা আছে কিনা তা পরীক্ষা করার জন্য আর্থ ইঞ্জিনের বিল্ট-ইন অথেন্টিকেশন হেল্পার ফাংশন ee.data.authenticateViaPopup() ব্যবহার করে। যদি ব্যবহারকারী সাইন ইন করা থাকে, তাহলে ফাংশনটি উপযুক্ত পারমিশনের জন্য অনুরোধ করে এবং সফল হলে আর্থ ইঞ্জিন ও ম্যাপস এপিআই ইনিশিয়ালাইজ করার জন্য setUp() ফাংশনকে কল করে।

যদি ব্যবহারকারী সাইন ইন করা না থাকেন, তাহলে সাইন-ইন বাটনটি প্রদর্শিত হয়। এরপর ব্যবহারকারী বাটনটিতে ক্লিক করে onSignInButtonClick() ফাংশনটি চালু করতে পারেন, যা পপআপটি দেখায় এবং কার্যক্রম শুরু করার জন্য setUp() কল করে।

// If the user is signed in, display a popup requesting permissions needed to
// run the app, otherwise show the sign-in button.
ee.data.authenticateViaOauth(
  // The OAuth Client ID defined above.
  CLIENT_ID,
  // Callback invoked immediately when user is already signed in.
  setUpMap,
  // Show authentication errors in a popup.
  alert,
  // Request permission to only read and compute Earth Engine data on behalf of
  // user.
  /* extraScopes = */ ['https://www.googleapis.com/auth/earthengine.readonly'],
  // Show sign-in button if reusing existing credentials fails.
  () => document.getElementById("g-sign-in").removeAttribute("hidden"),
  // Don't require ability to write and access Cloud Platform on behalf of the
  // user.
  /* opt_suppressDefaultScopes = */ true
);

নিজেই চেষ্টা করে দেখুন

এই নির্দেশিকায় সম্পূর্ণ সমাধানটি নিচে দেওয়া হলো। নমুনা কোডের উপরের ডান কোণায় তিনটি বাটন রয়েছে। JSFiddle-এ নমুনাটি খোলার জন্য বাম দিকের বাটনটিতে ক্লিক করুন।

পূর্বশর্ত অংশে প্রাপ্ত Maps API key এবং OAuth ক্লায়েন্ট ID দিয়ে YOUR_API_KEY এবং YOUR_CLIENT_ID প্রতিস্থাপন করুন (এগুলো স্বয়ংক্রিয়ভাবে যুক্ত করার জন্য আপনি নিচের কোডে এই প্লেসহোল্ডারগুলোতে ক্লিক করতে পারেন)। এছাড়াও, 'my-project' পরিবর্তে আপনার Google Cloud প্রজেক্ট ID ব্যবহার করুন। 

<!-- Load Maps JavaScript API. For production apps, append you own ?key=YOUR_API_KEY. -->

<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.365/earthengine-api.min.js"></script>

<!-- The "Sign in with Google" button, initially hidden. -->
<input
  id="g-sign-in"
  type="image"
  src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
  onclick="onSignInButtonClick()"
  alt="Sign in with Google"
  hidden
/>

<!-- Element where map will be added. -->
<div id="map-container"></div>
/* Set the size of the div element that contains the map. */
  #map-container {
    height: 400px;
    width: 100%;
    background-color: #eee;
  }
// The OAuth Client ID from the Google Developers Console.
// REMINDER: Be sure to add a valid ID here!
const CLIENT_ID = "";

// Initializes Maps JavaScript API and Earth Engine API, instructing the map
// to pull tiles from Earth Engine and to overlay them on the map.
function setUpMap() {
  // Hide the sign-in button.
  document.getElementById("g-sign-in").setAttribute("hidden", "true");

  // Initialize the Earth Engine API. Must be called once before using the API.
  ee.initialize(null, null, null, null, null, 'my-project');

  // Get a reference to the placeholder DOM element to contain the map.
  const mapContainerEl = document.getElementById("map-container");

  // Create an interactive map inside the placeholder DOM element.
  const embeddedMap = new google.maps.Map(mapContainerEl, {
    // Pan and zoom initial map viewport to Grand Canyon.
    center: {lng: -112.8598, lat: 36.2841},
    zoom: 9,
  });

  // Obtain reference to digital elevation model and apply algorithm to
  // calculate slope.
  const srtm = ee.Image("CGIAR/SRTM90_V4");
  const slope = ee.Terrain.slope(srtm);

  // Create a new tile source to fetch visible tiles on demand and display them
  // on the map.
  const mapId = slope.getMap({min: 0, max: 60});
  const tileSource = new ee.layers.EarthEngineTileSource(mapId);
  const overlay = new ee.layers.ImageOverlay(tileSource);
  embeddedMap.overlayMapTypes.push(overlay);
}

// Handles clicks on the sign-in button.
function onSignInButtonClick() {
  // Display popup allowing the user to sign in with their Google account and to
  // grant appropriate permissions to the app.
  ee.data.authenticateViaPopup(setUpMap);
}

// If the user is signed in, display a popup requesting permissions needed to
// run the app, otherwise show the sign-in button.
ee.data.authenticateViaOauth(
  // The OAuth Client ID defined above.
  CLIENT_ID,
  // Callback invoked immediately when user is already signed in.
  setUpMap,
  // Show authentication errors in a popup.
  alert,
  // Request permission to only read and compute Earth Engine data on behalf of
  // user.
  /* extraScopes = */ ['https://www.googleapis.com/auth/earthengine.readonly'],
  // Show sign-in button if reusing existing credentials fails.
  () => document.getElementById("g-sign-in").removeAttribute("hidden"),
  // Don't require ability to write and access Cloud Platform on behalf of the
  // user.
  /* opt_suppressDefaultScopes = */ true
);
<!DOCTYPE html>
<html>
  <head>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.365/earthengine-api.min.js"></script>
    <style>
      /* Set the size of the div element that contains the map. */
      #map-container {
        height: 400px;
        width: 100%;
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <!-- The "Sign in with Google" button, initially hidden. -->
    <input
      id="g-sign-in"
      type="image"
      src="https://developers.google.com/identity/images/btn_google_signin_light_normal_web.png"
      onclick="onSignInButtonClick()"
      alt="Sign in with Google"
      hidden
    />

    <!-- Element where map will be added. -->
    <div id="map-container"></div>
    <script>
      // The OAuth Client ID from the Google Developers Console.
      const CLIENT_ID = "YOUR_CLIENT_ID";
      
      // Initializes Maps JavaScript API and Earth Engine API, instructing the map
      // to pull tiles from Earth Engine and to overlay them on the map.
      function setUpMap() {
        // Hide the sign-in button.
        document.getElementById("g-sign-in").setAttribute("hidden", "true");
      
        // Initialize the Earth Engine API. Must be called once before using the API.
        ee.initialize(null, null, null, null, null, 'my-project');
      
        // Get a reference to the placeholder DOM element to contain the map.
        const mapContainerEl = document.getElementById("map-container");
      
        // Create an interactive map inside the placeholder DOM element.
        const embeddedMap = new google.maps.Map(mapContainerEl, {
          // Pan and zoom initial map viewport to Grand Canyon.
          center: {lng: -112.8598, lat: 36.2841},
          zoom: 9,
        });
      
        // Obtain reference to digital elevation model and apply algorithm to
        // calculate slope.
        const srtm = ee.Image("CGIAR/SRTM90_V4");
        const slope = ee.Terrain.slope(srtm);
      
        // Create a new tile source to fetch visible tiles on demand and display them
        // on the map.
        const mapId = slope.getMap({min: 0, max: 60});
        const tileSource = new ee.layers.EarthEngineTileSource(mapId);
        const overlay = new ee.layers.ImageOverlay(tileSource);
        embeddedMap.overlayMapTypes.push(overlay);
      }
      
      // Handles clicks on the sign-in button.
      function onSignInButtonClick() {
        // Display popup allowing the user to sign in with their Google account and to
        // grant appropriate permissions to the app.
        ee.data.authenticateViaPopup(setUpMap);
      }
      
      // If the user is signed in, display a popup requesting permissions needed to
      // run the app, otherwise show the sign-in button.
      ee.data.authenticateViaOauth(
        // The OAuth Client ID defined above.
        CLIENT_ID,
        // Callback invoked immediately when user is already signed in.
        setUpMap,
        // Show authentication errors in a popup.
        alert,
        // Request permission to only read and compute Earth Engine data on behalf of
        // user.
        /* extraScopes = */ ['https://www.googleapis.com/auth/earthengine.readonly'],
        // Show sign-in button if reusing existing credentials fails.
        () => document.getElementById("g-sign-in").removeAttribute("hidden"),
        // Don't require ability to write and access Cloud Platform on behalf of the
        // user.
        /* opt_suppressDefaultScopes = */ true
      );
    </script>
  </body>
</html>