Creating a webmapping application that connects to database

1172
2
05-10-2019 09:31 PM
Kevin_C
New Contributor III

Hi all, 

I'm trying to create a web mapping application that lets users submit data from a map interface to a database existing server-side. I'm wondering if anyone could guide me through the basic design of this client-server architecture. I'm a relative beginner to full-stack web GIS development, so any help is appreciated!

What am I trying to do? 

I want to build a webmap that allows the user to do these tasks:

1) draw polygons on the map to choose areas

2) fill out a form on the side panel related to the polygon that was created. User inputs information into form and submits it. 

When the form is submitted, the polygon data is automatically submitted with it. This data is then recorded into a table in database existing on a server. 

I would also like to retrieve this data from the database and put it back on the map for a separate part of the application. 

What ideas do I have so far? 

I'm using the ArcGIS API for JavaScript to create the webmap. I think the best way to submit the drawn polygons to the database would be to convert them to GeoJSON and then submit it as a string to a new column in the table. But how do I do this? Is there a way in the JS API to convert the polygons that are drawn using the Sketch widget to GeoJSON?

Or is there a way to utilize some tool like GeoServer for this, and not go the GeoJSON route? 

And after this step, how do I submit this form and polygon data to the Postgres database? I was thinking of using PHP and PDO

Any ideas or tips on how to go about designing this app?

Thanks!

2 Replies
AkbarBakhshi
New Contributor II

Hi,

Have you figured out the answer to your question? I am trying a similar thing and was wondering what the easiest way is?

Thanks.

AmyNiessen
Esri Regular Contributor

The best way to do this is to start with a database that has been registered with ArcGIS Enterprise. At that point, you can publish your layer, in a map service, and configure it so that it can be edited thru a web application. Your user can sketch the polygon, enter the attributes, and have that edit push through the REST endpoint all the way back into the enterprise geodatabase.

 

Here is a tutorial that provides one example: https://enterprise.arcgis.com/en/server/10.6/get-started/windows/tutorial-perform-web-editing-using-...

 

If your database is not registered as an enterprise geodatabase, you're a bit more on your own, but the JS API's Polygon class has a "toJSON()" method that creates a JSON string which is a JSON representation of the Polygon feature (list of rings, each ring a list of vertices).

 

https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Polygon.html#toJSON

 

As for the Sketch widget, it has an .on() method, and when called with the "create" event as the first argument, returns an event object. Inside the code block for the .on() method, you can get the geometry out of the event like this:

 

mypolygon = event.graphic.geometry

 

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch.html#on

 

That's something you can try. In the meantime, I'm going to transfer this post over to the GeoNet forum for the JavaScript API so that others might weigh in.