Reading from Itineraries

Displaying maps of content doesn't require GraphQL in most cases, and you can simply work with output of the mapping services directly to display content using native formats. View source

This guide is designed to provide developers with a comprehensive understanding of how to access and query itinerary content through our API. The API allows developers to build applications and websites that access and manage travel content, such as curated lists, trips and trails, which we refer to as itineraries.

We hope that this guide will provide developers with a solid foundation in accessing itinerary content through our API and serve as a useful resource in developing their applications and websites.

What this guide does not cover:

• Numerous alternative use cases; This is provided to give a developer an overview of calling the GraphQL API but there are numerous other operations and use cases covered outside of this guide.

• This guide does not cover how to make API calls or connect your application to the GraphQL API using a specific client. It is technology agnostic and allows developers to use any GraphQL client to make the calls.

• It does not cover how to obtain or use an API key to access the Alpaca Travel GraphQL API. Developers must have a valid API key to make calls to the API.

• It does not cover implementation details such as handling errors or rate limiting, which are important but are out of scope of this guide.

• It does not cover all the possible options and variations of the GraphQL operations, but it covers the most common and useful ones for managing itineraries.

Loading an Itinerary

To load an individual itinerary from the Alpaca Travel GraphQL API, developers will need to have the itinerary ID handy and include it in the query. The query should include the necessary fields for the itinerary, such as the title and synopsis.

If you are getting started, you can use the Alpaca Travel itinerary editor to edit an itinerary, and obtain the Itinerary ID from the "Integrations" tab.

For example, the following query will retrieve an itinerary with the ID "itinerary/ABC123" and retrieve the title and synopsis of the itinerary:

1query {
2  itinerary(id: "itinerary/ABC123") {
3    title
4  }
5}

Sandbox: Configure | Try Operation

By including the itinerary ID in the query, the API will return the specific itinerary that matches that ID, providing the title of the itinerary.

1{
2  "data": {
3    "itinerary": {
4      "title": "Wild West Coast"
5    }
6  }
7}

It is also possible to retrieve additional information about the itinerary by including additional fields in the query. For example, the following query will retrieve the title, synopsis, and publish date of an itinerary and the preferred media image to display for the itinerary with the ID "itinerary/ABC123":

1query GetItinerary {
2  itinerary(id: "itinerary/ABC123") {
3    title
4    # Add additional fields
5    synopsis
6    published
7    preferredMedia {
8      resource {
9        ... on MediaImage {
10          id
11          card: url(bestFit: [800, 800])
12          attribution
13        }
14      }
15    }
16  }
17}

Sandbox: Configure | Try Operation

The additional fields requested will be included in the response:

1{
2  "data": {
3    "itinerary": {
4      "title": "Wild West Coast",
5      "synopsis": "A road trip showcasing Tasmania's World Heritage wilderness and wild untamed west coast.",
6      "published": "2022-12-01T04:54:35.698Z",
7      "preferredMedia": {
8        "resource": {
9          "id": "media/0SkPMi6FnSw3COQDt40Axn",
10          "card": "https://media-cdn.alpacamaps.com/uploads/2a/2PG08okaqm2Hfup0xkdzww/IMG_0746/large_1024h.jpeg",
11          "attribution": "Source: Zoe Manderson"
12        }
13      }
14    }
15  }
16}

In addition to loading an individual itinerary, developers can also query for a list of itineraries that are associated with a specific profile on the Alpaca Platform. This can be done by including the "profileId" field in the query and specifying the desired profile ID.

For example, the following query will retrieve a list of the first 10 itineraries associated with the profile ID "profile/ABC123":

1query GetProfileItineraries {
2  itineraries(profileId: "profile/ABC123", first: 10, after: null) {
3    edges {
4      node {
5        id
6        title
7        synopsis
8
9        preferredMedia {
10          resource {
11            ... on MediaImage {
12              id
13              thumbnail: url(bestFit: [200, 200])
14              attribution
15            }
16          }
17        }
18      }
19    }
20
21    pageInfo {
22      hasNextPage
23      endCursor
24    }
25
26    totalCount
27  }
28}

