This article describes the concept of adding a point to a Leaflet map and assigning a category to it before the point is recorded.  This is not my idea, but that of a friend working in Civil Protection.

This example deals with “Tree Mapping” – a user can select a location on the map, where a tree should be added, and can also specify what type of tree it is: Platano (Platanus tree) or Faggio (Beech tree). My first step was to create an entry form, which in addition to just record the coordinates of the click on the map, a user could also provide more information, like a category (i.e. tree type), but I wanted something more:

Learning something new about GeoJSON files

Even when I created these entry forms with WordPress, there was always the constraint of the point, since it is easy to create, because of  theGeoJSON file structure. So I had to study how to successfully create a GeoJSON file with the help of PHP arrays. I stumbled upon the function array_push and learned how to create a series of arrays and sub-array, which look like this: features > features, properties, geometry.

Something more: I did not want to pass the newly created point into a database, but I wanted to write the file directly into a GeoJSON file. This is done with a combinantion of the functions: file_get_contents , json_decode together with array_push.

Final Result: A map made with HTML5 and JavaScript, for the geolocalization and mapping of trees – perfectly mobile-friendly!

• This is article in italian language
• View the example map here

OnClick function

Submit

References to the map code

• json_decode ($data, true) >> stackoverflow
• testing geojson with online tool >> geojson.io
• Passing JSON directly into getJSON method >> lyzidiamond.com
• create a radio button >> w3schools
• using array_push for correct use of array >> Sample PHP to Point GeoJSON
• add icon after getJSON >> … icon: L.icon (riga 331) …
• map code su >> GitHub