ROS Resources: Documentation | Support | Discussion Forum | Index | Service Status | ros @ Robotics Stack Exchange
Ask Your Question

Real-time map generate on web like a Rviz

asked 2019-03-26 20:04:11 -0600

justinROScolleage gravatar image

updated 2022-10-30 09:40:32 -0600

lucasw gravatar image

Hi there By the time I came to this question, I got a lot of great information on the internet, but the combination of 'rosbridge' and 'robot web tool' or 'ros2djs' is just displaying the generated map The I want to see the process of gmapping generating a map like rviz in real time on the web. Please let me know the solution for that. Please excuse my poor English.

edit retag flag offensive close merge delete



rviz is just subscribing to the /map topic and displaying it as gmapping generates updates. I haven't used the various ROS web tools that you mentioned, but you should be able to have them subscribe to the /map topic and display updates in real time too.

ahendrix gravatar image ahendrix  ( 2019-03-26 21:09:09 -0600 )edit

thank you for your comment! Yes, I just wanna subscribe to the /map and display that on the web! But I cannot find the way to this.

justinROScolleage gravatar image justinROScolleage  ( 2019-03-26 23:34:59 -0600 )edit

I don't know much about javascript or the ROS web tools, but some quick browsing of the documentation brought me to , which seems to be able to subscribe to an occupancy grid and display it. I wasn't able to find a working example of that in a quick search, but there have been a lot of talks and documentation about the robot web tools packages, so I suspect that if you look hard enough, you'll be able to find something.

ahendrix gravatar image ahendrix  ( 2019-03-26 23:50:42 -0600 )edit

Looks like I was a bit slow; @billy's comment includes a working example of the class that I linked to!

ahendrix gravatar image ahendrix  ( 2019-03-26 23:52:26 -0600 )edit

1 Answer

Sort by » oldest newest most voted

answered 2019-03-26 23:49:05 -0600

billy gravatar image

updated 2019-03-26 23:52:35 -0600

See the answer to this question:

I put working code up that displays the map in webbrowser locally or remotely.

Of course all that code started as samples from and ROS tutorials - but I admit I have not tried it while gmapping.

edit flag offensive delete link more


Thank you for @ahendrix@billy! I examined how to combine ROS and javascript to make a system, but I could not find a detailed tutorial. Please tell me the information you referenced when creating your own program.

justinROScolleage gravatar image justinROScolleage  ( 2019-03-27 01:15:01 -0600 )edit

So you had me curious. Now I have tried it with gmapping and it works.But you need to tweek the code I linked to in earlier comment to continuously update the map. Add ", continuous : true" to the gridClient

var gridClient = new ROS2D.OccupancyGridClient({
  ros : ros,
  rootObject : viewer.scene,
  continuous : true

The map updates every 15 - 30 seconds on my old laptop running everything..

billy gravatar image billy  ( 2019-03-27 02:00:30 -0600 )edit

This is all I was looking for! I can’t thank you enough:) you and @ahendrix made me notice OccupancyGrid. Thank you and so so much.

justinROScolleage gravatar image justinROScolleage  ( 2019-03-27 03:10:50 -0600 )edit

Thanks @billy for your work!

Addy_thegreat gravatar image Addy_thegreat  ( 2020-05-20 01:19:28 -0600 )edit

I am using your html code give in the link for gmapping of turtlebot3_world.The page is displaying the generation process of the map but it is not showing robot's position on that map..... Looks like the roslibjs is not able to subscribe /robot_pose ..... On the console I see 'Before callback' and 'creating robotMarkr: ' but I didn't saw 'In pose subscribe callback','Got Pose data:' and 'Pose updated: ' ........please resolve my problem @billy@ahendrix@justinROScolleage

Addy_thegreat gravatar image Addy_thegreat  ( 2020-05-20 01:37:50 -0600 )edit

What commands are needed to display the robot's position on the map? When I run the page, the square where the map should be is empty @Addy_thegreat

saintdere gravatar image saintdere  ( 2020-06-12 02:37:25 -0600 )edit

Clone rosbridge_suite and mjpeg_server from github at first @saintdere

Addy_thegreat gravatar image Addy_thegreat  ( 2020-06-12 09:49:33 -0600 )edit

I have cloned those, but what are the commands you run in terminal?

saintdere gravatar image saintdere  ( 2020-06-16 02:28:05 -0600 )edit

Question Tools

1 follower


Asked: 2019-03-26 20:04:11 -0600

Seen: 3,546 times

Last updated: Mar 26 '19