[feature] Allow showing moving device in geo map #443 #444
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds the ability to animate a node's position on the map by dynamically updating its coordinates. by adding a utility function which uses echarts.setOptions to update the node location Fixes #443
dee077
moved this to In progress
in [GSoC25] General Map: Indoor, Mobile, Linkable URLs
pandafy
requested changes
Dec 4, 2025
Member
pandafy
left a comment
pandafy
left a comment
There was a problem hiding this comment.
@dee077 we need to add an example here to demonstrate the movement of node. I tried to come up with the following example:
netjsonmap-moving-node.json
{
"type": "NetworkGraph",
"label": "Moving Node Demo",
"protocol": "OLSR",
"version": "0.6.6.2",
"metric": "ETX",
"date": "2024-12-04T00:00:00.000Z",
"nodes": [
{
"id": "10.0.0.1",
"name": "India-1",
"location": {
"lng": 72.8777,
"lat": 19.076
},
"properties": {
"time": "2025-12-04T00:00:00.000Z"
}
}
],
"links": []
}netjsonmap-moving-node.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>netjsongraph.js: moving node example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""
/>
<!-- theme can be easily customized via css -->
<link href="../lib/css/netjsongraph-theme.css" rel="stylesheet" />
<link href="../lib/css/netjsongraph.css" rel="stylesheet" />
<style type="text/css">
#legend h4 {
margin: 10px 0;
text-align: center;
}
#legend {
position: absolute;
right: 25px;
bottom: 25px;
width: auto;
height: auto;
max-width: 250px;
padding: 8px 15px;
background: #fbfbfb;
border-radius: 8px;
color: #000;
font-family: Arial, sans-serif;
font-family: sans-serif;
font-size: 14px;
z-index: 1000;
user-select: text;
}
#legend p {
margin: 10px 0;
display: flex;
align-items: center;
}
#legend span {
width: 16px;
margin-right: 5px;
}
#legend .link-up,
#legend .link-down {
display: inline-block;
height: 5px;
border-bottom-width: 6px;
border-bottom-style: solid;
}
#legend .link-up {
color: #3acc38;
margin-right: 10px;
}
#legend .link-down {
color: red;
margin-right: 10px;
}
@media only screen and (max-width: 850px) {
#legend {
right: 15px;
}
}
</style>
</head>
<body>
<script type="text/javascript">
// Top 10 most popular cities in India with their coordinates
const cities = [
{ lng: 72.8777, lat: 19.076 },
{ lng: 77.1025, lat: 28.7041 },
{ lng: 77.5946, lat: 12.9716 },
{ lng: 78.4867, lat: 17.385 },
{ lng: 72.5714, lat: 23.0225 },
{ lng: 80.2707, lat: 13.0827 },
{ lng: 88.3639, lat: 22.5726 },
{ lng: 73.8567, lat: 18.5204 },
{ lng: 75.7873, lat: 26.9124 },
{ lng: 72.8311, lat: 21.1702 },
];
let currentCityIndex = 0;
const map = new NetJSONGraph("../assets/data/netjsonmap-moving-node.json", {
render: "map",
mapOptions: {
center: [20.5937, 78.9629],
zoom: 5,
nodeConfig: {
label: {
offset: [0, -10],
},
},
},
prepareData: (data) => {
data.nodes.map((node) => {
node.label = node.name;
node.properties = Object.assign(node.properties || {}, {
location: node.location,
});
});
},
});
map.render();
// Function to move the node to the next city
const moveNodeToNextCity = () => {
currentCityIndex = (currentCityIndex + 1) % cities.length;
const nextCity = cities[currentCityIndex];
// Use the moveNodeInRealTime method to update the node's location
map.utils.moveNodeInRealTime(map, "10.0.0.1", nextCity);
};
// Start moving the node every 2 seconds
setInterval(moveNodeToNextCity, 2000);
</script>
</body>
</html>But, it is giving an error that series is undefined.
Comment on lines
+140
to
+141
| // Todo: Romove before merge | ||
| window.map = map |
Comment on lines
+1198
to
+1199
| const dataIndex = series.data.findIndex(d => d.node.id === id); | ||
| const node = self.data.nodes[dataIndex] |
Member
There was a problem hiding this comment.
thinking out loud
Are seies.data and self.data.nodes always same or can they be different? If they are always same, can we avoid finding index in series.data and then accessing it in self.data.nodes?
| } | ||
|
|
||
| moveNodeInRealTime(self, id, location) { | ||
| const dataIndex = series.data.findIndex(d => d.node.id === id); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds the ability to animate a node's position on the map by dynamically updating its coordinates. by adding a utility function which uses echarts.setOptions to update the node location
Fixes #443
Checklist
Reference to Existing Issue
Closes #443.
Screen recording
Screencast.from.2025-09-19.22-13-00.webm