June 10

Create Weather Routes with AerisWeather’s Javascript SDK

Weather greatly affects the transportation and logistics industry, especially when that weather turns inclement with considerable impacts. Version 1.5.0 of our Javascript SDK introduced our routing module, enabling users to plot custom routes alongside critical weather data between destinations. The routing module allows you to plan and adjust your fleet’s pathing to minimize weather impacts while en route.

Getting Started with the Routing Module

To follow along with this tutorial, you may find it helpful to begin a free AerisWeather developer trial.

To start using the routing module, set up your project as you would with any of our other lazy-loaded built-in modules. When you’re ready to get started, follow the module setup instructions for our Interactive Map or Interactive Map App, depending on which mapping component you are using in your project from our SDK.

For instance, your initial setup for an Interactive Map App instance would be:

aeris.apps().then((apps) => {

    const app = new apps.InteractiveMapApp('#app', {
        // map app config
    });

    // lazy load the built-in modules
    aeris.modules().then((modules) => {

        // Add the built-in Routing module
        app.modules.add(modules.Routing, null, {
            // configuration options...
        });

    });

});

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 app.modules.add() 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 in line with your code or by 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 allows you to define your routes using your own backend service to provide all route information. This is especially useful if you are including a route asset’s current position and status in an application that may need frequent updates.

Configuring Your Route Data

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

{
    "feature": {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [-122.48369693756104, 37.83381888486939],
                [-122.48348236083984, 37.83317489144141],
                [-122.48339653015138, 37.83270036637107],
                [-122.48356819152832, 37.832056363179625],
                [-122.48404026031496, 37.83114119107971],
                [-122.48404026031496, 37.83049717427869],
                [-122.48348236083984, 37.829920943955045],
                [-122.48356819152832, 37.82954808664175],
                [-122.48507022857666, 37.82944639795659],
                [-122.48610019683838, 37.82880236636284],
                [-122.48695850372314, 37.82931081282506],
                [-122.48700141906738, 37.83080223556934],
                [-122.48751640319824, 37.83168351665737],
                [-122.48803138732912, 37.832158048267786],
                [-122.48888969421387, 37.83297152392784],
                [-122.48987674713133, 37.83263257682617],
                [-122.49043464660643, 37.832937629287755],
                [-122.49125003814696, 37.832429207817725],
                [-122.49163627624512, 37.832564787218985],
                [-122.49223709106445, 37.83337825839438],
                [-122.49378204345702, 37.83368330777276]
            ]
        }
    }
}

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:

  • departure

      – Information about the departure location, such as title, place name, geographical coordinates, and time of departure

  • destination

      – Information about the destination location, such as title, place name, geographical coordinates, and time of arrival

  • durationSeconds

      – Total travel duration of the trip in seconds

  • distanceMeters

      – 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 the 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:

{
    "distanceMeters": 1217617.25, 
    "durationSeconds": 42455.547, 
    "departure": {
        "title": "Distribution Warehouse",
        "place": "Chicago, IL"
    },
    "destination": {
        "title": "Warehouse #3245",
        "place": "Charlotte, NC"
    },
    "asset": {
        "title": "Asset #3487",
        "description": "This is just some random information about the asset or its payload.",
        "imageUrl": "/routes/images/atego-3487.jpg",
        "status": {
            "label": "In-Transit",
            "color": "#f7c619"
        }
    },
    "feature": {
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [-87.624337, 41.875601],
                [-87.624295, 41.87315],
                [-87.617309, 41.873239],
                [-87.614708, 41.853136],
                [-87.626818, 41.84732],
                [-87.631319, 41.842783],
                [-87.63127, 41.791507],
                [-87.631086, 41.778384],
                [-87.517719, 41.661053],
                [-87.305584, 41.59601],
                [-87.30305, 41.592284],
                [-87.307316, 41.593325],
                [-87.270693, 41.008105],
                [-87.162077, 40.815043],
                [-86.346339, 39.93931],
                [-86.144869, 39.782797],
                [-84.201106, 39.864832],
                [-84.205476, 39.751259],
                [-84.205954, 39.749929],
                [-83.98331, 39.694881],
                [-83.645282, 39.64486],
                [-82.94155, 39.323044],
                [-82.427055, 38.886531],
                [-82.160201, 38.838176],
                [-81.977188, 38.739733],
                [-82.016321, 38.577214],
                [-81.905277, 38.459683],
                [-81.554075, 38.316506],
                [-81.568826, 38.243551],
                [-81.259465, 37.958022],
                [-81.043262, 37.376647],
                [-81.139284, 37.045605],
                [-81.050689, 36.946732],
                [-80.929019, 36.948117],
                [-80.709921, 36.674281],
                [-80.742424, 36.498388],
                [-80.856936, 35.57034],
                [-80.873398, 35.489036],
                [-80.863924, 35.423914],
                [-80.850358, 35.38767],
                [-80.848495, 35.331112],
                [-80.850872, 35.289154],
                [-80.844655, 35.250661],
                [-80.838081, 35.234964],
                [-80.835541, 35.232534],
                [-80.843154, 35.22715]
            ]
        }
    }
}

