3

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>

enter image description here

1
0

There is a cors package available for express.

Install cors package from here

npm install cors

Require cors in server.js

const cors = require("cors");

Register cors middleware to enable cors on the server

app.use(cors());

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.