Earth Engine NodeJS API: Failed to load resource and CORS policy issue

Question

I am developing a GEE nodeJS custom application. I have gone through the documentation and source(https://github.com/google/earthengine-api/tree/master/demos/server-auth-nodejs). I setup the service account and added the private key JSON file in the application. When I run the application it is showing:

i. Failed to load resource: the server responded with a status of 404 ()

and
ii. Access to XMLHttpRequest at ‘https://earthengine.googleapis.com/map/projects/earthengine-……… from origin ‘http://localhost:3000‘ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Server.JS

const ee = require('@google/earthengine');
const express = require('express');
const handlebars  = require('express-handlebars');

const app = express()
  .engine('.hbs', handlebars({extname: '.hbs', cache: false}))
  .set('view engine', '.hbs')
  .use('/static', express.static('static'))
  .get('/', (request, response) => {
    var image = ee.Image('srtm90_v4');
    image.getMap({min: 0, max: 1000}, ({mapid, token}) => {
      console.log(mapid);
      console.log(token);
      response.render('index', {layout: false, mapid, token});
    });

  });

// Private key, in `.json` format, for an Earth Engine service account.
const PRIVATE_KEY = require('./privatekey.json');
const PORT = process.env.PORT || 3000;

ee.data.authenticateViaPrivateKey(PRIVATE_KEY, () => {
  ee.initialize(null, null, () => {
    app.listen(PORT);
    console.log(`Listening on port ${PORT}`);
  });
});

Script.JS

const EE_MAP_PATH = 'https://earthengine.googleapis.com/map';

/**
 * Initialize the Google Map and add our custom layer overlay.
 * @param {string} mapid
 * @param {string} token
 */
const initialize = (mapid, token) => {
  // Create an ImageOverlay using the MapID and token we got from Node.js.
  const tileSource = new ee.layers.EarthEngineTileSource({
    mapid,
    token,
    formatTileUrl: (x, y, z) =>
        `${EE_MAP_PATH}/${mapid}/${z}/${x}/${y}?token=${token}`
  });
  const layer = new ee.layers.ImageOverlay(tileSource);

  const myLatLng = new google.maps.LatLng(-34.397, 150.644);
  const mapOptions = {
    center: myLatLng,
    zoom: 8,
    maxZoom: 10,
    streetViewControl: false,
  };

  // Create the base Google Map.
  const map = new google.maps.Map(document.getElementById('map'), mapOptions);

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

index.hbs

<!DOCTYPE html>
<html>
  <head>
    <title>SRTM</title>
  </head>
  <body>
    <!-- The element into which we render the Google Map. -->
    <div id="map" style="width: 640px; height: 480px;"></div>

    <script src="/static/ee_api_js.js"></script>

    <script src="/static/script.js"></script>

    <script>

      var initMap = function() {
        initialize('{{ mapid }}', '{{ token }}');
      };
    </script>

    <!-- Load the Google Maps API, and run the initMap() callback when finished. -->
    <script src="https://maps.googleapis.com/maps/api/js?key=RemovedForTheStackExchangePost&callback=initMap"
            async defer></script>
  </body>
</html>

cors google earth engine google earth engine javascript api google maps api node.js

Earth Engine NodeJS API: Failed to load resource and CORS policy issue

Add your own answers!

Ask a Question