Leaflet (Map)

1. In OutSystems, install the LeafletJS – Reactive app from the Forge.

2. After installation, go to your application, click Manage Dependencies, search for LeafletJS, select
Leaflet widget and other actions you might need.
3. To use this component, simply drag the Leaflet widget on your screen and fill it with the necessary
information.
Notes:
- You must add an OnReady client action within the screen to setup marker icons using the AddIcon
client action.
- It is important to give the Leaflet map a name to interact with it.
- It is highly suggested to use MapMarker and MapCircle variables instead of the AddMarker and
AddCircle client actions since the latter are not saved and cannot be bound to events.

Known Issues:
a. For Reactive web apps, there is currently no way of refreshing the map other than refreshing the
entire screen.
b. Dragging a marker from one location to another unbinds Leaflet pop-ups.
c. Circle radius cannot be updated. Hiding the previous circle and creating a new one is the
temporary workaround.
d. Intermittent error occurs when moving from one screen to another. This is likely caused when
the map is not yet rendered, or a previous map is not yet destroyed, and the app tries to
communicate/interact with it.
Google Maps (Map)
1. Create a Google account here.
2. After creating an account, go to Google cloud console and create a project.
a. From the header click on the “Select a project” dropdown and a pop-up should appear.

b. Click the “NEW PROJECT” button on the upper right corner of the pop-up.

c. Fill in the required information then click “CREATE”.

3. Once the project is created, from the Navigation Menu select API & Services > Enabled APIs &
Services. From here, select “+ ENABLE APIS AND SERVICES” below the header.

4. Search and enable the following APIs & Services:

a. Maps JavaScript API
b. Directions API
c. Maps Embed API

Note: During this step, Google might require you to enable billing for your current project, simply
click on the “Enable Billing Account” button that appears on a pop-up and setup your billing
account. If this doesn’t happen simply click the “ACTIVATE” button in the banner above the header
 to setup your account.

Important: A billing account is MANDATORY to remove the “For development purposes only”
watermark on the rendered map and to enable Geo-related APIs.

5. After setting up the APIs and billing account, from the Navigation Menu select API & Services >
Credentials. From here, select “+ CREATE CREDENTIALS” > “API key”.

Note: Once the API key has been generated, you can click on its name to rename your key, and
setup application and API restrictions for that key.
6. After setting up your Google account, go to your application, click Manage Dependencies, search for
OutSystemsMaps, select Map, MarkerPopup, Circle and other widgets/actions you might need.
7. To use this component, simply drag the Map widget on your screen and fill it with the necessary
information. To add markers and/or circles, simply drag the corresponding components on the Map
widget.
Note: For sample implementation you may refer to this link or install the OutSystems Maps Sample
app from the Forge.