Thanks to the Open Street Map API, you can create advanced Maps within your projects. The Open Street Map API widget lets you create a series of Markers with associated data. A series can be created manually by adding the Markers one by one, or directly by loading geolocated records from a database: Sqlite, Firebase or Json API
for mobile-friendly interactive maps
In Order to use the Open Street Map API Plugin, you must enable it from the project settings (Plugins Tab) .
The size of the container that will display the map is responsive with a fixed display ratio between height and width.
The ratio can be from 1:1 (Square) to 21:9 (Wide).
The Initial Zoom Level from 0 to 20.
If this option is selected , the map will be automatically centered to the User current location.
You can define the Latitude and Longitude of the point where you want to center the map when the page is loaded.
Note that if the previous option (GeoLocate user) is enabled, the map will try first to center to the user position.
You can choose a Point (Lat & Lng) from a Map by selected the Button “Choose on Map” as shown in the screen below:
It is possible to customize an OSM Map by adding a Tile Layer Provider.
You can find a list of Providers on this web site: https://leafletjs.com/plugins.html#basemap-providers
For example, you can try to customise your map by using this provider:
And the associated options:
attribution: 'Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012'
The Map result will look like the following example:
The “Markers” tab of the GoogleMap Configuration Window lets you add markers from the a Database or manually.
A Web project can be populated from static markers or SQLite DB Markers, a Mobile project can also be populated from a Firebase Database or with an external Remote database thanks to the Json API Plugin.
It is possible to populate a Map from an SQLite database, you just have to set the DB Category:
It is possible to populate a Map from a Firebase Collection, you just have to set the Collection name, the Firebase Fields and, if required, the filter values:
The Markers coordinates can be populated from individual lat & Lng fields or from a Lat-Lng single field where the 2 values are separated by a comma
It is possible to populate a Map from a Json API source (Local or Remote), you just have to set the API URL or Json File, the Json Fields , the root and Key Field (Primary Key)
Like for Firebase, the Markers coordinates can be populated from individual lat & Lng fields or from a Lat-Lng single field where the 2 values are separated by a comma