---
title: "Node-red Worldmap integration guide"
slug: "node-red-worldmap-integration-guide"
updated: 2023-01-19T21:19:20Z
published: 2023-01-19T21:19:20Z
canonical: "docs.catchpoint.com/node-red-worldmap-integration-guide"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.catchpoint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Node-red Worldmap integration guide

This article explains how to configure the Node-red nodes to display the Catchpoint’s test data on the Node-red world map.

We suggest first reading the [guide](https://nodered.org/docs/getting-started/installation) to install node-red on your system.

The setup consists of three main steps.

- Generate the Rest API token and convert it to base64.
- Pull the nodes’ information. 
- Set up an endpoint to which the Catchpoint data will be pushed. Map the test data to the node’s information and send it to the world map.

## Generate the Rest API token and convert it to base64

**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308492-mceclip1.png" width="872" height="131" />** 

The configuration of each node is as shown below

**REST API**
<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308512-mceclip0.png" width="429" height="254" />

**Credentials**
(Make sure that you specify your own Key and Secret)
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308532-mceclip1.png" width="1004" height="283" />**

**Headers**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308572-mceclip2.png" width="1018" height="262" />**

**Body**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308592-mceclip4.png" width="1032" height="417" />**

**Token**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308612-mceclip5.png" width="755" height="244" />**

**Base64**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007373731-mceclip6.png" width="984" height="180" />**

## Pull the nodes’ information
<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308652-mceclip7.png" width="1031" height="204" />

**Timestamp**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308672-mceclip8.png" width="681" height="224" />**

**Bearer**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007373771-mceclip9.png" width="1030" height="217" />**

**Nodes**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308692-mceclip10.png" width="968" height="293" />**

**Parse Response**
This function node consists the JS code given below to parse the nodes’ JSON, extract the node’s name, latitude, and longitude and then store it as a global variable to use it on the next step
~~~
var map = []; for (j = 0; j < msg.payload.items.length; j++) { if (msg.payload.items[j].coordinates) { map.push({ 'name' : msg.payload.items[j].name, 'lat' : msg.payload.items[j].coordinates.latitude, 'lon' : msg.payload.items[j].coordinates.longitude }) } } msg.payload = map; global.set("map", map); delete msg.payload.items; return msg;
~~~
## Set up Endpoint

The last step is to set up an endpoint to which the Catchpoint data will be pushed, map the test data to the node’s information and send it to the world map.

By default Node-RED is accessible via port 1880. If you are testing it locally, you’d need a way to generate a valid endpoint to specify in the Catchpoint’s portal since specifying localhost:1880, Catchpoint won’t know to which system the data has to be pushed.

We can make use of tools like [ngrok](https://ngrok.com/) to achieve ithis.
<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308712-mceclip11.png" width="986" height="162" />

**Endpoint**
**<img src="https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007373791-mceclip12.png" width="942" height="192" />**

Go to the Catchpoint portal and specify the generated endpoint as shown below.
![](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007444571-mceclip0.png)

**Json Parse**
The purpose of the function node is to extract the relevant/required information form the test data and map it with the node’s information generated on the previous step and then push it to the world map.

Here is a sample code:
~~~
var map= global.get('map'); var details; for(var i=0;i<map.length;i++) { if(msg.payload.NodeName==map[i].name) { details={ 'Test Name': msg.payload.TestDetail.Name, 'name': msg.payload.NodeName, 'lat': map[i].lat, 'lon': map[i].lon, 'Response': msg.payload.Summary.Timing.Total, 'DNS':msg.payload.Summary.Timing.Dns, 'icon': 'fa-map-marker' }; } } msg.payload=details; return msg;
~~~
On successful deployment, you will see the data as shown below.

By default, **ctrl-shift-m** will load the map in a new tab.![](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007308752-mceclip14.png)

The above configuration can also be imported via clipboard using the **attached JSON**.

- Go to **Import > Clipboard**.
- Paste the JSON.
![](https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/360007373831-mceclip15.png)
    
@(Embed)(https://cdn.document360.io/cb4af8f9-6751-4fd2-b39c-07aae832badb/Images/Documentation/Node-red.txt){height="320" width="640"}
