Map Component

About

The map component provides ability to show multiple location points in a map. User can view the pins on a map and hover on the pin to see more details. User can also zoom in or out of the map and drag the map around to recalibrate pins.

The map can be configured to show multiple types of pins like task location, technician location, site location.

There are some differing Configuration options for Map Component on Main page and Sidepanel. Ensure to configure based on web page layout.

Example

Best Practice

NA

Known Limitation

As of ISAC 20.10, showing of routes on map is not supported
Filtering or Searching on map is not supported
Real time refresh of map is not supported. User must refresh page to get latest pin positions.
When pins are close to each other, users cannot get more information for individual pins from the tooltip.
- If there are more than 5 pins: When users hover over the pins, the tooltip displays a generic message, “X number of pins in this cluster.”
- If there are 5 pins or less: When users hover these pins, the tooltips display ALL the tooltips for the pins inside the cluster. User can toggle left or right to see details of the individual pins

Configuration

There are some differing Configuration options for Map Component on Main page and Sidepanel. Ensure to configure based on web page layout.

Key	Description	Value Type	Accepted Values
`id`	User-defined id of the component	string	ID of map component
`type`	Type of the component. For map the type is `map` The type must be `map` and NOT `mapComponent`	string	`map`
`label`	Sets the title of the map.	String	Title of Map
`renderType`	How the map will be rendered. Only location is accepted which displays the location of single or an array of points	String	`location`
`defaultZoom`	Sets the default zoom level - 18 for street view.	String	-18
`preserveViewport`	true: Preserves the default view of the map and sets view based on rendered items. false: Does not preserve the default view of the map. Hence, `defaultZoom` value will be taken	Boolean	true, false
`dataSourceId`	The data source of the map component. It can be a query, workflow or pageContext If `dataSourceId` is query or a workflow, then Solution Admin must configure `dataToBeSent`.The response from the `dataToBeSent` should have `longtitude` and `latitude` values to populate the map.	JSON Object	JS `"dataSourceId": { "dataToBeSent": { "filter": "{$latitude} !='0' and {$longitude} !='0'", "models": [ "userSettings", "User" ], "columns": { "latitude": "User.latitude", "userId": "userSettings.userId", "Name": "User.name", "longitude": "User.longitude" }, "groupBy": "Name" } },`
`dataMap`	Solution Admin must configure which pageContext variables should be mapped as `longtitude` or `latitude`	JSON Object	CODE `"dataMap": { "latitude": "latitude", "longitude": "longitude" },`
`location` This is specific to map component in Sidepanel ONLY. This key is not applicable in map component in Mainpage	In sidepanel, use `location` object to configure how each point and the hover tool-tip will be rendered. For each point type (ie, Task point, technician point, warehouse point), the following keys must be given `coordinates` - pageContext variable which stores the coordinates for that point `icon` - icon of the point `type` - this should be `point` To configure the Hover tool tip for each point type, the following keys should be given in an array `dataType` - `label` - Heading font css, `text` - default font css `id` - id of the tooltip field `type` - this should be `text` `value` - value where the tooltip field is stored. Normally pageContext variable	JSON Object	CODE "location": [ { "children": [ { "dataType": "label", "id": "technicianNameId", "type": "text", "value": "@pageContext.userName" }, { "dataType": "default", "id": "slaId", "type": "text", "value": "@pageContext.slaId" } ], "coordinates": "@pageContext.originCoords", "icon": "https://d122pusslfmuhu.cloudfront.net/workflow-images/Light-Blue3%401.5x.svg", "type": "Point" }, { "children": [ { "dataType": "label", "id": "taskNameId", "type": "text", "value": "@pageContext.taskId" }, { "dataType": "default", "id": "slaId", "type": "text", "value": "@pageContext.calenderId" } ], "coordinates": "@pageContext.destinationCoords", "icon": "@pageContext.icon", "type": "Point" } ],
`fieldsToShow` This is only applicable for map component in main pages. For maps in sidepanel, configure the tooltip values in `location` . This key is not applicable to maps in sidepanels.	For map in main page, `fieldsToShow` will configure the hover tool tip which appears on hover of a pin. This key is optional. If not configured, nothing will happen on hover. `fieldsToShow` - configure the fields that will be shown when user hovers over the map. For each type of point (ie, task, technician, warehouse etc), Solution Admin must configure the fields to show in the hover tool tip in this format CODE `“task”: [ { "key": “taskId", “labelName": “Task Id" }, { "key": “status", “labelName": “Status" }`	JSON Object	CODE `“fieldsToShow”: { “task”: [ { "key": “taskId", “labelName": “Task Id" }, { "key": “status", “labelName": “Status" } ], “technician”: [ [ { "key": “technicianId", "labelName": “Technician Id " }, { "key": “technicianName", "labelName": “Technician Name" } ] }`
`panelId` This is only applicable for map component in main pages.	`panelId` - configure the sidepanel ID to open when user single clicks on the map. if you need some details about the pin location to be populated in the sidepanel, call for pageContext.SidePanelDetails which will have all the data	string

