I have read the Google Earth Engine Client side Javascript API documentation. Here is the minimal code to start using Google Earth Engine Google Earth Engine Try it yourself
I have signed up for the Google Earth Engine here using my Google Account.
I have also followed all the prerequisites step for creating Project, Enabling Google Earth Engin API, Creating oAuth Client ID and Setting up everything.
The issue that I am facing here is that the code is not working as expected, when I went to the console and saw network tab, I realized there is a request of checkOrigin which always return
{
blocked:true
suppressed:false
valid:true
}
Same as in this question. While I have added the origin in Authorised JavaScript origins while creating API for Web Application.
NOTE: I am using wampserver and I have also added tested emails to the project.
Here is my current code:
<!DOCTYPE html>
<html>
<head>
<meta name="referrer" content="no-referrer-when-downgrade" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=myworkingGoolgeMapKey&callback=doNothing"></script>
<script src="https://ajax.googleapis.com/ajax/libs/earthengine/0.1.336/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>
function doNothing(){
console.log("ok");
}
function errorInit(){
console.log("initialize error");
}
// The OAuth Client ID from the Google Developers Console.
const CLIENT_ID = "myclientidFromoAuth.apps.googleusercontent.com";
// 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();
// 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
// If the user is signed in, display a popup requesting permissions needed to
// run the app, otherwise show the sign-in button.
$(document).ready(function(){
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.
errorInit,
// Request permission to only read and compute Earth Engine data on behalf of
// user.
/* extraScopes = */ ['https://www.googleapis.com/auth/earthengine'],
// 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>