Sandbox: Configure | Try Operation

The response will contain a number of itineraries that can be displayed individually using the "itinerary" query.

1{
2  "data": {
3    "itineraries": {
4      "edges": [
5        {
6          "node": {
7            "id": "itinerary/DEF456",
8            "title": "Coffee Shops of Tokyo",
9            "synopsis": "Whether it be slow pour overs, cold brews or milky barista style, Tokyo knows how to do coffee. You'll find coffee shops down laneways, hidden in residential streets, behind ivy cloaked buildings, and wedged precariously on busy pavements.",
10            "preferredMedia": {
11              "resource": {
12                "id": "media/3gf8cBQNipVu1dHEeDOCoM",
13                "card": "https://media-cdn.alpacamaps.com/uploads/b1/68Z48ebjSbttxczfZVMmpB/ScreenShot2022-11-22at2.16.55pm/small_m225w_m200h.png",
14                "attribution": "Source: Zoe Manderson"
15              }
16            }
17          }
18        },
19        {
20          "node": {
21            "id": "itinerary/ABC123",
22            "title": "Wild West Coast",
23            "synopsis": "A road trip showcasing Tasmania's World Heritage wilderness and wild untamed west coast.",
24            "preferredMedia": {
25              "resource": {
26                "id": "media/0SkPMi6FnSw3COQDt40Axn",
27                "card": "https://media-cdn.alpacamaps.com/uploads/2a/2PG08okaqm2Hfup0xkdzww/IMG_0746/small_m225w_m200h.jpeg",
28                "attribution": "Source: Zoe Manderson"
29              }
30            }
31          }
32        }
33      ],
34      "pageInfo": {
35        "hasNextPage": false,
36        "endCursor": "eyJvZmZzZXQiOjF9"
37      },
38      "totalCount": 2
39    }
40  }
41}

The response will contain a list of itineraries that match the specified profile ID. The "edges" field will contain an array of itinerary objects, each containing the ID, title, and synopsis of the itinerary. The "totalCount" field will indicate the total number of itineraries that match the specified profile ID.

It is important to note that in order to retrieve itineraries associated with a specific profile, the user must have the proper permissions and the content must be listed as discoverable if using a public token. Additionally, it is possible to filter and sort the query results by including additional fields in the query.

Displaying a List of Locations

When building an application or website that accesses itinerary content, it is likely that you will need to display a list of locations for a specific itinerary. The Alpaca Travel GraphQL API allows you to easily retrieve a list of locations for an itinerary using the "children" field in the "itinerary" query.

To retrieve a list of locations for an itinerary, you can use the following GraphQL query:

1query GetItineraryLocationList {
2  itinerary(id: "itinerary/0mttpRn7spYNDIV979fHbE") {
3    id
4
5    # Read in the stops
6    children(first: 10, type: ItineraryLocation, after: null) {
7      edges {
8        node {
9          id
10          title
11
12          siblingPositionNumber
13
14          # Additional content can be selected here as well, depending on the
15          # need of your application/website UI
16
17          # Include the preferred media thumbnail
18          preferredMedia {
19            resource {
20              ... on MediaImage {
21                id
22                thumbnail: url(bestFit: [200, 200])
23                attribution
24              }
25            }
26          }
27        }
28      }
29
30      pageInfo {
31        hasNextPage
32        endCursor
33      }
34
35      totalCount
36    }
37  }
38}

Sandbox: Configure | Try Operation

This query retrieves the list of locations for the itinerary with the ID "itinerary/DEF456". The "children" field is used to retrieve the list of locations, and the "first" parameter is used to specify the number of locations to retrieve. The "type" parameter is set to "ItineraryLocation" to only retrieve location nodes.

The query also requests the title, id, and the position of the location in the itinerary. The query will return a list of edges, each edge containing a node representing a location, the totalCount of the locations in the itinerary, and the pageInfo which gives information about the cursor and the next page if there is one.

A successful response to this query may look like the following:

1{
2  "data": {
3    "itinerary": {
4      "id": "itinerary/DEF456",
5      "children": {
6        "edges": [
7          {
8            "node": {
9              "id": "itinerary/DEF456/location/5q7KiwXt00q7CkuuJgwPGI",
10              "title": "Koffee Mameya",
11              "siblingPositionNumber": 1,
12              "preferredMedia": {
13                "resource": {
14                  "id": "media/24yfva4idUMfg6mqnbV6XR",
15                  "thumbnail": "https://media-cdn.alpacamaps.com/uploads/4c/7k4IVQoPo8m8K7J9C8BorF/IMG_65783/small_m225w_m200h.jpeg",
16                  "attribution": "Source: Zoe Manderson"
17                }
18              }
19            }
20          },
21          {
22            "node": {
23              "id": "itinerary/DEF456/location/2Q6thRSfnhhVsKaGqnqrSV",
24              "title": "Higuma Doughnuts × Coffee Wrights",
25              "siblingPositionNumber": 2,
26              "preferredMedia": {
27                "resource": {
28                  "id": "media/5Xri6dflmKq8pJFVyPSC0q",
29                  "thumbnail": "https://media-cdn.alpacamaps.com/uploads/10/76Spj4pXRvbGo58fGufJhe/IMG_65882/small_m225w_m200h.jpeg",
30                  "attribution": "Source: Zoe Manderson"
31                }
32              }
33            }
34          },
35          {
36            "node": {
37              "id": "itinerary/DEF456/location/2rlIDmk0IeETSiA3iseWc4",
38              "title": "Onibus Coffee",
39              "siblingPositionNumber": 3,
40              "preferredMedia": {
41                "resource": {
42                  "id": "media/1uaq5yNFC0SPiGNN2xhndN",
43                  "thumbnail": "https://media-cdn.alpacamaps.com/uploads/0c/1WXshTWzawS3mDPDLIK6lf/ScreenShot2022-11-22at1.29.19pm/small_m225w_m200h.png",
44                  "attribution": "Source: Zoe Manderson"
45                }
46              }
47            }
48          },
49          {
50            "node": {
51              "id": "itinerary/DEF456/location/4DjTycRHtTPAlmN0Gw4Yis",
52              "title": "About Life Brewers",
53              "siblingPositionNumber": 4,
54              "preferredMedia": {
55                "resource": {
56                  "id": "media/6G3e4U5GDVWIgbSmb1J9kO",
57                  "thumbnail": "https://media-cdn.alpacamaps.com/uploads/b0/46yxk1FqbcWoOfHM8JU1iP/ScreenShot2022-11-22at1.36.04pm/small_m225w_m200h.png",
58                  "attribution": "Source: Zoe Manderson"
59                }
60              }
61            }
62          },
63          {
64            "node": {
65              "id": "itinerary/DEF456/location/0bHCYxpyVCYUzPDwrWmt32",
66              "title": "Blue Bottle Coffee",
67              "siblingPositionNumber": 5,
68              "preferredMedia": null
69            }
70          },
71          {
72            "node": {
73              "id": "itinerary/DEF456/location/5XeXZn2N4b4ndK3VJKqf86",
74              "title": "Faro Coffee",
75              "siblingPositionNumber": 6,
76              "preferredMedia": {
77                "resource": {
78                  "id": "media/15hTveupnLmusowKvigvOT",
79                  "thumbnail": "https://media-cdn.alpacamaps.com/uploads/54/4gYEKXPoonVhXFeiT6TkGy/IMG_4195/small_m225w_m200h.jpeg",
80                  "attribution": "Source: Zoe Manderson"
81                }
82              }
83            }
84          }
85        ],
86        "pageInfo": {
87          "hasNextPage": false,
88          "endCursor": "eyJvZmZzZXQiOjV9"
89        },
90        "totalCount": 6
91      }
92    }
93  }
94}

In the above response, we can see that the query returns a list of locations for the itinerary "itinerary/DEF456". Each location is represented by a node, which contains the ID, title, and position of the location in the itinerary. The "pageInfo" field contains information about the cursor and whether there is a next page of locations available.

It's important to note that the Alpaca Travel GraphQL API uses a cursor-based pagination approach. This means that if the total number of locations for an itinerary exceeds the number specified in the "first" parameter, the API will return a cursor in the "endCursor" field of the "pageInfo" object. To retrieve the next page of locations, you can pass this cursor as the "after" parameter in the "children" field in a subsequent query.

In summary, the Alpaca Travel GraphQL API allows developers to easily retrieve a list of locations for an itinerary, and to paginate and sort the results to meet their specific needs. By using the "itinerary" query and the "children" field, developers can retrieve the necessary information to display a list of locations in their application or website.

Enhancing Presentation

When presenting itineraries to users, it may be useful to tailor the presentation based on the type of itinerary and how it should be displayed. The Alpaca Travel GraphQL API offers several attributes that can be used to enhance the presentation of itineraries.

The "itinerary/type" attribute can be used to determine the type of itinerary and tailor the presentation accordingly. It will return "list", "trip" or "trail" if set. For example:

1query GetItineraryType {
2  itinerary(id: "itinerary/DEF456") {
3    id
4
5    # Determine the type of itinerary
6    type: attrValue(id: "itinerary/type")
7  }
8}

Sandbox: Configure | Try Operation

If successful, the response may look like the following:

1{
2  "data": {
3    "itinerary": {
4      "id": "itinerary/DEF456",
5      "type": "list"
6    }
7  }
8}

Additionally, you may choose not to display a corresponding number against each of the stops on an itinerary as they may imply an importance or sequential ordering which is not intended. For this, you can check the attribute "itinerary/list-presentation" in order to determine if the list is set to either "unordered" or "ordered".

1query GetItineraryListPresentation {
2  itinerary(id: "itinerary/DEF456") {
3    id
4
5    # Determine the list presentation of the itinerary
6    listPresentation: attrValue(id: "itinerary/list-presentation")
7  }
8}

Sandbox: Configure | Try Operation

If successful, the response may look like the following:

1{
2  "data": {
3    "itinerary": {
4      "id": "itinerary/DEF456",
5      "listPresentation": "ordered"
6    }
7  }
8}

It is important to note that the values of these attributes may not always be set, so developers should take that into consideration when using these attributes to enhance the presentation of itineraries. Additionally, developers should also consider the context and purpose of the itinerary when choosing how to present it to the users.

Querying Directions

When building an application or website that includes itineraries that include directions between locations, such as trip itineraries, you may want to enhance your list to provide directions between each of the locations. Alpaca provides enhancements to your query that can look between each of the locations for directions contained within the itinerary.

In order to query for directions between locations, you will need to include the "directions" field in your query.

Here is an example of how to query for directions between locations in an itinerary:

1query GetItineraryListWithDirections {
2  itinerary(id: "itinerary/ABC123") {
3    children(type: ItineraryLocation, first: 10) {
4      edges {
5        node {
6          id
7          title
8
9          siblingPositionNumber
10        }
11        # Additionally, query the routes between the locations as edge data,
12        # which will obtain directions from the itinerary that arrive (Inbound)
13        # to this location, from the last location in the edge sequence
14        directions(first: 1, direction: Inbound) {
15          nodes {
16            # Duration (in minutes)
17            durationMin
18            # Distance (in meters)
19            distance
20            # Access the route modes (e.g. Car, etc)
21            route {
22              segments {
23                mode
24              }
25            }
26          }
27        }
28      }
29
30      pageInfo {
31        hasNextPage
32        endCursor
33      }
34
35      totalCount
36    }
37  }
38}

Sandbox: Configure | Try Operation

If successful, as response may look like this:

