Incorporating Earth Engine scripts into my AngularJS project to showcase NDVI data layer on a Google Map

Question

Incorporating Earth Engine scripts into my AngularJS project to showcase NDVI data layer on a Google Map

Is there anyone who has successfully integrated the Earth Engine API into their front-end JavaScript code? I've been attempting to follow the demo on the earth-engine repository to add a layer to a map, but I haven't had any success. It seems like the ee.data.authenticate function is not triggering even though I have passed my client ID to it. Any suggestions on what may be going wrong?

javascript angularjs google-authentication google-earth-engine

Answer 1

Answer №1

To access the features, you will need to verify your identity using the client-side OAuth method outlined in this guide: https://developers.google.com/earth-engine/npm_install. After completing that step, you can utilize Google Maps and Earth Engine APIs as usual:

Here is an example of how to use HTML:

<div id="map" style="width: 600px; height: 400px"></div>

And here is a snippet of JavaScript code:

// Load client library.
const ee = window.ee = require('@google/earthengine');
const CLIENT_ID = 'YOUR_CLIENT_ID';

window.initMap = function () {
  // Initialize client library.
  const initialize = function () {
    ee.initialize(null, null, () => {
      createMap();
    }, (e) => {
      console.error('Initialization error: ' + e);
    });
  };

  // Start authentication process with OAuth pop-up.
  ee.data.authenticateViaOauth(CLIENT_ID, initialize, (e) => {
    console.error('Authentication error: ' + e);
  }, null, () => {
    ee.data.authenticateViaPopup(initialize);
  });
};

function createMap() {
  // Set up map.
  const mapEl = document.querySelector('#map');
  const map = new google.maps.Map(mapEl, {
    center: new google.maps.LatLng(39.8282, -98.5795),
    zoom: 5
  });

  // Load image from EE.
  const image = ee.Image('srtm90_v4');
  image.getMap({ min: 0, max: 1000 }, ({ mapid, token }) => {

    // Create Google Maps overlay.
    const mapType = new google.maps.ImageMapType({
      getTileUrl: ({ x, y }, z) =>
        `https://earthengine.googleapis.com/map/${mapid}/${z}/${x}/${y}?token=${token}`,
      tileSize: new google.maps.Size(256, 256)
    });

    // Add the EE layer to the map.
    map.overlayMapTypes.push(mapType);

  });
}

In a practical scenario, it's advisable to display a "Log in" button before opening the popup to avoid potential blocking by the browser's popup blocker.

Answer 2

To access the features, you will need to verify your identity using the client-side OAuth method outlined in this guide: https://developers.google.com/earth-engine/npm_install. After completing that step, you can utilize Google Maps and Earth Engine APIs as usual:

Here is an example of how to use HTML:

<div id="map" style="width: 600px; height: 400px"></div>

And here is a snippet of JavaScript code:

// Load client library.
const ee = window.ee = require('@google/earthengine');
const CLIENT_ID = 'YOUR_CLIENT_ID';

window.initMap = function () {
  // Initialize client library.
  const initialize = function () {
    ee.initialize(null, null, () => {
      createMap();
    }, (e) => {
      console.error('Initialization error: ' + e);
    });
  };

  // Start authentication process with OAuth pop-up.
  ee.data.authenticateViaOauth(CLIENT_ID, initialize, (e) => {
    console.error('Authentication error: ' + e);
  }, null, () => {
    ee.data.authenticateViaPopup(initialize);
  });
};

function createMap() {
  // Set up map.
  const mapEl = document.querySelector('#map');
  const map = new google.maps.Map(mapEl, {
    center: new google.maps.LatLng(39.8282, -98.5795),
    zoom: 5
  });

  // Load image from EE.
  const image = ee.Image('srtm90_v4');
  image.getMap({ min: 0, max: 1000 }, ({ mapid, token }) => {

    // Create Google Maps overlay.
    const mapType = new google.maps.ImageMapType({
      getTileUrl: ({ x, y }, z) =>
        `https://earthengine.googleapis.com/map/${mapid}/${z}/${x}/${y}?token=${token}`,
      tileSize: new google.maps.Size(256, 256)
    });

    // Add the EE layer to the map.
    map.overlayMapTypes.push(mapType);

  });
}

In a practical scenario, it's advisable to display a "Log in" button before opening the popup to avoid potential blocking by the browser's popup blocker.

Incorporating Earth Engine scripts into my AngularJS project to showcase NDVI data layer on a Google Map

Answer №1

Similar questions

Ways to set a default image for an <img> tag

The craft of masonry is known for its creation of intentional gaps

A guide on how to assign a placeholder as the default value for a date picker

Converting coordinates to pixel-based fixed positioning in CSS

You cannot assign an optional parameter in Express after it has already been declared

Using Pug/Jade, be sure to call a function during each loop iteration

Is it more efficient to use Vue events or Vuex for transmitting data between components?

There seems to be a hitch in the functioning of the JavaScript codes

Execute protractor to open chrome in incognito mode and disable web security for cross-origin resource sharing

Adding additional validations to your Marketo form is a great way to ensure the accuracy

JavaScript: What's the best way to update the URL in the address bar without triggering a page refresh?

Looking to extract a specific field using Angular JS?

Determine the amount of time that can be allocated based on the attributes contained within the object

Working with Angular to add various items to an array based on multiple conditions

Creating a custom date selection component in Angular 2 RC1

Razzle fails to initiate the server

Controlling HTML5 Video Playback with JavaScript: Pausing at Custom Frames

Can someone assist me in retrieving the information stored within an object?

To interact with a specific cell in a table using Protractor, simply click

Issue with preventdefault() function in Internet Explorer 8