Map Tiles Leaflet

For interactive map development we suggest using open-source JavaScript library Leaflet. It's a lightweight, feature-rich library which can be extended with lots of plugins.

Here is a short guide on how to add a map to your project using Leaflet and TravelTime tiles. More extensive tutorials on using Leaflet can be found here.

Setting up maps on your page with TravelTime tiles

To get the interactive map to work, first of all you’ll need to include CSS code needed for your page to access leaflet.js, then define elements, map size, default zoom parameters and focus point of the map.

• Include Leaflet CSS file in the head section of your document:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin=""/>

• Include Leaflet JavaScript file after Leaflet’s CSS:

<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>

• Put a div element with a certain id where you want your map to be:

<div id="mapid"></div>

• Define map container height, for example by setting it in CSS:

#mapid { height: 180px; }

• To initialize the map, set the inital geographical position of the map and a zoom level:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

• Add TravelTime tile layer to the map. Code below has the tiles server URL which includes the tiles style, in this case it’s lux and your access key should replace the YOUR_APP_ID string. Please note, that tiles are not available by default or with the free API key. To gain authentification please contact us at sales@traveltime.com. Use of attribution is required to meet OpenStreetMap and TravelTime copyright requirements.

L.tileLayer('https://tiles.traveltime.com/lux/{z}/{x}/{y}.png?key=YOUR_APP_ID', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> | Created with <a href="http://traveltime.com" target="_blank">TravelTime API</a>',
  maxZoom: 18,
  tileSize: 512,
  zoomOffset: -1
  }).addTo(mymap);

It is important to add 'tileSize: 512', 'maxZoom: 18' and 'zoomOffset: -1' parameters for tiles to be displayed correctly on Leaflet.

After doing all of these steps you should have a working map with mouse, touch interactions working as well as zoom and attribution control.

More extensive tutorials on using Leaflet can be found here.

Test example on CodePen

Feel free to test tile styles and performance on a CodePen windown provided here. After entering your API authentification data to the APP_ID and APP_KEY you will be able to not only see tiles, but will be able to test TravelTime API as well.