Maps are convenient tools to visually present a wide array of geographical information, such as locations and categorical or numerical data, and dynamically showcasing application data.
Using the dashboard that we have created in the previous visualization guide, we will be adding maps to show the following CarWorld booking application data;
- Booking locations
- Customer locations
To start, let's go the the Manage Tipo page in the Developer perspective.
Here, select and edit the Statistics tipo.
Go to the Field Groups tab, and open the expanded view.
In the Analytics Field Group, add a new field labelled "Customer locations" of type visualization.
Then proceed to its expanded view.
In the Visualization Settings tab, select Map as the Visualization type.
Upon selecting map as our visualization type, some of the other sections that do not apply to this type, will be hidden.
What is left is the Visualization, Map Config, and Map Style Settings sections.
Visualization section is where the basic setting for the visualization is indicated.
Because we want a map of the customer locations, select Customer tipo as the Tipo Name.
In the section below, the Map Config section, there are the Field Name and the Tipo Name.
The Field Name dictates what field data of the specified Tipo name will be add onto the map.
For our example, let's set the following values:
- Field Name: cust_address.street_address_location
- Tipo Name: Customer
Note: Use the .street_address_location to ensure that the longitude and latitude of the customer address will be loaded unto the map.
The last section, the Map Style Settings section, is where we indicate the styling to be applied to our map.
Note: Markers are the object that indicate the location of a person or a tipo in the map.
In this section, you can see the following values:
- Marker Icon : (icon) indicates the icon to be used as a marker in the map
- Marker Icon Size : (numerical) indicates the size of the marker
- Marker Position : (string) indicates the position of the marker relative to the object
- Marker CSS : indicates the CSS styling that will be used for the marker
- Label Style : indicates the style to be applied on the label.
- Label CSS : indicated the CSS class that will be applied to the label
- Info Window Template : select , if any, a predefined window template that we want to apply to the map
- Type Places to Zoom : (Yes/No) If enabled, map zooms to specified place or object on the map
- Type Places to Select : (Yes/No) If enabled, map zooms selected place or object on the map
- Map Styles : indicate the map style that will be applied to the map
For now, we leave the style settings as is.
Review the setting, then proceed to the Position tab.
The Position tab is where we indicate the width and height of the map that we will be adding to the dashboard.
Here we want our map to occupy 4 columns and 2 rows of the dashboard, so we set the following values:
- Fixed Desktop Width: 4
- Enable Fixed Height: "Yes"
- Fixed Desktop Height: 2
Save your changes, and refresh the tipo.
Then proceed to the application Home, then the Statistics page.
Here, you will see the newly added map to our dashboard.
To add the next graph, go and edit the Statistics tipo.
Following the same process, add the following field data to the Analytics Field Group:
- Field Label: Booking locations
- Field Type: visualization
In the expanded view of the new field, set the following configurations in the Visualization Settings tab:
- Visualization type: Map
- Tipo Name: Booking
- Field Name: place.street_address_location
Proceed to the Position tab, and sent the following values:
- Fixed Desktop Width: 4
- Enable Fixed Height: "Yes"
- Fixed Desktop Height: 2
Save all the changes, then refresh the page.
Then proceed to the application Home, then the Statistics page.
You will see the dashboard has a new graph.
Comments
0 comments
Please sign in to leave a comment.