Mapping location data within Node-RED Dashboard 2.0.

Fleet management in IoT uses sensors and software to collect real-time data on vehicles, such as location, fuel consumption, and driver behavior. This data allows companies to optimize routes, reduce costs, improve safety, and enhance overall operational efficiency of their fleet. Building an application that allows the tracking of location to support Fleet management is what this post is about.

Before moving further, make sure you have installed Dashboard 2.0. If you are new to Dashboard 2.0, please refer to Getting Started with Dashboard 2.0 for more information.

#  Installing world map custom node

To render an interactive world map webpage for plotting location data, we will use a popular custom node called node-red-contrib-web-worldmap-page. This node offers extensive features enabling us to render a world map and plot various items with different icons, colors, NATO symbologies, ranges, and more.

1. Click the Node-RED Settings (top-right).
2. Click "Manage Palette".
3. Switch to the "Install" tab.
4. Search for node-red-contrib-web-worldmap.
5. Click "Install".

#  Retrieving location Data

Before plotting locations, we need to obtain the data first. For this purpose, we will utilize the Edenburg Open Public Transportation API. This API provides the live locations of all of Edenburg's public buses and trams, enabling us to access the necessary data for plotting on Worldmap within Dashboard 2.0.

1. Drag an Inject node onto the canvas and set the repeat property to a 20-second interval.
2. Drag an HTTP request node onto the canvas, Dobule-click on it and choose GET method, and enter https://tfe-opendata.com/api/v1/vehicle_locations in the URL field and select return as a parsed json object. This API is public, so no need for environment variables. For private APIs, consider using environment variables for security.

3. Connect the Inject node's output to the HTTP request node's input.

#  Formatting Location Data

To ensure compatibility with the Worldmap custom node, we need to format the location data appropriately.

1. Drag the Change node onto the canvas, and set the msg.payload to msg.payload.vehicles, and give it name Set payload.

2. Drag a Split node onto the canvas.
3. Add another Change node to the canvas. Configure it to set and delete properties as shown in the image below, and give it name Change and delete properties. By changing and deleting properties of the location, we ensure that only the properties acceptable by the Worldmap node are included in the location data.

4. Drag a Switch node onto the canvas and add conditions to check if msg.payload.vehicle_type is equal to tram or not.

5. Add another Change node to the canvas and give it a name set icon and icon color for tram. Set msg.payload.icon to fa-train and msg.payload.iconColor to yellow.

7. Add another Change node to the canvas and give it a name set icon and icon color for bus. Set msg.payload.icon to bus and msg.payload.iconColor to red.

8. Connect the HTTP request node's output to the input of the Change node named Set payload, and connect the output of that Change node to the input of the Split node.
9. Then, connect the output of the Split node to the input of the Change node named Change and delete properties, and connect the output of the "Change and delete properties" node to the input of the Switch node. Then Switch node's first output to the input of the Change node named set icon and icon color for tram, and its second output to the input of the Change node named set icon and icon color for bus.

#  Plotting location data on Worldmap

1. Drag a Worldmap node onto the canvas. Set the path to /worldmap and keep the rest of the settings unchanged, although you can modify other properties according to your preferences.

2. With the worldmap node configured, it will generate a world map with plotted data accessible at the specified path.
3. Connect the Function node's output to Worldmap node's input.

Now we have successfully created a page with a world map displaying plotted vehicle location data. To confirm, you can visit https://<your-instance-name>.flowfuse.cloud/worldmap.

#  Rendering map on Dashboard 2.0

To render worlmap webpage on dashboard 2.0 we will use iframe custom widget which will allow us to embed an external webpage into Dashboard 2.0 applications using an iframe.

#  Installing iframe custom widget

1. Click the Node-RED Settings (top-right)
2. Click Manage Palette
3. Switch to the Install tab
4. Search for @flowfuse/node-red-dashboard-2-ui-iframe
5. Click Install

#  Rendering worlmap on Dashboard 2.0

1. Drag an iframe widget onto the canvas.
2. Select ui-group and ui-base for it, where you want to render the webpage.
3. Set height and width for it according to your preference and set URL to /worlmap.

#  Deploying the flow

1. With your flow updated to include the above, click the Deploy button in the top-right of the Node-RED Editor.
2. Locate the Open Dashboard button at the top-right corner of the Dashboard 2.0 sidebar and click on it to navigate to the dashboard.

Now you can view the live location of Edinburgh public transport vehicles on the dashboard. Additionally, clicking on each vehicle reveals further details such as its name, speed, and other properties you've included. Moreover, if you wish to track the live locations of your own vehicles instead of Edinburgh's public transport vehicles, you can connect your devices and access GPS and sensor data using the Flowfuse device agent.

#  Conclusion

In conclusion, this guide shows an easy way to map location data on Dashboard 2.0. By following these steps, you can make interactive dashboards that give you real-time info, useful for things like managing fleets and tracking logistics.