Creating map cards

Edit online

A map card is a geospatial map that can show multiple data streams of multiple types with latitudes and longitudes.

About this task

The example of a map card is as follows:
A map card shows shipment location for the inbound shipment
Card title
A unique label or heading that is assigned to the card.
Card tooltip
A tooltip provides extra details about the data that is displayed on the card.
End location tooltip
A tooltip provides extra details about the end location that is displayed on the card.
Start location tooltip
A tooltip provides extra details about the start location that is displayed on the card.
Label
A unique label that is assigned to a data stream.

You can use the Card builder to create a map card.

Procedure

  1. From the navigation menu, click Card builder.
  2. Click New card.

On the General tab, define the card:

  1. Assign a name to the card.

    The card is referred to by its name in the card library.

  2. Select the card type.
    Select Map as the type of card.

On the Data tab, add data to the card:

  1. Click Add and then click Code editor to add a GraphQL query to retrieve the data.
    In the query field, write a query similar to the query in the Example. For more information, see Adding queries to cards.
  2. Define any variables that you are using in the query.
    In the QUERY VARIABLES field, define the variables in JSON format by using format that is similar to the Example.
  3. Run the query.
  4. Verify that data is returned for the query, similar to the data that is returned in the Example.
  5. On the Transform tab, add code to transform the data for visualization on a map card.
    Use code similar to the Example or use the default transform.
  6. Click Done.
  7. Configure the data stream for the map.

    In the example, the data stream shipment, is available. Select the data stream to show location points (A to B) on the map.

  8. Optional: Override the label and the color.

On the Style tab, define the style of the card:

  1. In Dimensions, increase the width and height of the card.
  2. Click Save.

Example

The following query retrieves the shipment detail. The query includes tenantId and shipmentId variables.
query ShipmentDetail($tenantId: String!) {
  shipmentDetail: businessObjects(
    hint: {viewId: "graph"}
    simpleFilter: {tenantId: $tenantId, type: Shipment}
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentIdentifier", type: STRING}, {VALUE: "3004555", type: STRING}]}]}
    cursorParams: {}
  ) {
    totalCount
    edges {
      cursor
      object {
        ... on Shipment {
          id
          shipmentIdentifier
          Origin: shipFromLocation {
            locationName
            locationIdentifier
            coordinates
          }
          Destination: shipToLocation {
            locationName
            locationIdentifier
            coordinates
          }
        }
      }
    }
  }
}
The following code is an example of variables to use in the query. 
{
  "tenantId": "{{ tenantId }}"
}

The following code is an example of the data that is returned by the query.

{
  "data": {
    "shipmentDetail": {
      "totalCount": 1,
      "edges": [
        {
          "cursor": "NTQ1NTE4Mw==",
          "object": {
            "id": "64b11459-878e-43bf-b86b-0dea2ec51aac",
            "shipmentIdentifier": "3004555",
            "Origin": {
              "locationName": "LightTree Plant 1 Birmingham",
              "locationIdentifier": "LT-1",
              "coordinates": "33.5206608, -86.80249"
            },
            "Destination": {
              "locationName": "New York Department of Transportation - New Rochelle",
              "locationIdentifier": "NYDOT - New Rochelle",
              "coordinates": "40.9114882, -73.7823549"
            }
          }
        }
      ]
    }
  },
  "loading": false,
  "networkStatus": 7
}

The following code is an example of a transform to use for the map card. 

{
	"errors": "{{#? this.errors}}",
	"longitude": "{{this.data.shipmentDetail?.edges[0]?.object?.Origin?.coordinates?.split(',')[1]}}",
	"latitude": "{{this.data.shipmentDetail?.edges[0]?.object?.Origin?.coordinates?.split(',')[0]}}",
	"totalCount": "{{ this.data.shipmentDetail.totalCount }}",
	"results": {
		"shipment": {
			"{{ #each this.data.shipmentDetail.edges }}": {
				"id": "{{ this.object.shipmentIdentifier }}",
				"origin": "{{ this.object.Origin.coordinates }}",
				"destination": "{{ this.object.Destination.coordinates }}",
				"startLocationIdentifier": " {{ this.object.Origin.locationIdentifier }}",
				"endLocationIdentifier": " {{ this.object.Destination.locationIdentifier }}"
			}
		}
	}
}

In a transformation, the data that is displayed on map must match the data that is returned by the query. This attribute is selected in the data streams section. A calculation can be made on the data that is returned. In the example, longitude and latitude data are created from shipment object data that the query returns.

What to do next

Add the card to a page by using the Page builder.