GeoJSON Edit/Add Feature

938
4
11-13-2019 04:02 AM
kawishabbas
New Contributor III

Hi 

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
4 Replies
ReneRubalcava
Frequent Contributor II

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

0 Kudos
kawishabbas
New Contributor III

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

0 Kudos
ReneRubalcava
Frequent Contributor II

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));
Esri_PrajaktaPatil
New Contributor

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!

0 Kudos