Quick Access Directory
QUICK DIRECTORY
Warning
This is only for v8.3.x
For web sdk apps you can create an optional quick directory by defining a categories option for easier navigation
Those categories can consist of either pois or buildings, and they are configurable depending on needs.
HOW TO SET YOUR CATEGORIES
Categories configuration requires a special array of category objects in the sdk options. Every category object should have following key-value pairs:
{
"name": "Airlines",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/plane.svg",
"type": "PoiList",
},
“name”: Name of the category to be displayed in the list
“icon”: Icon url of the category,
“type”: “PoiList” or “BuildingList” . Every category displays a list of either buildings or pois. Type must be indicated here
If the type is “BuildingList”, the category must include:
{
"name": "Terminals",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/gate.svg",
"type": "BuildingList",
"buildingInternalIdentifiers": [2, 3, 4, 5]
},
“buildingInternalIdentifiers”: an integer array that includes internal identifiers of buildings of the category
If the type is “PoiList the category must include:
“typeCodeList” : A String array. Pois of the category are identified by checking if their typecode match with one of the typecode in the given list.
{
"name": "Airlines",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/plane.svg",
"type": "PoiList",
},
An example categories option can be seen as a whole below and usage of the category option is not different from other options
let categories = [
{
"name": "Airlines",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/plane.svg",
"type": "PoiList",
"typeCodeList": ["gate", "airlines-avaiation-services", "lounge"]
},
{
"name": "Terminals",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/gate.svg",
"type": "BuildingList",
"buildingInternalIdentifiers": [3, 4]
},
{
"name": "Transport",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/bus.svg",
"type": "PoiList",
"typeCodeList": ["bus-station", "shuttle-station", "taxi-car-service"]
},
{
"name": "Parking",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/car-park.svg",
"type": "BuildingList",
"buildingInternalIdentifiers": [2, 3, 4]
},
{
"name": "Dining",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/restaurant.svg",
"type": "PoiList",
"typeCodeList": [
"restaurant",
"fast-food",
"bar",
"food-beverage",
"cafes-coffee-tea-houses"
]
},
{
"name": "Shopping",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/shop.svg",
"type": "PoiList",
"typeCodeList": [
"department-store",
"books-stationery",
"sports-equipment-accessories",
"accessories-gifts"
]
},
{
"name": "Amenities",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/toilet.svg",
"type": "PoiList",
"typeCodeList": [
"toilets",
"atm",
"pet-relief",
"pay-phone",
"arts-entertainment"
],
"filter": [
{
"name": "Post Security",
"key": "security",
"value": "post"
}
]
}
]
let options = {
apiUrl: "https://API_URL.pointr.cloud",
clientInternalIdentifier: "CLIENT_INTERNAL_IDENTIFIER",
clientSecret: "CLIENT_SECRET",
categories: categories
}
const pointrWebSDKOptions= new PointrWebSDK.Options(options);
const pointrWeb = new PointrWebSDK.MapWidget(pointrWebSDKOptions);
pointrWeb.start();
Adding New Category
Adding a New Category of Type BuildingList
BuildingList categories should have name, icon and type. Only different field from Poilist is: buildingInternalIdentifiers, an array of integer consisting of internal identifiers of the buildings of the category.
{
"name": "Fibonacci Buildings",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/buildings.svg",
"type": "BuildingList",
"buildingInternalIdentifiers": [2, 3, 5]
},
In this example, only the buildings IDs that are Fibonacci numbers are selected arbitrarily.
When the newly added category is clicked only the buildings with given ids are listed:
Adding a Category of Type PoiList
Poilist categories should have name, icon and type. Only different field from Buildinglist is: typeCodeList, an array of strings consisting of different POI type codes.
{
"name": "Atm",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/atms.svg",
"type": "PoiList",
"typeCodeList": ["atm"]
},
- name: The name that will appear on the categories list.
- icon: Link to the icon to be used on the categories list.
- type: Must be either “PoiList” or “BuildingList”. In this example, a “PoiList” type of category is added.
- typeCodeList: Since the type of the category is “PoiList”, this key is required so that pois with given typecode(s) will be displayed under the category. In this example only the pois whose typeCode is “atm” will be listed.
When you click on the category, you can see the related pois:
Adding Filters to PoiLists
Optionally, you can add filters to categories of type PoiList. You can give a filter array to the category object. Filter array consists of category objects with keys name, key and value.
{
"name": "Atm",
"icon": "https://pointrapps.blob.core.windows.net/core-web-sdk/sample-web-app/atms.svg",
"type": "PoiList",
"typeCodeList": ["atm"]
"filter": [
{
"name": "Post Security",
"key": "security",
"value": "post"
}
]
},
- “name”: Displayed name on dropdown list
- “key”: Key to check in poi’s extraData
- “value”: Expected value of the key.
Expected behavior of filter: When the user selects a filter from the dropdown, only the pois that have related key, value pairs in their extraData will be displayed.
If a category has a filter option, a dropdown list is displayed in its sublist. See the dropdown at right in below:
You can add multiple filter options.
For related pois to be displayed when the filters are selected, you must set your pois’ extraData properly. You can add or update your pois’ extraData via Advanced Configuration:
You can add your extra data key and values here, or update existing ones.
From now on, when a user filters ATM list by post security option, he will be able to see the one whose extraData is set:
