Building with Itinershary
Option 1: Add Itinershary to your website using the Itinershary Javascript Library
Adding Itinershary collections and itineraries to your web application is straightforward and requires minimal effort. This is how you get it done:
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. (see code snippet below for reference) 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>
Option 2: Add Itinershary to your website using an iFrame
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>
Itinerary embedded as iFrame
White labelling
White labelling is only supported for our enterprise customers. Please get in touch if you are interested!