Feature Focus – Maps
In the new React Native campusM app we provide an improved experience of navigation around the institution with the new react native map.
What’s new?
- Existing functionality is better positioned within the map, to make the usage more intuitive.
- New functionality called “Sticky Locations” is introduced, enabling the institution to decide which locations will appear persistently in all categories of the map, allowing the student easier navigation around the main landmarks.
Map Parts
Header
At the top of the screen there’s a header that includes a back button, a title, a search icon to search locations within the map and a menu (three dots icon) with the chosen functionalities of your institution, such as “Share” and “Send Feedback”. To learn more on how to configure the three-dot menu please see ______.
Map
Most of the screen is dedicated by default to the map. On the map, users will be able to see the locations configured by the institution (green pin icon) as well as their favorite locations (yellow pin icon).
At the top of the map users will find the categories configured by the institution. The “Favorite” category will always appear first, and “All” category will appear last. To view and select different categories the user can scroll the categories to the right and to the left.
“Show my location” icon is also located on the map, at the top right corner.
Information Bar
This bar is located at the bottom of the map and can be dragged up and down to show more or less information, respectively.
The content of the bar changes according to the actions of the user. Upon entry to the map it will display the title “Explore your Campus” and a map picker.
Footer
A general footer of the app appears at the bottom of the screen.
Map Behavior
Map Picker
Upon entering the map using the map tile in the home screen, the user will be directed to the map that was selected to be the first by the institution. This map is marked as selected in the map picker that appears with the Information Bar. The images of the different maps can be configured in app manager, using images from “Asset Manager”.
It is recommended to use meaningful images for the different maps, such as remarkable landmarks of a certain campus or a logo. When selecting a certain map in the map picker, the Map will change its focus according to the choice.
Selecting Categories
Categories are used to group several locations together, in a way that will make the navigation easier for the user. Examples of common categories are “Food and Drinks” and “Bus Stations”. When a category is selected, all the locations that are linked/related to that category will appear on the map and in the Information Bar as a list.
On the initial entry to the map, no category is selected. Only one category can be selected each time.
If the user entered the map using a link to a location category, such as “bus stations”, the map will open the selected category and not the default view.
Clustering
When several locations from the same category appear in proximity to one another, the pin icons will no longer be visible. Instead, the user will see a green icon with a number indicating the number of locations under that icon. To see separate locations the user needs to zoom in.
Sticky Locations
Sticky Locations are locations configured by the administrator to appear in all categories as well as upon initial entry to the map when no category has been chosen. These locations serve as markers of important landmarks within the institution and help the user with basic navigation. The number of the Sticky Locations is unlimited, but it is recommended to only use them for major landmarks, to keep the map clean and easy to understand. Sticky Locations will appear as green pin icons on the map, the same as other locations configured by the institution.
Sticky Locations are not profile-specific, meaning they will appear in all profiles.
"Show My Location" Option
The Show My Location option allows the users to view their current location on the map. To do so, press the round target icon at the top right corner of the map. The icon will appear as a full target icon. The map will focus on the user’s location and a blue circle icon will appear to indicate the location.
Selecting a Location
There are three ways for a user to select a location:
- Search for a location with the search icon at the header.
- Select a pin icon on the map.
- Select a location from the list that appears after selecting a category.
When a location is selected, the pin icon of the location turns red, its name appears beside the pin, and the Information Bar displays the information of the selected location. Within the Information Bar, the user can see the following:
- Favorite Button – at the top right corner of the bar, a heart shape icon is the “favorite” button. To add a location to the “Favorites” category a user has to tap the heart icon, which will then fill up and appear as a red heart.
Guest users can’t add favorites and the button will not be visible to them.
- Navigation Button - at the top right corner of the bar there’s a blue navigation button. Pressing that button will open the default map on the user’s device with the coordinates of the selected location. The user can then navigate to the location in Apple/ Google map.
- Location information - An image of the location and two or three tabs: About and Around Here, and, if any actions are defined for the location, an Actions tab. When the location is first selected, the About tab is selected, and only the position of the selected location is marked; all marked locations appear in the Around Here tab.
_doct_sm_1.png?revision=1)
Location Information with Actions Tab Selected