1{
2  "data": {
3    "itinerary": {
4      "children": {
5        "edges": [
6          {
7            "node": {
8              "id": "itinerary/ABC123/location/49Mjaf7N7y6mHiCJRhuwOL",
9              "title": "Devonport",
10              "siblingPositionNumber": 1
11            },
12            "directions": {
13              "nodes": []
14            }
15          },
16          {
17            "node": {
18              "id": "itinerary/ABC123/location/3jatHEitBPH1aM4G8HX2Gr",
19              "title": "Sheffield",
20              "siblingPositionNumber": 2
21            },
22            "directions": {
23              "nodes": [
24                {
25                  "durationMin": 26.352466666666665,
26                  "distance": 29.165044,
27                  "route": {
28                    "segments": [
29                      {
30                        "mode": "Car"
31                      }
32                    ]
33                  }
34                }
35              ]
36            }
37          },
38          {
39            "node": {
40              "id": "itinerary/ABC123/location/1aP34WcskKnMmOpbAfTEkL",
41              "title": "Cradle Mountain",
42              "siblingPositionNumber": 3
43            },
44            "directions": {
45              "nodes": [
46                {
47                  "durationMin": 46.50026666666667,
48                  "distance": 54.270784,
49                  "route": {
50                    "segments": [
51                      {
52                        "mode": "Car"
53                      }
54                    ]
55                  }
56                }
57              ]
58            }
59          },
60          ...
61        ],
62        "pageInfo": {
63          "hasNextPage": false,
64          "endCursor": "eyJvZmZzZXQiOjZ9"
65        },
66        "totalCount": 7
67      }
68    }
69  }
70}

In this example, we are querying the itinerary with the ID "itinerary/ABC123" and asking for all the children of type "ItineraryLocation". Along with the basic information for each location such as the ID, title and the "siblingPositionNumber" which represents the position of the location in the list.

Additionally, we are querying for directions between the locations by using the "directions" field. We set the "direction" argument to "Inbound" which will obtain directions from the itinerary that arrive to this location, from the last location in the edge sequence. The response will contain the duration, distance and mode of transportation between each location.

By using this query, developers can enhance their list of locations with the additional information of directions, providing a more comprehensive and user-friendly experience for their users.

Note: you can also use the "first" argument to limit the number of directions returned in the query. Also, you can use the argument "direction" to retrieve the directions inbound or outbound, depending on the use case.

Location Content

When querying an itinerary, it is possible to retrieve information about the individual locations within the itinerary using the "children" operation. However, in some cases, it may be necessary to retrieve additional information about a specific location. This is where the "node" operation comes in handy.

Using the "node" operation, developers can make a specific query for an itinerary location to retrieve more detailed information about that location. The following example shows a query that retrieves information about a specific itinerary location using the "node" operation:

1query GetItineraryLocation {
2  # Use the node query to access an Itinerary Location node
3  node(id: "itinerary/ABC123/location/6DuqdpTlTwKFtOjA9zhYZY") {
4    id
5    __typename
6
7    # Node loads different types of objects, so we request fields for the
8    # Itinerary Location specifically
9    ... on ItineraryLocation {
10      title
11      synopsis
12
13      siblingPositionNumber
14    }
15  }
16}

Sandbox: Configure | Try Operation

The response will look similar to the following:

1{
2  "data": {
3    "node": {
4      "id": "itinerary/ABC123/location/6DuqdpTlTwKFtOjA9zhYZY",
5      "__typename": "ItineraryLocation",
6      "title": "Arthur River",
7      "synopsis": "As you cross the bridge, don't miss the view up the river.",
8      "siblingPositionNumber": 6
9    }
10  }
11}

It is important to note that when using the "node" operation, developers must specify the specific fields they want to retrieve for the itinerary location. This allows for more granular control over the information retrieved and can help to minimize unnecessary data retrieval.

In addition to the fields shown in the example above, developers can also retrieve other types of content related to the location, such as places of interest, arrival and departure directions, and more. It is recommended that developers only request the information they need in their queries and fetch additional information as needed.

It is important to be mindful of when to query the information; whether from the "children" call or seperately with the "node" call. The "children" call is useful when you want to retrieve a list of locations on the itinerary and their basic information, while the "node" call is useful when you want to retrieve more detailed information about a specific location.

Gallery

Each location can support a gallery of media objects, that can include things like images to display with the location.

The below query demonstrates loading the first series of images from a gallery.

