Awesome Table’s Maps app is easy to use and is very popular among our users. You can change the color of the markers or use an image as icons to personalize your maps.
2
What is the Maps app?
The Awesome Table Maps app lets you create maps using the Google Maps API. It does this using paired data values (latitude and longitude) to render markers on the map. The app automatically scales to include all markers. This visualization type can be used in:
- Education for geography-based lessons
- Economics or Statistics for censuses
Live example: Maps app with Color-markers - Employee Directory
Create a Maps app
In the Awesome Table editor:
1. In the sidebar, open the App configuration section.
2. Select Maps under Visualization type.
3. Click Update app to apply your changes.
Keywords specific to the Maps app
Below is a list of keywords specific to the Maps app.
To create the Maps app data source, use the following keywords (in any order):
Maps app-specific keywords
| Column | Keyword | Description |
|---|---|---|
| 1 and 2 |
Designates the column containing latitude and longitude coordinates of the markers displayed on a map. |
|
| 3 |
Tooltip (Optional) |
Allows you to display a tooltip when the user clicks a marker. Can be used to display the value from a column or an HTML template. |
| 4 |
ColorType (Optional) |
Changes the color of your map's pins. |
| 5 |
MapsMarker (Optional) |
Customizes your markers with images or icons. |
Other keywords
You can also use these keywords with the Maps app.
| Keyword | Description |
|---|---|
| Hidden | Hides a column in your data presentation. |
| HyperlinkType | Adds links to text or image elements. It can be an alternative to using templates. That is useful if you want to generate links in your table without showing the full links (only text or images are shown). It also hides the URL column. |
| ButtonType | Displays a button that redirects to a link. You can also specify the color of your link (using HTML Color Names like red, blue, green or hex color codes) |
| ImageType | Displays images from a column containing links to images. That is an alternative to using templates. When users hover over the image, a larger version pops up. |
| IconType | Displays icons without using a template. Choose any icons from https://material.io/icons/. |
| RatingType | Transforms numbers from 0 to 5 to star-rating icons. |
| ListType | Transforms CSV values into HTML ordered lists. |
| NumberedListType | Transforms CSV values into HTML numbered lists. |
Settings in the Maps app
When you select Maps under Visualization type, Awesome Table displays the mandatory setting Maps height. We used 400 pixels in the live example.
Settings in the Maps app
Maps with Table app
Awesome Table also offers a Maps with Table app. The only difference between our Maps app and the Maps with Table app is the presence of a table.
Create a Maps with Table app
In the Awesome Table editor:
1. In the sidebar, open the App configuration section.
2. Select Maps with table under Visualization type.
3. Click Update app to apply your changes.
Settings in the Maps with Table app
In addition to Maps height, the setting # of items displayed is mandatory in the Maps with Table app. It specifies the number of rows to show in the table. Learn more about the setting # of items displayed.
Settings in the Maps with Table app
Live example of a Maps app with icon markers - Employee Directory