Traffic Information

Display traffic information on the map

HTML

<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- BODY -->
<h1>Traffic Information</h1>
<p>This example displays current traffic information in <b>New York</b>. Traffic incidents such as construction work are also included.  Freely flowing traffic routes are shown in green, moderate congestion is shown in yellow and high congestion routes in red. Black routes indicate road closures. <br><br>Traffic incident information is shown on top of the map as collection of markers with different icons per incident category (see <a target="_blank" rel="nofollow" href="http://developer.here.com/javascript-apis/documentation/v3/maps/topics/traffic.html#traffic__traffic-incidents">User Guide</a> for more information).</p>
<hr/>
<div id="map" style="width: 600px; height: 400px; background: grey"></div>

CSS

code, h1, h2, h3{
  color: #124191;
  letter-spacing: -0.03em;
}
body {
  font-family:"Lucida Grande",Tahoma,sans-serif;
  color: rgb(102, 102, 102);
  font-size: 80%;
}
b, strong {
  color: black;
}
code {
  font-weight: 700;
  font-size: 120%;
}

JavaScript

function enableTrafficInfo (map) {
  // Center map on New York
  map.setCenter({lat: 40.74007175329128, lng: -73.8701876028157});
  map.setZoom(11);

  // Show traffic tiles
  map.setBaseLayer(defaultLayers.normal.traffic);

  // Enable traffic incidents layer
  map.addLayer(defaultLayers.incidents);
}

/**
 * Boilerplate map initialization code starts below:
 */
// Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true,
  useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();

// Step 2: initialize a map  - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'), defaultLayers.normal.map);




// Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Now enable traffic tiles and traffic incidents
enableTrafficInfo(map);

$('head').append('<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" type="text/css" />');