[GIS] Put LeafletJS geoJSON’s into a MySQL database through PHP

databasegeojsonleafletleaflet-drawPHP

I'm doing a project that will let users manipulate a map through LeafletJS, creating circles and polygons on top of the map. I need to gather these inputs for later analysis, using a MySQL database for the storing.

I was thinking in getting the input as geoJSON, then converting it into PHP by separating into several variables to correctly fill the tables in the database.

My question is more about where do I do that conversion… I imagine it is not everything on the client side right? I need to send the geoJSON to some back-end making the JSON-PHP conversion there, right? Or is there any other more direct way to do it?

Best Answer

Yes. You have to send your data from the client to the server and let server-code handle the database-insert.

You should look into HTTP POST through jQuery or other libraries as a way to asynchronously send your data from the client to the server.

Related Solutions

[GIS] Options for getting data from SQL Server into Leaflet app

To expand on my comment, let me talk about a similar application I had developed to showcase results of an election. There was some data which was updated periodically in the database (i.e. the Results), while most of the data, including the Geometry did not change.

My JavaScript Application used a static GeoJSON file for the static data and Geometry.
I had a C# windows Service on the Server. It periodically queried the database, and dumped the dynamic parts as a JSON file in the WebServer.
My JavaScript Application, periodically queried for the JSON file with a timestamp attached to the GET request, so that it got the latest data. Once the Ajax call received the data, it changed the symbology of the Vector layer.

Part 2 was developed in this way, instead of a normal web service, to reduce the strain on the database. A conventional service would be hit by all clients, and hence there would be many calls to the database. We wanted to avoid that, and cache this data. Hence we proceded with the architecture given in step 2.

[GIS] Submit form information from a leaflet popup to MySQL table

Several things seem to be wrong in your code.

When you have forms inside a Leaflet popup, you want to avoid form submission in the classic way. You typically need to submit using some AJAX behind the scenes that prevent reloading your page. In order to do this, you need to prevent the default behavior for form submission. This question discusses how to achieve this. In your case, it should be sufficient to add some code like:
```
$('#form').submit(function(e){
    e.preventDefault();
});
```
after the popup creation with the form, after your code
```
var popup = L.popup({maxWidth: 1000})
...
SKIPPED, INCLUDING YOUR FORM
...
.openOn(map);
```
This makes sure your form is not going to be submitted.
You need to write the code for submitting the form manually. You can add this code after the e.preventDefault(); line in the code above or define your function addMarker handling the form submission. Write this function in the global scope, e.g. before your $(document).ready(function (){

The form submission can be handled e.g. using jQuery's post or ajax function. This answer shows well how to do this part. The URL (action URL) would be your PHP script.
You need to handle the PHP part, i.e. accessing the submitted values and inserting them in the database. The name attribute of your form controls must match the $_POST keys in your PHP file. I think you did assume that the id attribute is defining the $_POST keys. Very often, this means the name attribute has the same value as the id attribute.

For instance, your line
```
<select class="form-control" id="arrest" name="text">
```
should be
```
<select class="form-control" id="arrest" name="arrest">
```
in order to be able to retrieve its value in PHP using
```
$_POST['arrest']
```
In case your code should not only be for developing purpose, please be aware of SQL injection issues and fix your code before production. Check out e.g. this and this to start.
You would need to do the necessary action in the Leaflet popup manually, such as closing it, or displaying the submitted values. You would do this typically in the success function you provide in the jQuery ajax or post function when submitting the form.

Best Answer

Related Solutions

[GIS] Options for getting data from SQL Server into Leaflet app

[GIS] Submit form information from a leaflet popup to MySQL table

Related Question