Routes

The Routes feature allows you to create and organize multiple places of interests within your app.

Users can drive around and discover these places from within your or from a maps application native on their mobile device.

To add this feature to your app, you will need to click on the icon from the list of available features

Initial Setup

After adding the feature, you will need to start on the Settings section:

1. “Default page“: Categories, or All Routes, this will set your initial page on the app when the feature is loaded.

2. “Distance unit“: Kilometers, or Miles, this will determine how distances are displayed in the app.

3. “Display navigate to POI action”: When enabled, user will be able to open a navigation intent to the selected POI (from within the details modal)

4. “Display approximate distance from user location to POI”: When enabled, user will see the approximate route distance between his position and the selected POI, passing by the closest POI on the route. Note: this will work only when the route is available with Driving, Bicycling or Walking navigation modes.

5. “Routes image priority in list“: When set, the thumbnail will default and fallback in the defined order.

6. “Default pin for new POIs“: This option determines which image to use as the default map pin for every new POI.

7 & 8. “Start color” / “End color”: Route line color, when colors are different a gradient is build between the colors from the first POI to the last.

9. “Stroke width”: Line width on map

10. “Stroke opacity”: Line color opacity on map

Click on the "Save" button

Next, you will need to add categories from the Categories section:

You can create as many categories as you want. These categories can be sorted after they have been added and they are also selectable / searchable from within the application

1. "Title": This is the title of the category that will be displayed on the application

2. "Icon": You can upload an icon or image for categories

3. "Active": You can toggle to enable or disable a category

Click on the "Save" button

Next, you will need to add Place of Interest from the POIs section:

Every POI is defined with:

1. “Title“: This is the name or label of the place you are defining.

2. “Description“: This is a description of the place.

3. “Thumbnail“: This is a thumbnail image to be displayed in the list view.

4. “Illustration“: This is an image that will be displayed in the “details” tab of the place within the app.

5. “Pin“: This is an image that will be used as a pin on the map.

6. “Map icon“: Which image to use as a pin on the map (thumbnail, illustration or pin).

7. “Address“: The POI textual address, you will get autocomplete suggestions from Google Map if this place is found.

8 & 9. “Latitude & Longitude“: The latitude and Longitude are autocompleted once you select an address from the autocomplete suggestion.

The address will pop a google search, but you can also manually set the latitude & longitude if the address doesn’t exists.

Click on the "Save" button

Finally, you will need to add organize routes from the Routes section:

Routes can be described as:

1. “Title“: This is the name of the route name.

2. “Subtitle“: The route subtitle is displayed in the list within the app for extended information.

3. “Description“: This is a description of the route.

4. “Thumbnail“: This is a thumbnail image to be displayed in the list view of the app.

5. “Illustration“: This is an image to be displayed in the “details” tab within the app.

6. “Category“: Select a category to which this route belongs.

7. “Navigation mode”: Defines the route calculation mode with Google Directions API, can be “Driving, Bicycling, Walking or Disabled” if no route is found, or available, Disabled will draw straight lines between your POIs.

8. “Is active?“: You can toggle to set the route as active or inactive.

9. “Add POIs to the route“: List of the POIs for this route, up to 25 POIs are allowed, you can sort them, the order will be used to create the route inside the application.

Click on the "Save" button

Inside the application

Inside the app, you will either start with categories or all routes depending on your settings

When you click on a route, you will be directed to the Map view

You will be able to move around, and select any POI to get more information

Finally, you can click on navigate to open a maps application native on your device to get begin navigation.