Black Friday's here! Create an app and enjoy 50% off now!

Add a KML Map section

The Map section allows you to display and customize geo-targeted points on a map in your GoodBarber app. 

1. In the left swipe menu go to Content & Design > Content > Sections
2. Click the green button "+ Add a section" from the right column
3.  Add a KML section by choosing "KML" in the content items.  
4. Give it a title
5. Click "Add"


1

Import your map section

​We recommend using  Google Map to create your KML files.
Important: The KML section can manage up to 1000 points.
Therefore your KML file must not contain more than 1000 items in order for your section to behave correctly. 

Only the 100 first points of the map will be displayed at the launch of the section. To display the next 100 locations on the Map, you need to scroll down the locations list-view in order to load more. You can repeat the process for the next 100 locations (this applies only to KML sources).

picture

2

Import your file

There is two options to import KML files into your backend.

To upload a file:
1. Upload the file on your computer
2. Select the template File
3. Click "Browse" to import the file into your back office

picture

To use a Url:
1. Select the template Url
2. Fill in the url of your KML file

picture

3

Design

To edit the design of your section:
1. Go to the menu Content & Design > Design > Sections design
2. Click your section on the right column to access the design settings.

picture

Click Edit Map template to select the icon,  color, or upload a custom icon for your locations on the map view.
 

picture

Click Edit List of Locations template to:
- Display the list view of your list of locations or disable its display by selecting/deselecting the check option "Show list".
- Decide whether to show the list or the map first by clicking on "Show the list first" in order to display it. Otherwise only the Map will be showed.

picture

Click Edit Point template to choose the design settings for the point, which includes the Toolbar and the Action Buttons

picture

More articles