This guide shows you how to build a web page with an interactive map display
results computed on the fly in Earth Engine. It is suited to people with
beginner or intermediate knowledge of HTML, CSS, and JavaScript.
Below is a demo of the interactive map you'll create in this guide. It shows
the terrain slope of the Grand Canyon computed in Earth Engine, represented by
varying shades of grey. You can pan and zoom the map to compute and display
results for additional areas. Note that you must login to the demo.
The approach described here is typically used when creating
*single-page applications (SPAs)*. In an SPA, the entire app is usable in a web
browser without the page being reloaded from the server. As such, these apps
don't require the development and hosting of a custom server-side component.
Since the app's code will be run in the user's web browser (also known as
*client-side* execution), developers shouldn't embed sensitive credentials such
as service account private keys directly in the application. Instead, users of
the application must authenticate using their own accounts which have been
registered for Earth Engine access.
In this guide, you'll learn how to:
1. Display a button allowing users to sign in using their Earth Engine account.
2. Define a basic analysis in Earth Engine.
3. Embed an interactive map to display results using the Maps JavaScript API.
## Prerequisites
### Set up your Cloud Project
1. Before you begin, follow instructions in [Set up your Earth Engine enabled
Cloud Project](https://developers.google.com/earth-engine/earthengine_cloud_project_setup). Make a note of the Client ID obtained in the section "Set up OAuth 2.0". Since your application will allow users to sign in with their own Google account, you can skip the section "Create and register a service account".
2. [Enable the Maps JavaScript API](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com) for your project.
### Get a Maps API key
See [Get the API key](https://developers.google.com/maps/documentation/javascript/get-api-key) in the Maps
JavaScript API documentation to learn how to obtain an API key allowing you to
use Maps JavaScript API in your web application.
It is strongly recommended that you also follow instructions in the
[Restrict the API key](https://developers.google.com/maps/documentation/javascript/get-api-key#restrict_key)
section to ensure only authorized requests are made with your API key.
## Create your application
### Step 1. Create an HTML page
To begin, define a basic HTML web page as follows:
```html
```
This basic HTML does several things:
- Uses CSS styles to define the size and background color of the map shown while initializing.
- Defines a "Sign in with Google" button that calls a function `onSignInButtonClick()` when clicked. This function will be defined in JavaScript in the next sections.
- Defines an empty element that will contain the map once it's initialized.
- Adds an empty `
```
```
```
```
/* 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
);
```
```html
```