June 10

Routing with the Javascript SDK

Weather greatly affects the transportation and logistics industry, especially when that weather turns inclement with considerable impacts. With the recent release of 1.5.0 of our Javascript SDK, you can now plot custom driving routes alongside critical weather data between destinations using our new Routing module. This new routing module allows you to plan and adjust your fleet’s routing to minimize weather impacts while enroute.

Getting Started with the Routing Module

To start using the Routing module, you’d set up your project as you would with any of our other lazy-loaded built-in modules. Therefore, you’ll need to follow the module setup instructions for InteractiveMap or InteractiveMapApp depending on which mapping component you are using in your project from our SDK.

For instance, your initial setup for an InteractiveMapApp instance would be:

You’ll need to provide additional configuration options when adding an instance of the Routing module to your application. Include these options as the third argument to the   method as demonstrated in the code above. You can find the full list of configuration options in our Getting Started documentation for the Routing module.

You can configure your routes either as static configurations inline with your code or using a remote source, such as your own application and server. In the example below, we will demonstrate how to set up your routes using a remote source.

Adding Custom Routes from a Remote Source

Using remote routes allow you to define your routes using your own backend service to provide all route information. This is especially useful if you are including route asset’s current position and status in your application which may need frequent updates.

Configuring Your Route Data

At a minimum, each route from your source must provide a   which is a GeoJSON Feature that describes your route as a LineString:

If you want additional information displayed for your route, you will also need additional properties with your route’s JSON data. For instance, you may want the departure and destination information or travel duration and distance included. The following properties would then be included:

  •   – Information about the departure location, such as title, place name, geographical coordinate and time of departure
  •   – Information about the destination location, such as title, place name, geographical coordinate and time of arrival
  •   – Total travel duration of the trip in seconds
  •   – Total travel distance of the trip in meters

You can also include other detailed information about your route. For example, you may want the route asset’s current position and intermediate waypoints or stops along the route displayed. See our full list of route configuration options in our Routing module’s usage documentation for further details.

Below is a full route configuration containing additional information that would be provided by the remote source:

Adding Routes to InteractiveMapApp

Now that you have your remote source set up to return the necessary route information, you are ready to add them to your InteractiveMapApp instance using the new Routing module.

Let’s say that your remote route data source exists at  . All you need to do is configure an instance of the Routing module to use this URL as the data source. In this example, we’d set the   property to a function that receives the selected route’s identifier. This identifier will be used in your custom URL when performing the request for each route as it’s selected:

And that’s it! Now you can toggle between your custom routes on the map alongside other map layers and weather-related information.


You can also have multiple instances of the Routing module on your map. This is useful if you wanted to group routes and/or use different configurations per group:

Going Farther with Routing

In this article, we’ve only touched the surface of the potential of the new Routing module with our Javascript SDK. You can take your applications even farther by customizing your route markers, using a third-party directions API for generating routes between two points and more. So make sure to check out our complete Routing usage documentation for the full details.



Share this post:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.