Leaflet

1// ... Create a leaflet "map" before here
2
3// Update YOUR_ACCESS_TOKEN and the itinerary/XXX with your details
4const url =
5  "https://mapping.withalpaca.travel/v1/itinerary/XXX.geojson?accessToken=YOUR_ACCESS_TOKEN";
6
7// Fetch the Itinerary GeoJSON from the mapping service
8fetch(url)
9  .then(res => res.json())
10  .then(data => {
11    // Add the data you have loaded into a leaflet GeoJSON layer
12    // Refer to the reference documentation for working with styling itineraries
13    L.geoJSON(data, {
14      // You can filter out what features you want to include
15      filter: function(feature, layer) {
16        // For instance, we can just include markers
17        return feature.properties.class === 'location_marker';
18      }
19
20      // You can create circle markers using pointToLayer
21      pointToLayer: function(feature, latlng) {
22        return L.circleMarker(latlng, {
23          radius: 8,
24          fillColor: "#ff7800",
25          color: "#000",
26          weight: 1,
27          opacity: 1,
28          fillOpacity: 0.8
29        });
30      },
31
32      // Or style the features
33      style: function (feature) {
34        // Style your feature here..
35        // You can refer to the reference documentation on the structure
36        // of features, and what information is available.
37      }
38    }).bindPopup(function (layer) {
39      // Bind information that is available in the geojson feature
40      return layer.feature.properties.label;
41    }).addTo(map);
42  });

1https://mapping.withalpaca.travel/v1/itinerary/abc/{z}/{x}/{y}.vector.pbf?scheme=tms&accessToken=YOUR_ACCESS_TOKEN