support geojson / polygon POST requests to SelectDatasetArea from cybersw

[alee]

We'll try to add POST support to the select study area URL:

(will be live on staging first, sometime the week of June 1st or so)

https://staging.openskope.org/dataset/paleocar_v3

And in production: https://app.openskope.org/dataset/paleocar_v3

and in the form data stick it in an attribute like selectedArea or geoJson or something similar

could also use it in a GET request if it's embedded in request.body I believe...

multiple disparate areas are likely problematic for our current timeseries backend API as @bocinsky indicated below as the API finds the minimum bounding box that encompasses all of the geojson areas, new issue in skope-api for that at https://github.com/openskope/skope-api/issues/40

Nuxt implementation

https://stackoverflow.com/questions/54289615/how-to-read-post-request-parameters-in-nuxtjs

https://stackoverflow.com/questions/59478989/vue-nuxt-js-how-to-read-post-request-parameters-received-from-an-external-re

from chatgpt:

To accept GeoJSON input posted to a Nuxt.js 2 component from another form, you can follow these steps:

1. Create a Nuxt.js page or component that will handle the form submission and processing of the posted GeoJSON data. Let's call it GeoJSONReceiver.vue.

2. In the GeoJSONReceiver.vue component, define a method that will handle the form submission. You can access the posted data through the req object provided by Nuxt.js.

   export default {
    methods: {
      async processGeoJSON(req) {
        const geojsonData = JSON.parse(req.body.data);
        // Handle the GeoJSON data as needed
        console.log(geojsonData);
      }
    }
   };

3. In the nuxt.config.js file, configure the route that corresponds to the GeoJSONReceiver.vue component to accept POST requests.

   export default {
    // Other Nuxt.js configuration options
   
    // Route configuration
    router: {
      middleware: ['geojson-receiver']
    }
   };

4. Create a middleware file, geojson-receiver.js, in the Nuxt.js project's middleware directory. This middleware will intercept the POST request and pass it to the GeoJSONReceiver.vue component for processing.

   export default function (req, res, next) {
    if (req.method === 'POST') {
      this.nuxtServer.app.context.app.$nuxt.$emit('post-geojson', req);
    }
    next();
   }

5. In the GeoJSONReceiver.vue component, add the event listener to handle the emitted event and call the processGeoJSON method.

   export default {
    mounted() {
      this.$nuxt.$on('post-geojson', this.processGeoJSON);
    },
    beforeDestroy() {
      this.$nuxt.$off('post-geojson', this.processGeoJSON);
    },
    methods: {
      processGeoJSON(req) {
        const geojsonData = JSON.parse(req.body.data);
        // Handle the GeoJSON data as needed
        console.log(geojsonData);
      }
    }
   };

With these steps, the GeoJSONReceiver.vue component will be able to accept GeoJSON input posted to it from another form. When a POST request is made to the corresponding route, the geojson-receiver middleware will intercept it and emit an event that is listened to by the GeoJSONReceiver.vue component. The component can then process the posted GeoJSON data as required.

[bocinsky]

One challenge with a multipolygon study area is that our current time series tool pulls data from the minimal bounding rectangle for the geometry, and that rectangle is size limited. For example, a multiple polygon geojson of Cochiti and Santa Clara Pueblos works (c. 1,900 km^2), but one with Hopi and Zuni doesn't (c. 55,000 km^2). Perhaps break up the geometry to make multiple requests, or change the time series tool to select only pixels it needs. You can test with the attached geojsons. multipolygon.zip

[alee]

curl command to test geojson POST requests on staging.openskope.org

curl -X POST --data "studyArea={\"type\":\"Feature\",\"properties\":{},\"geometry\":{\"type\":\"Point\",\"coordinates\":[-107.971802,36.048799]}}" http://staging.openskope.org/dataset/paleocar_v3 --header "Content-Type: application/json"

[bocinsky]

This is working for me (I'm getting a 200 response) but just sends me to a page that says "Loading map, please wait..." but doesn't proceed past that. I'm probably doing something wrong, but how are you performing this in browser?

[alee]

This should be working now as of 9f3e33fe11a54ecc6d1849fc7542cff47676ffbe (apologies for the delay, travel and other work prevented me from getting to take a closer look at this).

I'm using a basic form to POST to staging.openskope.org like this example:

https://github.com/comses/comses.net/commit/3be090d4ce1148c7caaf17744d0a2b12747aef4e#diff-cc207a902ead39db7858f9e31a3f06748e3954233dab65fbdfb14221c4750077