• JavaScript
  • HTML
                  
                  

/**
 * Shows the search results from the electric vehicle charging stations layer
 * provided by Platform Data Extension REST API
 * https://developer.here.com/platform-extensions/documentation/platform-data/topics/introduction.html
 *
 * @param {Array.} linkids Array of the LINK_IDs received from the routing service
 * @param {H.map.Polyline} polyline route polyline
 */
function findStations(linkids, polyline) {
  var service = platform.getPlatformDataService();

  // Create a search request object fir the EVCHARGING_POI layer with the bounding box of the polyline
  service.searchByBoundingBox(
    ['EVCHARGING_POI'],
    ['LINK_ID'],
    polyline.getBoundingBox(),
    (table) => {
      table.forEach((row) => {
        if (linkids.indexOf(row.getCell('LINK_ID')) !== -1) {
          map.addObject(new H.map.Marker(row.getCell('WKT').getGeometries()[0], {icon: icon}));
        } else {
          map.addObject(new H.map.Marker(row.getCell('WKT').getGeometries()[0], {icon: icon2}));
        }
      })
    },
    (error) => {
        console.log(error)
    }
  );
}

/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
// In your own code, replace variable window.apikey with your own apikey
var platform = new H.service.Platform({
  apikey: window.apikey
});
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.vector.normal.map, {
  pixelRatio: window.devicePixelRatio || 1
});
// add a resize listener to make sure that the map occupies the whole container
window.addEventListener('resize', () => map.getViewPort().resize());

//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);

// create the icon that's reused for the on the route charging stations
var svg =
      '' +
      '' +
      '' +
      '' +
      '';
var options = {
  'size': new H.math.Size(28, 36),
  'anchor': new H.math.Point(14, 32),
  'hitArea': new H.map.HitArea(
      H.map.HitArea.ShapeType.POLYGON, [0, 16, 0, 7, 8, 0, 18, 0, 26, 7, 26, 16, 18, 34, 8, 34])
};
icon = new H.map.Icon(svg, options);
icon2 = new H.map.Icon(svg.replace('#090', '#009'), options);

// Obtain routing service and create routing request parameters
var router = platform.getRoutingService(),
    routeRequestParams = {
      mode: 'fastest;car',
      representation: 'display',
      legattributes:'li',
      waypoint0: '52.50052646372371,13.313066285329796',
      waypoint1: '52.50386005040791,13.331453146169224',
      waypoint2: '52.50859501989751,13.377073412022032'
    };

// calculate route
router.calculateRoute(
  routeRequestParams,
  function(response) {
    var lineString = new H.geo.LineString(),
        route = response.response.route[0],
        routeShape = route.shape,
        polyline,
        linkids = [];

    // collect link ids for the later matching with the PDE data
    route.leg.forEach(function(leg) {
      leg.link.forEach(function(link) {
        linkids.push(link.linkId.substring(1));
      });
    })

	// create route poly;line
    routeShape.forEach(function(point) {
      var parts = point.split(',');
      lineString.pushLatLngAlt(parts[0], parts[1]);
    });
    polyline = new H.map.Polyline(lineString, {
      style: {
        lineWidth: 8,
        strokeColor: 'rgba(0, 128, 255, 0.7)'
      },
      arrows: new H.map.ArrowStyle()
    });

    map.addObject(polyline);
    map.getViewModel().setLookAtData({
      bounds: polyline.getBoundingBox()
    });

    findStations(linkids, polyline)
  },
  function() {
    alert('Routing request error');
  }
);
                  
                
                  
                  
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    
    <title>Data Matching with the Advanced Data Sets</title>
    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  <script type="text/javascript" src='../js-examples-rendering-helpers/iframe-height.js'></script></head>
  <body id="markers-on-the-map">

    <div class="page-header">
        <h1>Data Matching with the Advanced Data Sets</h1>
        <p>Match routing result with the Advanced Data Set.</p>
    </div>
    <p>
        This example displays a movable map that contains the route polyline and the data about the location 
        of electric vehicle charging stations provided by the <a href="https://developer.here.com/documentation/platform-data/topics/what-is.html" target="_blank">Fleet Telematics Advanced Data Sets REST API</a>. 
        The search for the nearest charging stations is made by the polyline's bounding box. Stations that are adjacent to the route itself are marked with green.
    </p>
    <div id="map"></div>
    <h3>Code</h3>
    <p>
      The example uses <code>H.service.extension.platformData.SearchRequest</code> 
      class to fetch data from the Platform Data Extension service. The <code>data</code> event listener matches the provided array of 
      <code>LINK_IDs</code> from the routing service and search results from the Platform Data Extension layer 
      to apply correct colour to the <code>H.map.Marker</code>.</p>
    <script type="text/javascript" src='demo.js'></script>
  </body>
</html>