TomTom Maps Integration
This tutorial covers some very basic use cases to help you switch from Google's Maps APIs to TomTom's as quickly as possible. It starts with basic environment setup, then dives into the code.
This tutorial covers:
- Getting a TomTom maps API Key
- JavaScript to Implement
Download TomTom Maps SDK for Web
Chosse all the Api's
All set up. You can now click on your newly created app and copy your API key:
- You can download a SDK from here.Select the Version and click Download
- To create a new API key you need to first register on the portal. Once you are logged in there are only two steps remaining:
Chosse all the Api's
All set up. You can now click on your newly created app and copy your API key:
Initializing a map
Below is code to initialize a map using a defined center point and zoom level.
Below is code to initialize a map using a defined center point and zoom level.
If the Map was Loaded into wedpage then the basic Part was completed successfully.<!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>
the Above portion of code is to locate you location in map with Flag and Zoom is the Zoom level as you perfered and the present live traffic condition at you locationvar map = tomtom.L.map('map', {key: '<your-api-key>',basePath: 'sdk',center: [37.769167, -122.478468]zoom: 15,traffic: true,trafficFlow: true});
The above two line allow your user to interact with the map by clicking on a marker to summon an information popup.var marker = tomtom.L.marker([37.768454, -122.492544]).addTo(map);marker.bindPopup('my marker');
Copy full HTML Code and you need to provide api key and your location then all sets successful
