topic GeoJSON Edit/Add Feature in ArcGIS JavaScript Maps SDK Questions

GeoJSON Edit/Add Feature

kawishabbas — Sat, 11 Dec 2021 18:42:02 GMT

I have geojson service but when i use Editor widget to add feature on map. The problem is that feature shows on map after editing but not save into database...

Can any one guide me to solve this problem...

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>GeoJSONLayer - 4.13</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.13/"></script>

    <script>
      require([
        "esri/Map",
        "esri/layers/GeoJSONLayer",
        "esri/views/MapView",
          "esri/widgets/Editor"
      ], function(Map, GeoJSONLayer, MapView, Editor) {

        const url =
          "http://localhost:3000/data";

        const geojsonLayer = new GeoJSONLayer({
          url: url
        });

        const map = new Map({
          basemap: "gray",
          layers: [geojsonLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          center: [68.589073, 26.092168],
          zoom: 8,
          map: map
        });

      view.when(() => {

          let editor = new Editor({
            view:view
          })
          view.ui.add(editor, 'top-right')
          
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: GeoJSON Edit/Add Feature

ReneRubalcava — Wed, 13 Nov 2019 15:23:58 GMT

Edits done on the GeoJSONLayer are client side only, it does not update the GeoJSON on the server.

Re: GeoJSON Edit/Add Feature

kawishabbas — Wed, 13 Nov 2019 17:15:43 GMT

Is there any process to update GeoJSON on server.....???

Re: GeoJSON Edit/Add Feature

ReneRubalcava — Sat, 11 Dec 2021 18:42:05 GMT

You had me thinking about this one. There's no direct way in the API to do this, but you could use Terraformer to convert your features back to GeoJSON and either download them or push them to a web service that will update your server side GeoJSON.

Here is a demo.

geojsonLayer
  .queryFeatures()
  .then(({ features }) => {
    const FeatureCollection = {
      type: "FeatureCollection",
      features: []
    };
    FeatureCollection.features = features.map(
      ({ attributes, geometry }, index) => {
        return {
          id: index,
          properties: attributes,
          geometry: Terraformer.ArcGIS.parse(geometry)
        };
      }
    );
    // Do something with your GeoJSON
    // Dowonload it or send it to an external API
    // to update your existing GeoJSON
    console.log("FeatureCollection", FeatureCollection);
  })
  .catch(error => console.warn(error));‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: GeoJSON Edit/Add Feature

Esri_PrajaktaPatil — Wed, 13 Jan 2021 15:27:06 GMT

Hello ReneRubalcava,

Thank you for your insights!

I am working on the button event to update my existing GeoJSON. But my issue is on button event I am not able to access the geoJSON layer and queryfeature().

Your inputs are highly apricated.

Thank you!