How to add a point to a Leaflet map with an user assigned category

How to add point to map and choose one category

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!

OnClick function





References to the map code

About This Author

Urban planner. open source GIS expert, web developer, trees mapper

Post A Reply