Map Tiles Leaflet

Copy link

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

Copy link

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.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""/>

• Include Leaflet JavaScript file after Leaflet’s CSS:

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
    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 a TravelTime tile layer to the map. The tiles server URL includes the tile style — available options are osm-bright and positron. Replace YOUR_APP_ID with your access key. Note that tiles are not available with the free API key. To request access, contact us at hello@traveltime.com. Attribution is required to comply with OpenStreetMap and TravelTime copyright requirements.

Tile layer with OSM Bright style

Copy link

L.tileLayer('https://tiles.traveltimeapp.com/osm-bright/{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: 22,
  tileSize: 256,
  }).addTo(mymap);

Tile layer with Positron style

Copy link

L.tileLayer('https://tiles.traveltimeapp.com/positron/{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: 22,
  tileSize: 256,
  }).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.