क्लाइंट-साइड वेब ऐप्लिकेशन में Earth Engine API

इस गाइड में, वेब पेज बनाने का तरीका बताया गया है. इसमें Earth Engine में तुरंत कंप्यूट किए गए नतीजों को दिखाने के लिए, इंटरैक्टिव मैप का इस्तेमाल किया जाता है. यह गाइड, एचटीएमएल, सीएसएस, और JavaScript की बुनियादी या इंटरमीडिएट जानकारी रखने वाले लोगों के लिए है.

यहां, इस गाइड में बनाए जाने वाले इंटरैक्टिव मैप का डेमो दिया गया है. इसमें Earth Engine में कंप्यूट किए गए ग्रैंड कैन्यन के इलाके की ढलान दिखाई गई है. इसे अलग-अलग शेड वाले ग्रे रंग से दिखाया गया है. अन्य इलाकों के नतीजे कंप्यूट करने और दिखाने के लिए, मैप को पैन और ज़ूम किया जा सकता है. ध्यान दें कि डेमो देखने के लिए, आपको लॉग इन करना होगा.

यहां बताया गया तरीका आम तौर पर, सिंगल-पेज ऐप्लिकेशन (एसपीए) बनाते समय इस्तेमाल किया जाता है. एसपीए में, पूरे ऐप्लिकेशन का इस्तेमाल वेब ब्राउज़र में किया जा सकता है. इसके लिए, पेज को सर्वर से फिर से लोड करने की ज़रूरत नहीं होती. इसलिए, इन ऐप्लिकेशन के लिए, कस्टम सर्वर-साइड कॉम्पोनेंट को डेवलप और होस्ट करने की ज़रूरत नहीं होती.

ऐप्लिकेशन का कोड, उपयोगकर्ता के वेब ब्राउज़र में चलेगा. इसे क्लाइंट-साइड एक्ज़ीक्यूशन भी कहा जाता है. इसलिए, डेवलपर को सेवा खाते की निजी कुंजियों जैसे संवेदनशील क्रेडेंशियल को सीधे तौर पर ऐप्लिकेशन में एम्बेड नहीं करना चाहिए. इसके बजाय, ऐप्लिकेशन के उपयोगकर्ताओं को अपने खातों का इस्तेमाल करके पुष्टि करनी होगी. इन खातों को Earth Engine के ऐक्सेस के लिए रजिस्टर किया गया है.

इस गाइड में, आपको ये काम करने का तरीका बताया जाएगा:

  1. ऐसा बटन दिखाना जिससे उपयोगकर्ता अपने Earth Engine खाते का इस्तेमाल करके साइन इन कर सकें.
  2. Earth Engine में बुनियादी विश्लेषण तय करना.
  3. Maps JavaScript API का इस्तेमाल करके, नतीजे दिखाने के लिए इंटरैक्टिव मैप एम्बेड करना.

ज़रूरी शर्तें

अपना Cloud प्रोजेक्ट सेट अप करना

  1. शुरू करने से पहले, Earth Engine की सुविधा वाले Cloud प्रोजेक्ट को सेट अप करना में दिए गए निर्देशों का पालन करें. "OAuth 2.0 सेट अप करना" सेक्शन में मिले क्लाइंट आईडी को नोट करें. आपके ऐप्लिकेशन से उपयोगकर्ताओं को अपने Google खाते से साइन इन करने की अनुमति मिलेगी. इसलिए, "सेवा खाता बनाना और रजिस्टर करना" सेक्शन को छोड़ा जा सकता है.
  2. अपने प्रोजेक्ट के लिए, Maps JavaScript API चालू करें.

Maps API पासकोड पाना

अपनी वेब ऐप्लिकेशन में Maps JavaScript API का इस्तेमाल करने की अनुमति देने वाला एपीआई पासकोड पाने का तरीका जानने के लिए, Maps JavaScript API के दस्तावेज़ में एपीआई पासकोड पाना लेख देखें.

