Leaflet example

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 platform tiles. More extensive tutorials on using Leaflet can be found here.

Setting up maps on your page with TravelTime platform 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: js <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: js #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 platform tile layer to the map. Code below has the tiles server URL which includes the tiles style, in this case it’s positron and your access key should replace the YOUR_APPLICATION_ID string. Please note, that tiles are not available by default or with the free API key. To gain authentification please contact us at support@igeolise.com. Use of attribution is required to meet OpenStreetMap and TravelTime platform copyright requirements.

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

    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 below. After entering your API authentification data to the APPLICATION_ID and API_KEY you will be able to not only see tiles, but will be able to test TravelTime platform API as well.

    See the Pen Tiles test and isochrone drawing by iGeolise (@igeolise) on CodePen.