1query GetItineraryLocationGallery {
2  node(id: "itinerary/ABC123/location/6DuqdpTlTwKFtOjA9zhYZY") {
3    __typename
4
5    # When fetching an itinerary location..
6    ... on ItineraryLocation {
7      title
8      synopsis
9
10      # Load the first 3 images of the gallery
11      mediaContainers(first: 3) {
12        edges {
13          node {
14            id
15            resource {
16              __typename
17              ... on MediaImage {
18                thumbnail: url(bestFit: [200, 200])
19                large: url(bestFit: [800, 800])
20                attribution
21                caption
22              }
23            }
24          }
25        }
26        pageInfo {
27          hasNextPage
28          endCursor
29        }
30        totalCount
31      }
32    }
33  }
34}

Sandbox: Configure | Try Operation

The response now includes an gallery information to display for the location:

1{
2  "data": {
3    "node": {
4      "__typename": "ItineraryLocation",
5      "title": "Arthur River",
6      "synopsis": "As you cross the bridge, don't miss the view up the river.",
7      "mediaContainers": {
8        "edges": [
9          {
10            "node": {
11              "id": "itinerary/ABC123/location/6DuqdpTlTwKFtOjA9zhYZY/media-container/31456c91c6f2fabad9ec21d515629f20",
12              "resource": {
13                "__typename": "MediaImage",
14                "thumbnail": "https://media-cdn.alpacamaps.com/uploads/11/6d6MmLWncZdobgf5Hu8ApM/IMG_10744/small_m225w_m200h.jpeg",
15                "large": "https://media-cdn.alpacamaps.com/uploads/11/6d6MmLWncZdobgf5Hu8ApM/IMG_10744/large_1024h.jpeg",
16                "attribution": "Source: Zoe Manderson",
17                "caption": "Looking upstream the river"
18              }
19            }
20          }
21        ],
22        "pageInfo": {
23          "hasNextPage": false,
24          "endCursor": "eyJvZmZzZXQiOjB9"
25        },
26        "totalCount": 1
27      }
28    }
29  }
30}

Place Information

Each location has a place associated with it. This place can represent a simple position like a map marker, or could be attached to a place or address that has more information available to read in.

Alpaca is integrated with a number of place providers. The supported place providers enable information about the place to be kept up to date, such as when information about opening hours are updated or contact details.

Fetching Inbound/Outbound Directions

The ItineraryLocation type offers a mechanism to search for itinerary directions when you are loading them individually, opposed to searching between locations within a list.

1query GetItineraryLocationDirections {
2  node(id: "itinerary/ABC123/location/6DuqdpTlTwKFtOjA9zhYZY") {
3    id
4    __typename
5
6    # When querying the itinerary location individually
7    ... on ItineraryLocation {
8      # Search for directions used to arrive here from other itinerary locations
9      arriveFrom: directions(first: 1, direction: Inbound) {
10        nodes {
11          origin {
12            ... on ItineraryLocation {
13              id
14              title
15            }
16          }
17          distance
18          durationMin
19          route {
20            modes
21          }
22        }
23        totalCount
24      }
25
26      # Search for directions used to depart here to other itinerary locations
27      departTo: directions(first: 2, direction: Outbound) {
28        nodes {
29          parent {
30            ... on ItineraryLocation {
31              id
32              title
33            }
34          }
35          distance
36          durationMin
37          route {
38            modes
39          }
40        }
41        totalCount
42      }
43    }
44  }
45}

Sandbox: Configure | Try Operation

The above can look directions that can link locations between where it was coming from, and where it is departing to.

1{
2  "data": {
3    "node": {
4      "id": "itinerary/ABC123/location/6DuqdpTlTwKFtOjA9zhYZY",
5      "__typename": "ItineraryLocation",
6      "arriveFrom": {
7        "nodes": [
8          {
9            "origin": {
10              "id": "itinerary/ABC123/location/3ZPvzV7WyAalXWo6hJijBJ",
11              "title": "Corinna"
12            },
13            "distance": 95.459772,
14            "durationMin": 79.61751666666667,
15            "route": {
16              "modes": ["Car"]
17            }
18          }
19        ],
20        "totalCount": 1
21      },
22      "departTo": {
23        "nodes": [
24          {
25            "parent": {
26              "id": "itinerary/ABC123/location/7BuzRTLQYH4rWBoIPh2UvV",
27              "title": "Boat Harbour"
28            },
29            "distance": 91.74235300000001,
30            "durationMin": 66.4878,
31            "route": {
32              "modes": ["Car"]
33            }
34          }
35        ],
36        "totalCount": 1
37      }
38    }
39  }
40}

