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
Post A Reply