Fetch a satellite image using the Google Earth Engine API in an Angular project

Step 1: Set up an Angular project

Create a new Angular project using the Angular CLI by running the command ng new satellite-app. Navigate to the project directory using cd satellite-app.

Step 2: Install necessary dependencies

Install the required dependencies using npm. Run the following command to install the @google/earthengine library:

npm install @google/earthengine

Step 3: Configure Google Earth Engine API credentials

After signing up for a Google Earth Engine account, obtain the API key. Add the API key to your Angular project's environment file (src/environments/environment.ts):

export const environment = {
  production: false,
  earthEngineApiKey: 'YOUR_EARTH_ENGINE_API_KEY',
};

Step 4: Create a Google Earth Engine service

Create a new service file named google-earth-engine.service.ts in the src/app directory. Add the following code to configure and interact with the Google Earth Engine API:

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

declare const google: any;

@Injectable({
  providedIn: 'root',
})
export class GoogleEarthEngineService {
  private apiInitialized = false;

  initializeAPI(): Promise<void> {
    return new Promise<void>((resolve, reject) => {
      if (!this.apiInitialized) {
        google.load('earth', '1', {
          other_params: `key=${environment.earthEngineApiKey}`,
          callback: () => {
            this.apiInitialized = true;
            resolve();
          },
        });
      } else {
        reject('API already initialized');
      }
    });
  }

  fetchSatelliteImage(latitude: number, longitude: number, startDate: string, endDate: string): Promise<any> {
    return new Promise<any>((resolve, reject) => {
      if (this.apiInitialized) {
        const ee = google.earth.enterprise;
        const request = new ee.data.ImageRequest();
        request.setBands(['B4', 'B3', 'B2']); // Example: RGB bands for true color image
        request.setLatLongRegion({ lat: latitude, lon: longitude, latDelta: 0.1, lonDelta: 0.1 }); // Example: Region around a specific point
        request.setDateRange(startDate, endDate); // Example: Date range for the image
        request.send((image: any) => {
          if (image) {
            resolve(image);
          } else {
            reject('Failed to fetch satellite image');
          }
        });
      } else {
        reject('API not initialized');
      }
    });
  }
}

Step 5: Use the Google Earth Engine service in a component

Create a new Angular component by running ng generate component satellite-component. In the satellite-component.component.ts file, inject the GoogleEarthEngineService and utilize its methods:

import { Component, OnInit } from '@angular/core';
import { GoogleEarthEngineService } from '../google-earth-engine.service';

@Component({
  selector: 'app-satellite-component',
  templateUrl: './satellite-component.component.html',
  styleUrls: ['./satellite-component.component.css'],
})
export class SatelliteComponentComponent implements OnInit {
  constructor(private earthEngineService: GoogleEarthEngineService) {}

  ngOnInit(): void {
    this.earthEngineService.initializeAPI().then(() => {
      const latitude = 37.7749; // Example: San Francisco latitude
      const longitude = -122.4194; // Example: San Francisco longitude
      const startDate = '2022-01-01'; // Example: Start date for satellite image
      const endDate = '2022-01-31'; // Example: End date for satellite image

      this.earthEngineService
        .fetchSatelliteImage(latitude, longitude, startDate, endDate)
        .then((image: any) => {
          // Process and use the fetched satellite image data here
          console.log('Satellite image fetched:', image);
        })
        .catch((error: any) => {
          console.error('Error fetching satellite image:', error);
        });
    })
    .catch((error: any) => {
      console.error('Error initializing Google Earth Engine API:', error);
    });
  }
}

Step 6: Use the component in your Angular application

In the app.component.html file, add the following code to use the SatelliteComponentComponent:

<app-satellite-component></app-satellite-component>

Step 7: Run the Angular application

Run the Angular application using ng serve and navigate to http://localhost:4200 in your web browser. You should see the console output with the fetched satellite image data.

Remember to replace the latitude, longitude, start date, and end date values in the example with your desired parameters.

This example demonstrates how to fetch a satellite image using the Google Earth Engine API in an Angular project.

In Part 2 of this article, we will look into how we can further extend the functionality by capturing screenshots, uploading images to Google Drive, and performing other tasks based on your requirements.

Thank You For Reading.