Creating Context around a Location

Creating context around a location is essential for building good travel planning experiences. By providing users with information about their surroundings, such as distances and estimated travel times for different modes of transport, isochrone representations of distance and duration, and bearings, compass, line of sight distances, developers can help users to understand their location and plan their movements effectively. This can greatly enhance the user's travel experience by providing them with the necessary information to understand their location and plan their itinerary more effectively. To learn more about how to create context for your users, refer to our guide on Place Context

Drawing Maps

Many options are available for you to work with drawing itinerary content onto various mapping platforms.

From the GraphQL API calls, you can include fields to extract information from the API directly for the itinerary content.

The below example shows fields that can be queried in order to locate key mapping positions and route paths for directions:

1query GetItineraryMapData {
2  itinerary(id: "itinerary/ABC123") {
3    id
4
5    # Read in the stops
6    children(first: 10, type: ItineraryLocation, after: null) {
7      edges {
8        node {
9          id
10          ... on ItineraryLocation {
11            # Load the longitude/latitude
12            # Alpaca uses EPSG:3857/WGS 84 CRS
13            position {
14              lon
15              lat
16            }
17          }
18        }
19
20        directions(first: 1, direction: Inbound) {
21          edges {
22            node {
23              route {
24                segments {
25                  # Use the polyline field to access a polyline encoded
26                  # representation of the route path
27                  polyline
28                }
29              }
30            }
31          }
32        }
33      }
34
35      pageInfo {
36        hasNextPage
37        endCursor
38      }
39
40      totalCount
41    }
42  }
43}

Sandbox: Configure | Try Operation

An example of the output expected is shown below

1{
2  "data": {
3    "itinerary": {
4      "id": "itinerary/ABC123",
5      "children": {
6        "edges": [
7          {
8            "node": {
9              "id": "itinerary/ABC123/location/49Mjaf7N7y6mHiCJRhuwOL",
10              "position": {
11                "lon": 146.37010715588758,
12                "lat": -41.18011907368838
13              }
14            },
15            "directions": {
16              "edges": []
17            }
18          },
19          {
20            "node": {
21              "id": "itinerary/ABC123/location/3jatHEitBPH1aM4G8HX2Gr",
22              "position": {
23                "lon": 146.32474076543986,
24                "lat": -41.382109677628286
25              }
26            },
27            "directions": {
28              "edges": [
29                {
30                  "node": {
31                    "route": {
32                      "segments": [
33                        {
34                          "polyline": "..."
35                        }
36                      ]
37                    }
38                  }
39                }
40              ]
41            }
42          },
43          ...
44        ],
45        "pageInfo": {
46          "hasNextPage": false,
47          "endCursor": "eyJvZmZzZXQiOjZ9"
48        },
49        "totalCount": 7
50      }
51    }
52  }
53}

Alpaca Mapping Services

Alpaca provide mapping services that can be used to create great interactive maps that interact with itinerary content. You can use any preferred mapping environment (such as mapbox, google, leaflet or more) in order to create presentation of your map.

These services also include offering:

• Itinerary GeoJSON

• Hosted Vector Tiles

• SVG Paths

View Alpaca Mapping Service Documentation

Mapbox GL Example Code

Alpaca have created examples of how to quickly create mapbox maps that display the itineraries. These examples shows how to quickly leverage the Alpaca map styles, create your own style and even create more complicated 3D visualisations of your content using the Mapbox API.

View Alpaca Mapbox Examples

Creating and Managing Itineraries

It is also possible to create applications and website functionality built around creating and managing itineraries via the GraphQL API. This functionality allows developers to issue mutations to the API and create content.

This could have relevance for integrating within content management systems or building website trip planning or favouriting functionality.

To understand more about this functionality, you can refer to to the following resources:

• Managing a List Build curated list content, such as top-10's, favorites or other lists.

• Managing a Trip Build trips, allowing users to plan out stops along a route.