हमारा सुझाव है कि एपीआई पासकोड को सीमित करना सेक्शन में दिए गए निर्देशों का भी पालन करें, ताकि यह पक्का किया जा सके कि आपके एपीआई पासकोड से सिर्फ़ अनुमति वाले अनुरोध किए जाएं.

अपना ऐप्लिकेशन बनाना

पहला चरण. एचटीएमएल पेज बनाना

शुरू करने के लिए, बुनियादी एचटीएमएल वेब पेज को इस तरह तय करें:

<!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>

इस बुनियादी एचटीएमएल से ये काम किए जाते हैं:

  • शुरू करते समय दिखाए जाने वाले मैप का साइज़ और बैकग्राउंड का रंग तय करने के लिए, सीएसएस स्टाइल का इस्तेमाल करना.
  • "Google से साइन इन करें" बटन तय करना. इस बटन पर क्लिक करने पर, onSignInButtonClick() फ़ंक्शन कॉल होता है. इस फ़ंक्शन को अगले सेक्शन में JavaScript में तय किया जाएगा.
  • खाली एलिमेंट तय करना. शुरू होने के बाद, इसमें मैप दिखेगा.
  • नीचे तय किए गए JavaScript कोड को रखने के लिए, खाली <script> ब्लॉक जोड़ना.

दूसरा चरण. JavaScript में व्यवहार तय करना

इसके बाद के चरणों में, JavaScript कोड को सीधे <script> टैग के अंदर रखा जा सकता है.

एपीआई और मैप सेट अप करने के लिए कॉलबैक तय करना

उपयोगकर्ता के साइन इन करने के बाद, काम करने के लिए कोई फ़ंक्शन तय करें. Earth Engine API को सिर्फ़ तब शुरू और कॉल किया जा सकता है, जब उपयोगकर्ता की पुष्टि हो गई हो. इसके बारे में जल्द ही ज़्यादा जानकारी दी जाएगी.

इस उदाहरण में, Earth Engine और Maps API शुरू किए गए हैं. साथ ही, एक टाइल सोर्स बनाया गया है. यह टाइल सोर्स, मांग पर इलाके की ढलान कंप्यूट करता है. इसके अलावा, टाइल सोर्स को मैप में एक ओवरले के तौर पर जोड़ा गया है. इसे Maps JavaScript API दिखाता है:

// 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);
}

इस कॉलबैक को ऊपर दिए गए एचटीएमएल में मौजूद बटन से, उसके onclick एट्रिब्यूट के ज़रिए जोड़ा जाता है. ध्यान दें कि इस उदाहरण में, पेज लोड होने पर साइन-इन बटन शुरू में छिपा होता है. अगले सेक्शन में, हम बटन दिखाने से पहले यह देखेंगे कि उपयोगकर्ता ने साइन इन किया है या नहीं.

मुख्य एंट्री पॉइंट तय करना

अब टॉप-लेवल का कोड तय करें, जो पेज लोड होने पर सबसे पहले एक्ज़ीक्यूट होगा. यह कोड, Earth Engine के बिल्ट-इन पुष्टि करने वाले हेल्पर फ़ंक्शन ee.data.authenticateViaPopup() का इस्तेमाल करके, यह देखता है कि उपयोगकर्ता ने पहले से साइन इन किया है या नहीं. अगर उपयोगकर्ता ने साइन इन किया है, तो फ़ंक्शन, ज़रूरी अनुमतियों का अनुरोध करता है. साथ ही, अगर यह अनुरोध पूरा होता है, तो Earth Engine और Maps API को शुरू करने के लिए 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 में खोलने के लिए, सबसे बाईं ओर मौजूद बटन पर क्लिक करें.

YOUR_API_KEY और YOUR_CLIENT_ID को, ज़रूरी शर्तें में मिले Maps API पासकोड और OAuth क्लाइंट आईडी से बदलें. इसके लिए, नीचे दिए गए कोड में इन प्लेसहोल्डर पर क्लिक करें, ताकि ये अपने-आप जुड़ जाएं. साथ ही, 'my-project' को अपने Google Cloud प्रोजेक्ट आईडी से बदलें.

<!-- 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>