Integrate interactive itineraries into your applications
Adding Itinershary collections and itineraries to your web application is straightforward and requires minimal effort.
Get the Itinershary library for Javascript itinershary.umd.js and the Itinershary style.css file from our download repository and add them to your project.
Include the required libraries Mapbox GL, jQuery, Purify as in below code snippet.
Add your public Mapbox access token and Itinerary ID or Collection ID when instantiating the Itinershary object. You need a Mapbox account for this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Itinershary as library</title>
<!-- IMPORTS -->
<link rel="stylesheet" href="itinershary.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mapbox-gl@3/dist/mapbox-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
<script src="itinershary.umd.js"></script>
</head>
<body>
<div
id="iti-1"
style="width: 1000px; height: 600px; margin: 5px auto;"
></div>
<script>
// Insert your own mapbox access token here
const mapboxAccessToken = '<YOUR_MAPBOX_ACCESS_TOKEN>';
// Load itineraries
new itinershary.Itinershary($('#iti-1')).load(
'<YOUR_ITINERARY_ID>',
mapboxAccessToken
);
</script>
</body>
</html>
The easiest way to add an Itinershary collection or itinerary to your website is via an iFrame. This does not require a separate Mapbox access token, but only your itinerary or collection URL. This URL is then added to the below code snippet as the src-parameter value.
<iframe src="https://itinershary.net/itineraries/?id=657d7ab764a930.52855830" title="Urban Theme"></iframe>
White labelling is only supported for our enterprise customers. Please get in touch if you are interested!