Map

The Map component allows displaying a map in your application, creating markers (points of interest, areas) or displaying a route. This component relies on a map provider: Google Maps, OpenStreetMap, and Mapbox.

Google Maps, OpenStreetMap, and Mapbox are online mapping tools:

Google Maps is the standard in this area.
OpenStreetMap is a map of the world published for free under an open content license. Built by volunteer contributors, it is editable by anyone and constantly evolving.
Mapbox is more advanced and offers numerous customizations of the map background. However, its use requires a subscription.

Displaying a map

Click on Components and insert the Map component.

In the Properties, choose the provider: Google Maps, OpenStreetMap, or Mapbox.

Double-click on the component within your workspace to display the map.

Enter the coordinates (Latitude and Longitude) of your map's central point. Set the zoom level.

💡 If you choose Google Maps, it is necessary to insert your API key. For Mapbox, you must create an account beforehand and retrieve your Access Token to display the map. Learn more

With the User Location option, you can refresh the map based on the user's position.

You can choose whether or not to display the center pin.

Adding markers and a route

You can create markers, points of interest located at a specific position on the map.

To create a marker, go through the editing buttons that appear above the map. Select the type of markers (point of interest, rectangular or circular area) and click directly on the map to position it. You can also create routes to represent a route.

When you create a marker, it appears in the left list.

You can edit the properties of these markers:

Set its exact position (latitude and longitude)
Customize the appearance of the icon. To customize the appearance of these markers, specify the URL of an icon, its size, and position.

💡 For the appearance of markers, we use the Geopify service: you can customize the appearance and generate a new URL. You can also use any other service.

Choose whether you want to display a pop-up when clicking on the marker. You can customize the text.

It is also possible to create markers dynamically from a data source.

This video explains how to create dynamic markers on an interactive map:

Associating actions with markers

Once your markers are created, you can use them to trigger an action.

Open the Actions window and select a marker from the list. Associate the action of your choice (for example, Go to a screen or Open a pop-up)

💡 If you wish to go further, the GPS / Geofencing component allows you to trigger actions based on the GPS coordinates of the user.