Adding Routes to an Interactive Map App

Now that you have your remote source set up to return the necessary route information, you are ready to add them to your Interactive Map App instance using the routing module.

Let’s say that your remote route data source exists at https://mydomain.com/routes/:routeId.json. 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 url 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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">

<style>
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>

<div id="app"></div>

<script>
window.onload = () => {
    
    const aeris = new AerisWeather('[CLIENT_ID]', '[CLIENT_SECRET]');

    aeris.apps().then((apps) => {
        // create a map app instance
        const app = new apps.InteractiveMapApp('#app');
        app.on('ready', () => {

            aeris.modules().then((modules) => {
                app.modules.add(modules.Routing, {}, {
                    id: 'custom-routes',
                    title: 'My Routes',
                    dataType: 'weather',
                    url: (value) => {
                        return 'https://mydomain.com/data/${value}.json';
                    },
                    routes: [{
                        id: 'test-route-1',
                        title: 'Route 1'
                    },{
                        id: 'route-2',
                        title: 'Route 2'
                    },{
                        id: 'route-3',
                        title: 'Route 3'
                    }]
                });
            });
        });
    });
}
</script>
<script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>

</body>
</html>

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 in your map. This is useful if you want to group routes and/or use different configurations per group:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.css">

<style>
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}
</style>

</head>
<body>

<div id="app"></div>

<script>
window.onload = () => {
    
    const aeris = new AerisWeather('[CLIENT_ID]', '[CLIENT_SECRET]');

    aeris.apps().then((apps) => {
        // create a map app instance
        const app = new apps.InteractiveMapApp('#app');
        app.on('ready', () => {

            aeris.modules().then((modules) => {

                // first route group
                app.modules.add(modules.Routing, {}, {
                    id: 'custom-routes',
                    title: 'My Routes',
                    dataType: 'weather',
                    url: (value) => {
                        return 'https://mydomain.com/data/${value}.json';
                    },
                    routes: [{
                        id: 'test-route-1',
                        title: 'Route 1'
                    },{
                        id: 'route-2',
                        title: 'Route 2'
                    },{
                        id: 'route-3',
                        title: 'Route 3'
                    }]
                });

                // second route group
                app.modules.add(modules.Routing, {}, {
                    id: 'distribution-routes',
                    title: 'Distribution',
                    dataType: 'weather',
                    url: (value) => {
                        return 'https://mydomain.com/data/distribution-${value}.json';
                    },
                    routes: [{
                        id: 'test-route-1',
                        title: 'Route 1'
                    },{
                        id: 'route-2',
                        title: 'Route 2'
                    }]
                });
            });
        });
    });
}
</script>
<script defer src="https://cdn.aerisapi.com/sdk/js/latest/aerisweather.min.js"></script>

</body>
</html>

Go Further with Routing and Weather

In this article, we’ve only scratched the surface of the potential of our Javascript SDK routing module. Take your applications even further by customizing your route markers, using a third-party directions API to generate routes between two points, and more. Check out our complete routing usage documentation for the full details.

Share this post:

Leave a Reply

Your email address will not be published.

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

AerisWeather
{{page_content}}