Was this helpful?
Mapbox provides a thoroughly customisable environment for developing interactive maps. Data is provided in native formats to style into your mapbox maps.
Mapbox provides a number of products to assist developers work with interactive
maps. Various mapping clients are provided to cover web and mobile
development environments.
Alpaca provides data to developers working with Mapbox to make presenting the content easier.
Developers may consider using GeoJSON or the Alpaca hosted Vector Tiles
which can be easily added as a source of their map or map style. Additionally,
developers can interact with the GraphQL API which provides access to
interactively query their Itinerary and access geometry through queries.
geojson or vector style sourceWhen making requests to either GraphQL or resources hosted on Alpaca, you must
provide your accessToken.
GeoJSON enables obtaining a full verbose data set for styling. Mapbox can add GeoJSON directly via adding it to your map style as a data source.
Adding GeoJSON to mapbox-gl JS
The Mapbox GL JS API can add a full geojson document directly to the map via the
addSource API call.
1map.addSource("itinerary", {
2 // Use the source type of 'geojson`
3 type: "geojson",
4 // Provide the URL to the hosted geojson
5 // Note: Update with your Itinerary ID and accessToken
6 data: "https://mapping.withalpaca.travel/v1/itinerary/XXX.geojson?accessTokenYOUR_ACCESS_TOKEN",
7});Adding GeoJSON to a Mapbox Style
When working with a Mapbox Style, you can also add the itinerary geojson
directly as a source.
1"itinerary": {
2 "type": "geojson",
3 "data": "https://mapping.withalpaca.travel/v1/itinerary/XXX.geojson?accessToken=YOUR_ACCESS_TOKEN"
4}Note: You will need to update the above data URL with the correct itinerary id
and accessToken.
Alpaca provides hosted vector tiles via its' CDN. In order to use the vector
tiles, you will need to add a vector source and direct it to the tilejson
file which contains information about where to obtain the tiles.
Adding Vector Tiles to mapbox-gl JS
1map.addSource("itinerary", {
2 // Use the source type of 'vector`
3 type: "vector",
4 // Provide the URL to the hosted tilejson
5 // Note: Update with your Itinerary ID and accessToken
6 url: "https://mapping.withalpaca.travel/v1/itinerary/XXX.tilejson?scheme=xyz&accessToken=YOUR_ACCESS_TOKEN",
7 // Important to include the scheme of 'xyz'
8 scheme: "xyz",
9});Adding Vector Tiles to a Mapbox Style
When working with a Mapbox Style, you can also add the itinerary vector tiles
directly as a source.
1"itinerary": {
2 "type": "vector",
3 "data": "https://mapping.withalpaca.travel/v1/itinerary/XXX.tilejson?scheme=xyz&accessToken=YOUR_ACCESS_TOKEN",
4 "scheme": "xyz"
5}Note: You will need to update the above data URL with the correct itinerary id
and accessToken.
Mapbox maps are styled by first adding sources and then adding layers which
target features from sources and renders them on to the map.
The above section describes common ways of adding the sources to your mapbox style, but you will need to then understand how to select data from the source to present the features you desire to show users.
The best place to start is the Mapbox examples or by refering to the Mapbox style specification.
Once you become familiar with the concepts of styling, you will want to refer to Working with GeoJSON and Vector Tiles to understand what data is available to select and style.
Alpaca also offers a default style that can be used to style mapbox out of the box. You can use the default style to quickly leverage the Mapbox API on top of an Alpaca map style and data.
1https://mapping.withalpaca.travel/v1/itinerary/XXX.json?accessToken=YOUR_ACCESS_TOKENToken.
1mapboxgl.accessToken = "<your mapbox access token here>";
2const map = new mapboxgl.Map({
3 container: "map", // container ID
4 // update the below with your alpaca itinerary id and alpaca access token
5 style:
6 "https://mapping.withalpaca.travel/v1/itinerary/XXX.json?accessToken=YOUR_ACCESS_TOKEN",
7});Mapbox provides a number of examples that can assist developers working to create and style maps.
Copyright © 2024 - Made with love ❤️ in Australia.