Sample JSON

Map in Main Page

Populated with Query

CODE

 {
      "defaultZoom": 8,
      "preserveViewport": false,
      "label": "@lang.['fseWorkforceLocation','Workforce Location']",
      "type": "map",
      "widgetType": "compWidget",
      "containerElementHeight": "30rem",
      "dataSourceId": {
        "sourceType": "query",
        "dataToBeSent": {
          "filter": "{$latitude} !='0' and {$longitude} !='0'",
          "models": [
            "userSettings",
            "User"
          ],
          "columns": {
            "latitude": "User.latitude",
            "userId": "userSettings.userId",
            "Name": "User.name",
            "longitude": "User.longitude"
          },
          "groupBy": "Name"
        }
      },
      "size": "L",
      "fieldsToShow": {
        "userId": true,
        "Name": true
      },
      "id": "map",
      "renderType": "location",
      "mapElementHeight": "100%",
      "mapJson": {}
    }

Populated with workflow

CODE

   "containerElementHeight": "30rem",
      "widgetType": "compWidget",
      "dataSourceId": {
        "endPoint": "process/start",
        "inputVar": {},
        "sourceType": "api",
        "processId": "16DBEF271116390B",
        "apiResponseFormat": true,
        "contextVar": {
          "userIdFilter": "{@userId}"
        },
        "apiResponseObject": "arrayResult"
      },
      "defaultZoom": 10,
      "dataMap": {
        "latitude": "latitude",
        "longitude": "longitude"
      },
      "preserveViewport": false,
      "fieldsToShow": {
        "ID": true,
        "Date": true,
        "Name": true
      },
      "label": "Tasks & Technicians Location",
      "id": "map",
      "renderType": "location",
      "mapElementHeight": "100%",
      "mapJson": {},
      "type": "map"
    },

Populated with pageContext

CODE

{
      "panelId": "16913F9E6756D40A",
      "defaultZoom": 17,
      "preserveViewport": false,
      "label": "Tasks & Technician",
      "type": "map",
      "containerElementHeight": "18rem",
      "dataSourceId": {
        "sourceType": "pageContext"
      },
      "dataMap": {
        "latitude": "latitude",
        "longitude": "longitude"
      },
      "fieldsToShow": {
        "calenderId": true,
        "taskId": true
      },
      "id": "map",
      "renderType": "location",
      "mapElementHeight": "100%",
      "mapJson": {}
    }

Map in Sidepanel

CODE

{
            "containerElementHeight": "30rem",
            "defaultZoom": 11,
            "hidden": "@jslib.isMapHidden",
            "preserveViewport": false,
            "location": [
              {
                "children": [
                  {
                    "dataType": "label",
                    "id": "technicianNameId",
                    "type": "text",
                    "value": "@pageContext.userName"
                  },
                  {
                    
                    "dataType": "default",
                    "id": "slaId",
                    "type": "text",
                    "value": "@pageContext.slaId"
                  }
                ],
                "coordinates": "@pageContext.originCoords",
                "icon": "https://d122pusslfmuhu.cloudfront.net/workflow-images/Light-Blue3%401.5x.svg",
                "type": "Point"
              },
              {
                "children": [
                  {
                    "dataType": "label",
                    "id": "taskNameId",
                    "type": "text",
                    "value": "@pageContext.taskId"
                  },
                  {
                    
                    "dataType": "default",
                    "id": "slaId",
                    "type": "text",
                    "value": "@pageContext.calenderId"
                  }
                ],
                "coordinates": "@pageContext.destinationCoords",
                "icon": "@pageContext.icon",
                "type": "Point"
              }
            ],
            "label": "Label for sidepanelmap",
            "id": "routeProgressMapId",
            "type": "map",
            "renderType": "location",
            "mapElementHeight": "100%",
            "mapJson": {}