{"id":3285,"date":"2020-08-26T16:41:23","date_gmt":"2020-08-26T16:41:23","guid":{"rendered":"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/"},"modified":"2022-02-24T18:58:25","modified_gmt":"2022-02-24T18:58:25","slug":"adding-ev-routing-to-a-tomtom-web-map-building-the-web-application","status":"publish","type":"post","link":"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/","title":{"rendered":"Adding EV Routing to a TomTom Web Map: Building the Web Application"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"3285\" class=\"elementor elementor-3285\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1d761b22 elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"1d761b22\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-35f0879c\" data-id=\"35f0879c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a124e98 elementor-widget elementor-widget-text-editor\" data-id=\"a124e98\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>In a\u00a0<a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-understanding-apis\" target=\"_blank\" rel=\"noopener noreferrer\">previous article<\/a>, we discussed what you need to know to create an application that uses the TomTom Long Distance EV Routing service to supply routing and charging information to users. Now we\u2019re going to build the app.<\/p><p>The sample application described in this article allows a user to specify a starting and finishing location, calculate a route between these endpoints, and display both the route and charging stops along the route. Here are the basic steps the app will take:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Initialize the map (init).<\/li><li style=\"font-size: 16px;\">Search for the starting location when the user clicks the &#8220;Calculate Route&#8221; button (findStart).<\/li><li style=\"font-size: 16px;\">Search for the finishing location after the starting location is found (findFinish).<\/li><li style=\"font-size: 16px;\">Calculate the route when the finishing location is found (calculateRoute).<\/li><li style=\"font-size: 16px;\">Add the route to the map when the route is successfully calculated (addRoute).<\/li><li style=\"font-size: 16px;\">Add markers to the route for the starting location, finishing location, and charging stations (addRouteMarkers).<\/li><li style=\"font-size: 16px;\">Format and display summary text describing the route and charging stops (addRouteSummary).<\/li><li style=\"font-size: 16px;\">Pan and zoom the map to optimally fit the route (fitMapToRoute).<br \/><br \/><\/li><\/ol><p>The running application will look like the following:<\/p><p><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/49964580028_75246052fc_o.png\" alt=\"EVPt2\" width=\"936\" height=\"528\" \/><\/p><p>This application uses HTML to provide text boxes and buttons for user interaction, and to add places to display summary text and the map. While the HTML should be familiar to any web developer, it\u2019s worth highlighting the following section, which includes the TomTom Web SDK and the CSS styling it uses:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f830cca elementor-widget elementor-widget-code-highlight\" data-id=\"f830cca\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/5.x\/5.36.1\/maps\/maps.css\">\r\n<script src=\"https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/5.x\/5.36.1\/maps\/maps-web.min.js\"><\/script>\r\n<script src=\"https:\/\/api.tomtom.com\/maps-sdk-for-web\/cdn\/5.x\/5.36.1\/services\/services-web.min.js\"><\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-27c6cbd elementor-widget elementor-widget-text-editor\" data-id=\"27c6cbd\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The next three lines point to the three\u00a0<a style=\"background-color: #ffffff;\" href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0scripts that comprise the application. Here\u2019s the function we use to access the\u00a0<a style=\"background-color: #ffffff;\" href=\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\">TomTom<\/a>\u00a0Long-Distance EV Routing service:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b7c7502 elementor-widget elementor-widget-code-highlight\" data-id=\"b7c7502\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><script src=\"calculateLongDistanceEVRoute.js\"><\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33fb634 elementor-widget elementor-widget-text-editor\" data-id=\"33fb634\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This one points to the script containing the parameters we use to describe the electric vehicle, including the consumption model and charging modes:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2b96db9 elementor-widget elementor-widget-code-highlight\" data-id=\"2b96db9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><script src=\"ev_model.js\"><\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f73b6a8 elementor-widget elementor-widget-text-editor\" data-id=\"f73b6a8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>And this one indicates the script that holds the main logic for our application:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-941f303 elementor-widget elementor-widget-code-highlight\" data-id=\"941f303\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><script src=\"ev_routing.js\"><\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-87bac51 elementor-widget elementor-widget-text-editor\" data-id=\"87bac51\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Note that the three JavaScript files should be placed in the same directory.<\/p><h2>Searching, Routing, and Interacting with the User<\/h2><p>The ev_routing.js file contains the majority of the logic for the application, including all user interaction and interactions with the Search and Routing APIs.<\/p><p>We start by initializing the map using the init function, where we set the name of our application and its version. This information is used by TomTom to track usage statistics. We also create the map and associate it with the HTML division where it will be displayed:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-94660cb elementor-widget elementor-widget-code-highlight\" data-id=\"94660cb\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>tt.setProductInfo(application.name, application.version);\r\nmap = tt.map({ key: application.key, container: ids.html.map });<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e6d908 elementor-widget elementor-widget-text-editor\" data-id=\"8e6d908\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Our &#8220;findStart&#8221; function is called when the user clicks the &#8220;Calculate Route&#8221; button. The function first checks that the map we created is fully loaded:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a54da4f elementor-widget elementor-widget-code-highlight\" data-id=\"a54da4f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>if (!map.loaded()) {\r\n  displayMessage('Please try again later, map is still loading.');\r\n  return;\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89244f6 elementor-widget elementor-widget-text-editor\" data-id=\"89244f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>It then removes any previous route, route markers, and summary text. Removing a route is accomplished by removing the route layer and its source from the map, using the same identifiers we used when we first created them:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e7aef60 elementor-widget elementor-widget-code-highlight\" data-id=\"e7aef60\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>map.removeLayer(ids.route.layer);\r\nmap.removeSource(ids.route.source);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa97222 elementor-widget elementor-widget-text-editor\" data-id=\"fa97222\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The markers are maintained in an array. You can get rid of an individual marker by using &#8220;pop&#8221; to remove the marker from that array and the marker\u2019s &#8220;remove&#8221; function to remove it from the map:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f58f7f3 elementor-widget elementor-widget-code-highlight\" data-id=\"f58f7f3\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>markers.pop().remove();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a12b94a elementor-widget elementor-widget-text-editor\" data-id=\"a12b94a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Once any previous route information has been removed, we find the location indicated by the user using our &#8220;findLocation&#8221; method, then call the findFinish function after the location is found.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f50f9ae elementor-widget elementor-widget-code-highlight\" data-id=\"f50f9ae\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>findLocation(ids.html.start, findFinish);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-02329bf elementor-widget elementor-widget-text-editor\" data-id=\"02329bf\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The findLocation function simply uses TomTom\u2019s Fuzzy Search service, specifying your personal API key and the user-provided text as parameters:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-979b6c4 elementor-widget elementor-widget-code-highlight\" data-id=\"979b6c4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>tt.services.fuzzySearch({ key: application.key, query: queryText })\r\n  .go()\r\n  .then(callbackFunction)\r\n  .catch(function(error) {\r\n    displayMessage('Could not find ' + elementId + ' (' + queryText + '). ' +\r\n      error.message);\r\n  });<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc9e1c1 elementor-widget elementor-widget-text-editor\" data-id=\"cc9e1c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The findFinish function is called after the starting location is found. It finds the finishing location and, if successful, calls our calculateRoute function:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-584670a elementor-widget elementor-widget-code-highlight\" data-id=\"584670a\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>findLocation(ids.html.finish, calculateRoute);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2be4841 elementor-widget elementor-widget-text-editor\" data-id=\"2be4841\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The calculateRoute function is called once the finishing location is found. It uses our own calculateLongDistanceEVRoute function to make a web request to TomTom\u2019s Long-Distance EV Routing service. If successful, we display that route; otherwise, we alert the user:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a47f356 elementor-widget elementor-widget-code-highlight\" data-id=\"a47f356\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>calculateLongDistanceEVRoute({\r\n  key: application.key,\r\n  locations: [startLocation.position, finishLocation.position],\r\n  avoid: 'unpavedRoads',\r\n  vehicleEngineType: 'electric',\r\n  vehicleWeight: consumptionModel.vehicleWeight,\r\n  accelerationEfficiency: consumptionModel.accelerationEfficiency,\r\n  decelerationEfficiency: consumptionModel.decelerationEfficiency,\r\n  uphillEfficiency: consumptionModel.uphillEfficiency,\r\n  downhillEfficiency: consumptionModel.downhillEfficiency,\r\n  constantSpeedConsumptionInkWhPerHundredkm: consumptionModel.constantSpeedConsumptionInkWhPerHundredkm,\r\n  currentChargeInkWh: consumptionModel.currentChargeInkWh,\r\n  maxChargeInkWh: consumptionModel.maxChargeInkWh,\r\n  auxiliaryPowerInkW: consumptionModel.auxiliaryPowerInkW,\r\n  minChargeAtDestinationInkWh: minChargeAtDestinationInkWh,\r\n  minChargeAtChargingStopsInkWh: minChargeAtDestinationInkWh,\r\n  chargingModes : chargingModes\r\n})\r\n.go()\r\n.then(displayRoute)\r\n.catch(function(error) {\r\n  if (error.hasOwnProperty('message'))\r\n    error = error.message;\r\n\r\n  displayMessage('Error calculating route. ' + error);\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a01bb37 elementor-widget elementor-widget-text-editor\" data-id=\"a01bb37\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Next, the addRoute function is called from our displayRoute function, after a route has been successfully calculated.<\/p><p>We first add a route source to the map. This route source provides the GeoJSON for all of the points that make up the route:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fa2717 elementor-widget elementor-widget-code-highlight\" data-id=\"0fa2717\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>map.addSource(ids.route.source, { type:  'geojson',  data: geoJson });<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-288056a elementor-widget elementor-widget-text-editor\" data-id=\"288056a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We then add a route layer to the map where we display the route described by this route source:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-45879db elementor-widget elementor-widget-code-highlight\" data-id=\"45879db\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>map.addLayer({\r\n  id: ids.route.layer,\r\n  type: 'line',\r\n  source: ids.route.source,\r\n  layout: { 'line-join': appearance.line.join, 'line-cap': appearance.line.cap },\r\n  paint: { 'line-color': appearance.line.color, 'line-width': appearance.line.width }\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-be27569 elementor-widget elementor-widget-text-editor\" data-id=\"be27569\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>We use our addMarker function to create the marker, set its color and position, and then add it to the map and to our own &#8220;markers&#8221; array. We maintain the markers array so we can later remove the markers when a user calculates a subsequent route.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7217d60 elementor-widget elementor-widget-code-highlight\" data-id=\"7217d60\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>markers.push(new tt.Marker({ color: color })\r\n  .setLngLat(position)\r\n  .addTo(map));<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6cfe74d elementor-widget elementor-widget-text-editor\" data-id=\"6cfe74d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>In our fitMapToRoute function, we pan and zoom the map so the route is optimally displayed. We start by describing an area with no points:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28a353c elementor-widget elementor-widget-code-highlight\" data-id=\"28a353c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const bounds = new tt.LngLatBounds();<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e9e60eb elementor-widget elementor-widget-text-editor\" data-id=\"e9e60eb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>and then expand the area to include each point that appears in the route:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-55d5b7f elementor-widget elementor-widget-code-highlight\" data-id=\"55d5b7f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>bounds.extend(coordinate);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fdf4c3b elementor-widget elementor-widget-text-editor\" data-id=\"fdf4c3b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Finally, we use the map\u2019s fitBounds function to pan and zoom the map to optimally display this area. We also include a small amount of padding so that markers at the edges of that area are fully displayed.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0d26709 elementor-widget elementor-widget-code-highlight\" data-id=\"0d26709\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>map.fitBounds(bounds, { padding: appearance.line.padding });<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c2f6ff elementor-widget elementor-widget-text-editor\" data-id=\"7c2f6ff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<h2>Working with the Long-Distance EV Routing Service<\/h2><p>While TomTom provides Web SDK functions to simplify interaction with most services, it doesn\u2019t currently provide one for the Long-Distance EV Routing service. To simplify this interaction, the sample application includes an SDK function \u2014 calculateLongDistanceEVRoute \u2014 similar in construction to other TomTom Web SDK functions. Specifically, this function provides the following logic:<\/p><ol style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Format the parameters into a URL (formatUrl).<\/li><li style=\"font-size: 16px;\">Format the charging modes into a POST body (go).<\/li><li style=\"font-size: 16px;\">Issue the web request and fetch the response (go).<\/li><li style=\"font-size: 16px;\">Convert locations in the response to LatLng instances (RouteData).<\/li><li style=\"font-size: 16px;\">Convert coordinates to GeoJSON (toGeoJson).<br \/><br \/><\/li><\/ol><p>Many of the parameters for the Long-Distance EV Routing service are passed as query string parameters in the URL. Our formatUrl function simply checks that all required properties are provided and adds a query string parameter for each one. It uses the JavaScript encodeURIComponent function to escape any special characters in the parameter values.<\/p><p>After the URL and the POST body have been formatted, our &#8220;go&#8221; function creates a JavaScript promise to enclose a fetch API call. If the route calculation succeeds, the JSON response is parsed and the &#8220;fulfill&#8221; function of that promise is called; otherwise, the &#8220;reject&#8221; function is called.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cebff42 elementor-widget elementor-widget-code-highlight\" data-id=\"cebff42\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>fetch(url, {\r\n  method: 'POST',\r\n  mode: 'cors',\r\n  credentials: 'same-origin',\r\n  headers: {\r\n    'Content-Type': 'application\/json'\r\n  },\r\n  body: body\r\n})\r\n.then(function(response) {\r\n  response\r\n    .json()\r\n    .then(function(obj) {\r\n      if (!obj.hasOwnProperty('error'))\r\n        fulfill(new RouteData(obj));\r\n      else\r\n        reject(obj.error.description);\r\n    });\r\n})\r\n.catch(function(error) {\r\n  reject(error);\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-039fae9 elementor-widget elementor-widget-text-editor\" data-id=\"039fae9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The JSON response we get back from the Long-Distance EV Routing service expresses locations using a latitude and longitude property. But the TomTom Web SDK and the underlying Mapbox framework instead expect instances of the &#8220;LngLat&#8221; object, which uses &#8220;lat&#8221; and &#8220;lng&#8221; properties. For compatibility, our RouteData function (and object) converts all of the points in the route to LngLat instances.<\/p><p>When displaying a route on a map, we need to create a source for that route. The easiest way to express this route is to provide a standard GeoJSON object that describes it. To make this easier, we include a &#8220;toGeoJson&#8221; function in the prototype for our RouteData function. This is similar to what\u2019s provided by the calculateRoute function in the TomTom Web SDK.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-00d8ea7 elementor-widget elementor-widget-code-highlight\" data-id=\"00d8ea7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const geoJson = {\r\n  type: 'FeatureCollection',\r\n  features: [\r\n    {\r\n      type: 'Feature',\r\n      geometry: {\r\n        type: 'LineString',\r\n        coordinates: []\r\n      }\r\n    }\r\n  ]\r\n};\r\n\r\nconst coordinates = geoJson.features[0].geometry.coordinates;\r\n\r\nthis.routes[0].legs.forEach(function(leg) {\r\n  leg.points.forEach(function(point) {\r\n    coordinates.push([point.lng, point.lat]);\r\n  });\r\n});<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1f11201 elementor-widget elementor-widget-text-editor\" data-id=\"1f11201\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><\/p>\n<pre><span style=\"color: rgb(0, 178, 169); font-family: Sailec, sans-serif; font-size: 2rem;\">Next Steps<\/span><br><\/pre>\n<p>We\u2019ve learned how to use TomTom\u2019s Search and Routing APIs to create a visually engaging application to help consumers plan trips in their EVs. The application automatically calculates an optimal route, with planned charging stops along the way. Using TomTom\u2019s award-winning API, all of this is accomplished easily, and without much code.<\/p>\n<p>To create even more useful applications, you can also take advantage of TomTom&#8217;s Long Distance EV Service to provide the location of nearby charging parks, charging stations, and real-time information about the type and availability of ports at those stations.<\/p>\n<p>The complete application source files are <a href=\"https:\/\/github.com\/tomtom-international-labs\/EVRoutingAndSearchDemo\" target=\"_blank\" rel=\"noopener noreferrer\">available for download here<\/a>. For the application to function properly, all of these files should be placed in the same directory. And don\u2019t forget to edit the &#8220;ev_routing.js&#8221; file to replace &#8220;YOUR_API_KEY&#8221; with an actual TomTom API key.<\/p>\n<p>Good luck and happy mapping!<\/p>\n<p><em>This article was originally published on <a href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application\">GrapeCity&#8217;s blog<\/a>.<br><\/em><em><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span><br>If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span> today.<\/span><\/span><\/em><em><br><\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article we learn how to use TomTom\u2019s Search and Routing APIs to create a visually engaging application to help consumers plan trips in their EVs.<\/p>\n","protected":false},"author":3,"featured_media":6768,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[278,18,240],"tags":[308,273,272],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding EV Routing to a TomTom Web Map: Building the Web Application &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding EV Routing to a TomTom Web Map: Building the Web Application &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article we learn how to use TomTom\u2019s Search and Routing APIs to create a visually engaging application to help consumers plan trips in their EVs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-26T16:41:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-24T18:58:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1746\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"Adding EV Routing to a TomTom Web Map: Building the Web Application\",\"datePublished\":\"2020-08-26T16:41:23+00:00\",\"dateModified\":\"2022-02-24T18:58:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\"},\"wordCount\":1307,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png\",\"keywords\":[\"CSS\",\"HTML\",\"JavaScript\"],\"articleSection\":[\"Hands-on Tutorial\",\"Portfolio\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/\",\"url\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application\",\"name\":\"Adding EV Routing to a TomTom Web Map: Building the Web Application &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage\"},\"image\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png\",\"datePublished\":\"2020-08-26T16:41:23+00:00\",\"dateModified\":\"2022-02-24T18:58:25+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png\",\"width\":1746,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding EV Routing to a TomTom Web Map: Building the Web Application\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding EV Routing to a TomTom Web Map: Building the Web Application &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application","og_locale":"en_US","og_type":"article","og_title":"Adding EV Routing to a TomTom Web Map: Building the Web Application &#183; Technical Content Marketing | ContentLab","og_description":"In this article we learn how to use TomTom\u2019s Search and Routing APIs to create a visually engaging application to help consumers plan trips in their EVs.","og_url":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2020-08-26T16:41:23+00:00","article_modified_time":"2022-02-24T18:58:25+00:00","og_image":[{"width":1746,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#article","isPartOf":{"@id":"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"Adding EV Routing to a TomTom Web Map: Building the Web Application","datePublished":"2020-08-26T16:41:23+00:00","dateModified":"2022-02-24T18:58:25+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/"},"wordCount":1307,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png","keywords":["CSS","HTML","JavaScript"],"articleSection":["Hands-on Tutorial","Portfolio","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/adding-ev-routing-to-a-tomtom-web-map-building-the-web-application\/","url":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application","name":"Adding EV Routing to a TomTom Web Map: Building the Web Application &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage"},"image":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png","datePublished":"2020-08-26T16:41:23+00:00","dateModified":"2022-02-24T18:58:25+00:00","breadcrumb":{"@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png","width":1746,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/developer.tomtom.com\/blog\/build-different\/adding-ev-routing-tomtom-web-map-building-web-application#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"Adding EV Routing to a TomTom Web Map: Building the Web Application"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2022\/02\/35.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3285"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=3285"}],"version-history":[{"count":6,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3285\/revisions"}],"predecessor-version":[{"id":5490,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/3285\/revisions\/5490"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/6768"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=3285"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=3285"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=3285"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=3285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}