Migrate from Google Maps to TomTom
Overview
This tutorial covers some very basic use cases to help you switch from Google's APIs to TomTom's as quickly as possible. It starts with basic environment setup, then dives into the code. At the very bottom of the page is a recommended reading list to allow you to build on the foundations provided by this tutorial.
This tutorial covers:
Prerequisites
To start using the TomTom Maps SDK for Web, you need the following:
- An SDK that can be downloaded from here: Downloads. Unzip it and save it in a folder. This tutorial assumes your folder is named ‘sdk’. If you choose another name, remember to change the provided paths to match.
Check out the current file structure
. └── sdk-tutorial └── sdk ├── LICENSE.txt ├── README.md ├── glyphs ├── images ├── map.css ├── mapbox-gl-js ├── sprites ├── styles ├── tomtom.min.js └── tomtom.min.js.map
- API key
Displaying a map
Below is a minimal HTML structure containing the JS code to initialize and display a TomTom map:
<!DOCTYPE html>
<html>
<head>
<title>My map</title>
<link rel='stylesheet' type='text/css' href='sdk/map.css'/>
<script src='sdk/tomtom.min.js'></script>
<style>
#map {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
tomtom.L.map('map', {key: '<your-api-key>'});
</script>
</body>
</html>
To run this example locally, name it index.html and save it in the sdk-tutorial. Replace ‘<your-api-key>‘
with the API key you obtained as shown in the Prerequisites section.
Check out the current file structure
. └── sdk-tutorial ├── index.html └── sdk ├── LICENSE.txt ├── README.md ├── glyphs ├── images ├── map.css ├── mapbox-gl-js ├── sprites ├── styles ├── tomtom.min.js └── tomtom.min.js.map
Test your progress so far by opening your index.html file in a browser. You should see a map. If not, use developer mode (press F12) to check for console errors.
Initializing a map
Below is code to initialize a map using a defined center point and zoom level.
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 37.769167, lng: -122.478468},
zoom: 15
});
TomTom
var map = tomtom.L.map('map', {
key: '<your-api-key>',
basePath: 'sdk',
center: [37.769167, -122.478468],
zoom: 15
});
The code for both is quite similar:
- Both create a variable to refer to later.
- Both use
‘center’
and‘zoom’
as properties. - Both require the ID of an element to contain the map (in this example,
'map'
).
The TomTom Maps SDK for Web requires a ‘key’
property for your API key and ‘basePath’
with the SDK directory. In addition, the TomTom Maps SDK for Web expresses coordinates as an array rather than an object with properties.
Displaying traffic
The next step is to add a traffic layer to the map.
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
TomTom
TomTom provides two services that offer traffic information:
- Traffic flow shows the difference between current and free flow speed. Green indicates that the speeds are the same, meaning there are no traffic jams. Red indicates that traffic is much slower than free flow, meaning that there are traffic jams.
- Traffic incidents indicates specific traffic problems such as closed roads, rain, ice on the road, or accidents.
The code below displays both types of traffic data:
var trafficLayer = new tomtom.L.TomTomTrafficLayer();
map.addLayer(trafficLayer);
var trafficFlowLayer = new tomtom.L.TomTomTrafficFlowLayer();
map.addLayer(trafficFlowLayer);
This is one of the ways to add a traffic layer dynamically to your map – for example at a user’s request. If you know beforehand that you want to present a map with traffic layer when initializing it, then it might be easier to request traffic layers in the map initialization.
var map = tomtom.L.map('map', {
key: '<your-api-key>',
basePath: 'sdk',
center: [37.769167, -122.478468]
zoom: 15,
traffic: true,
trafficFlow: true
});
Displaying a marker
var marker = new google.maps.Marker({
position: { lat: 37.768454, lng: -122.492544 },
map: map
});
TomTom
var marker = tomtom.L.marker([37.768454, -122.492544]).addTo(map);
The next step is to allow your user to interact with the map by clicking on a marker to summon an information popup.
var infowindow = new google.maps.InfoWindow({
content: 'my marker'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
TomTom
marker.bindPopup('my marker');
Displaying a route/directions
Here’s how to display a route from point A to point B on the map. Google's name for this service is "directions". We just call it routing (Routing API).
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
var request = {
origin: new google.maps.LatLng(37.768014, -122.510601),
destination: new google.maps.LatLng(37.769167,-122.478468),
travelMode: 'DRIVING'
};
directionsService.route(request, function(response, status) {
if (status == 'OK') {
directionsDisplay.setDirections(response);
}
});
To display a route with Google requires you to define two services: one to ask for a route from A to B and another to render it on the map.
TomTom
The TomTom Maps SDK for Web provides a single method for the entire process.
tomtom.routing()
.locations('37.7683909618184,-122.51089453697205:37.769167,-122.478468')
.go().then(function(routeJson) {
var route = tomtom.L.geoJson(routeJson, {
style: {color: '#00d7ff', opacity: 0.6, weight: 6}
}).addTo(map);
map.fitBounds(route.getBounds(), {padding: [5, 5]});
});
The only required parameters for the routing call are the start and end points, separated by a colon. If more colon-separated coordinates are provided, the ones in the middle will be used as intermediate locations (waypoints). By default, the route will be calculated for a car, but this and many other parameters can be changed. See the Maps Web SDK Documentation - Routing for complete details of routing parameters and filters.
Call the routing service by executing .go()
function. The result will be returned as GeoJSON containing a 'LineString' feature. This is a (poly)line that can be added to a map, with defined properties like color, opacity, and weight.
Then call 'fitBounds' to center the map on the route.
The code above generates a polyline, but no markers. Developers have a lot of freedom to display the route, but if a start and end marker are required, they can be added in the same way as the "pop-up marker" above:
tomtom.L.marker([37.769167, -122.478468]).addTo(map);
tomtom.L.marker([37.768014, -122.510601]).addTo(map);
You can find more information about markers, including how to customize them, in the Maps SDK for Web functional examples.
Final result:
You can find full HTML file here: on github.
Summary
Using this tutorial, you should have converted an application from using the Google Maps JavaScript API to using the TomTom Maps SDK for Web. Now you have a map with fresh and accurate traffic information, on which you can easily plan many kinds of route. Pretty cool, right?
Now you're ready to explore more awesome TomTom functionality with some more advanced tutorials and examples:
- Displaying vector map
- Creating a custom vector map style
- Creating custom glyphs
- Functional examples - Switching map tiles
- Functional examples - Traffic layers
- Functional examples - Static route
- Functional examples - Routing from my location
- Functional examples - Waypoints
- Functional examples - Search