トラフィックデータを取得して表示します

The Maps API for JavaScript traffic component enables you to seamlessly integrate real-time traffic flow and traffic incident data into your map application. By utilizing the provided traffic overlay, you can create an interactive map that enables users to stay informed about current traffic conditions in their desired locations.

The following example demonstrates how Maps API for JavaScript displays traffic data on a map centered on an area of Piccadilly Circus, London:

トラフィックフローデータを表示するマップ
図 1. トラフィックフローデータを表示するマップ

As shown in the preceding example, the Maps API for JavaScript uses different color-coding for the following levels of road congestion:

  • Green: Roads with smooth traffic flow.
  • Orange: Roads with moderate congestion.
  • Red: Congested roads.

In addition to the traffic flow, the API also provides traffic incidents data in the form of preconfigured markers on the map for various types of traffic incidents.

To display the traffic data, the Maps API for JavaScript utilizes the HERE Traffic API, which provides map tiles with up-to-date traffic information. The traffic overlay is automatically integrated into the default layer collection, which is provided by the createDefaultLayers() method on the H.service.Platform instance.

Render the traffic overlay on a map

To render the traffic overlay, you need to ensure that your map is properly initialized by using the defaultLayers object provided by the Maps API for JavaScript. The defaultLayers object contains pre-configured layers, including the traffic overlay (vector.traffic.map).

The following code snippet creates a sample map by using the defaultLayers object. To display traffic data on top of a map, retrieve and add the vector.traffic.map overlay from the collection of default layers:

// Step 1: Obtain the platform object
const platform = new H.service.Platform({
    apikey: 'YOUR_API_KEY'
});

// Step 2: Create a default layers object
const defaultLayers = platform.createDefaultLayers();

// Step 3: Create the map using the default layers
const map = new H.Map(
    document.getElementById('mapContainer'),
    defaultLayers.vector.normal.map,
    {
        center: { lat: 51.50995, lng: -0.134496 }, // Coordinates for London, Great Britain
        zoom: 15
    }
);

// Step 4: Add the behavior control
const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Step 5: Add the traffic overlay to the map
map.addLayer(defaultLayers.vector.traffic.map);

Customize the refresh interval for the traffic layer

In addition to displaying real-time traffic data on your map, the Maps API for JavaScript enables you to define a refresh interval for the traffic layer. You can define this interval based on your application's needs, ensuring that your users receive the most up-to-date traffic information at a frequency that suits your use case.

To customize the refresh interval for the traffic layer, create a custom function as shown in the following example, and then adjust the refreshInterval variable to your needs. The interval is specified in milliseconds. For example, to update the traffic layer every one minute (60 seconds), you can set the refresh to 60 * 1000.

// Function to update traffic layer
function updateTrafficLayer() {
    // Get the provider instance from the layer
    const provider = defaultLayers.vector.traffic.map.getProvider();
    // Invalidate provider's data and force reload
    provider.reload(true);
}

// Refresh traffic layer every 1 minute (60 seconds)
const refreshInterval = 60 * 1000; // 60 seconds in milliseconds
setInterval(updateTrafficLayer, refreshInterval);

Enable toggling of traffic data

Alternatively, you can provide an option for the users to show or hide traffic-related information through the MapSettingsControl which is part of the default UI controls available in Maps API for JavaScript.

By incorporating the MapSettingsControl with options to show or hide traffic-related information, you can offer a more personalized, clutter-free, and responsive experience, catering to users' preferences and diverse needs.

  1. Within the <head> object of your HTML file, include the mapsjs-ui.js library and the mapsjs-ui.css style for UI controls:

     <script type="text/javascript" charset="utf-8" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" ></script>
     <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />

  2. Within the <script> object of your HTML file, use the H.ui.UI.createDefault() method to create and add the default UI controls, including the controls for displaying traffic data and incidents, to your map, as shown in the following example:

     // Step 1: Obtain the platform object
 const platform = new H.service.Platform({
 apikey: 'YOUR_API_KEY'
 });

 // Step 2: Create a default layers object
 const defaultLayers = platform.createDefaultLayers();

 // Step 3: Create the map using the default layers
 const map = new H.Map(
 document.getElementById('mapContainer'),
 defaultLayers.vector.normal.map,
 {
     center: { lat: 51.50995, lng: -0.134496 }, // Coordinates for London, Great Britain
     zoom: 15
 }
 );

 // Step 4: Add the behavior control
 const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

 // Step 5: Create the default UI and add it to the map
 const ui = H.ui.UI.createDefault(map, defaultLayers);

Result: Users can now display or hide traffic data, as shown in the following example:

Toggling traffic data through MapSettingsControl
Figure 2. Toggling traffic data through MapSettingsControl

次のステップ

「」に一致する結果は 件です

    「」に一致する結果はありません