Rosanswers logo

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.

Originally posted by justinROScolleage on ROS Answers with karma: 3 on 2019-03-26

Post score: 0

Original comments

Comment by ahendrix on 2019-03-26:
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.

Comment by justinROScolleage on 2019-03-26:
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.

Comment by ahendrix on 2019-03-26:
I don't know much about javascript or the ROS web tools, but some quick browsing of the documentation brought me to http://robotwebtools.org/jsdoc/ros2djs/current/maps_OccupancyGridClient.js.html , 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.

Comment by ahendrix on 2019-03-26:
Looks like I was a bit slow; @billy's comment includes a working example of the class that I linked to!


1 Answer 1


Rosanswers logo

See the answer to this question: https://answers.ros.org/question/315015/what-is-the-best-way-to-monitor-and-remote-control-the-robot-from-tablet/#315022

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

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

Originally posted by billy with karma: 1850 on 2019-03-26

This answer was ACCEPTED on the original site

Post score: 2

Original comments

Comment by justinROScolleage on 2019-03-27:
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.

Comment by billy on 2019-03-27:
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..

Comment by justinROScolleage on 2019-03-27:
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.

Comment by Addy_thegreat on 2020-05-20:
Thanks @billy for your work!

Comment by Addy_thegreat on 2020-05-20:
I am using your html code give in the link https://answers.ros.org/question/315015/what-is-the-best-way-to-monitor-and-remote-control-the-robot-from-tablet/#315022 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

Comment by saintdere on 2020-06-12:
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

Comment by Addy_thegreat on 2020-06-12:
Clone rosbridge_suite and mjpeg_server from github at first @saintdere

Comment by saintdere on 2020-06-16:
I have cloned those, but what are the commands you run in terminal?

Comment by Addy_thegreat on 2020-06-16:
If you have installed it right enter this command in terminal

roslaunch rosbridge_server rosbridge_websocket.launch

and on new terminal run

rosrun mjpeg_server mjpeg_server


http://wiki.ros.org/rosbridge_suite/Tutorials/RunningRosbridge You visit this link to learn more about it @saintdere

Comment by saintdere on 2020-06-18:
The mjpeg_server is from this but isn't it deprecated? And you use this for turtlebot3 in gazebo right? So you run those commands along with the turtlebot3_world command?

Comment by Arun_kumar on 2021-04-02:
@billy I have tried the way told in this thread but at the webpage the map is offset at the left-bottom corner inside the Scence Viewer. How should view the map in full size??

Comment by billy on 2021-04-03:
@Arun_kumar...I have a confession. I'm not a web programmer. It is set to the left side of my browser as well and I never saw a need to change it. I suggest you research HTML or CSS page formatting and put the grid client in a box in the middle of the page.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.