In a previous previous post we wrote about Leaflet and how to show our maps in it. Now, we will see another interesting feature of Osiris that is the use of Points of Interest. Before that, we should explain what is a POI for us. In Osiris, POIs are called Features and are used to report about interesting services or places, being usually (but not necessary) outdoors. For instance, metro stations, bus stops, restaurants, etc. can be included as a POIs in our application.
Inserting a POI
Technically, a [Feature][api-doc] includes its coordinates and some more data we want to store as properties. Even more, Features have a geometry but we usually represent them as a simple point. So, if we want to include a bus stop in our map we can build a query like this:
The main concepts here are geometryDTO and properties. The first determines the type of geometry of the feature (a point in this case) and the geographic location of the POI. As this feature is a point, the representation will be only its coordinates. Secondly, the properties field is a container of data. For our POIs we want to store a name, its type and subtype and a description. Anyway, it is possible to store any other combination of keys an values, it just depends on the application design.
Now we want to send this information to our Osiris instance. To do that we use the previous JSON string in a CURL petition to the territory/feature method:
In order to check we have inserted anything, we can do a generic search like this:
And Osiris will return this JSON
Including the POIs in our map
In our example, we will use type and subtype values to get an icon, using the format type-subtype.png (i.e transport-bus.png). In addition, we will create a PopUp for our Marker assigning the description data to it.
Having the POI inserted in our database, we wan to show it on our map. We will modify slightly our queryMap function written in the previous tutorial to search in both MAP and FEATURES collections. The only thing we need is to add a parameter to get the layer value for the search.
Of course, the calls to that function in the index.html should include the new parameter:
Finally, we need a function to draw the markers using the JSON data obtained from Osiris.
The source code of this tutorial can be found in our examples repository at GitHub