ROS Resources: Documentation | Support | Discussion Forum | Index | Service Status | Q&A
Ask Your Question

How to subscribe to map and markers and display on web GUI using roslibjs?

asked 2021-03-22 06:18:58 -0600

Py gravatar image

updated 2021-03-23 05:54:53 -0600

I am looking to display a map of type nav_msgs/OccupancyGrid on a web GUI with markers overlaid on it using tools like roslibjs, ros2djs or ros3djs and vue on noetic.

Inspired by the example here, I have created an index.html and main.js file in an attempt to subscribe to my /map topic and display that in the web GUI as it grows.


<!DOCTYPE html>
<html lang="en-GB">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>

    <main id="vueApp">
        <button class="mt-2 btn btn-danger btn-lg my-auto" v-if="connected === false" @click="init" style="width: 100%;">Connect GUI To Robot</button>
        <div id="map"></div>
        <script type="text/javascript" src="main.js"></script>



new Vue({
    el: '#vueApp',

    data: {
        ros: null,
        connected: false,
        pubInterval: null,
        mapGridClient: null,
        mapViewer: null,

    methods: {

        init: function () {

            // ROSBridge Connection Object
            this.ros = new ROSLIB.Ros({
                url: 'ws://' + window.location.hostname + ':9090'

            // ROSBridge Connection Object Callbacks
            this.ros.on('connection', () => {
                this.connected = true
                console.log('Connection to ROSBridge established')
                this.pubInterval = setInterval(this.publish, 100)
            this.ros.on('error', (error) => {
                console.log('Something went wrong when trying to connect')
            this.ros.on('close', () => {
                this.connected = false
                console.log('Connection to ROSBridge was closed')

            // Map Viewer
            this.mapViewer = new ROS2D.Viewer({
                divID : 'map',
                width : 400,
                height : 400
            this.mapGridClient = new ROS2D.OccupancyGridClient({
                ros : this.ros,
                rootObject : this.mapViewer.scene,
                continuous : true
            this.mapGridClient.on('change', function(){
                this.mapViewer.scaleToDimensions(this.mapGridClient.currentGrid.width, this.mapGridClient.currentGrid.height);


This seems to be subscribing to the map and displaying it but only a small fraction of it appears as expected. See below for a comparison between the map viewed in RViz and the map view on the web GUI.

image description

image description

Also, I need to work out how to subscribe to my /visualization_marker topic of type visualization_msgs/Markeroverlay and display these markers as they become available on top of the map.

Any ideas how to solve these issues?

edit retag flag offensive close merge delete


Same issue here . Were you able to find a solution ?

ZainMehdi gravatar image ZainMehdi  ( 2021-09-07 22:10:42 -0600 )edit

1 Answer

Sort by ยป oldest newest most voted

answered 2021-09-13 06:08:56 -0600

Py gravatar image

The code snippet I ended up to solve this is as follows. This uses ros3djs instead of ros2djs.

let viewer = new ROS3D.Viewer({
    divID : 'map',
    width : 600,
    height : 600,
    antialias : true,
    intensity : 1.0,
    cameraPose : {x : -1, y : 0, z : 20},
    displayPanAndZoomFrame : true

let tfClient = new ROSLIB.TFClient({
    ros : this.ros,
    angularThres : 0.01,
    transThres : 0.01,
    rate : 10.0,
    fixedFrame : '/map'

let mapClient = new ROS3D.OccupancyGridClient({
    ros : this.ros,
    rootObject : viewer.scene,
    continuous : true
edit flag offensive delete link more


Thanks alot for your answer but I am having the same issue. When continuous : true is set it doesn't display anything in the browser.

ZainMehdi gravatar image ZainMehdi  ( 2021-09-14 21:32:43 -0600 )edit

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

1 follower


Asked: 2021-03-22 06:18:58 -0600

Seen: 870 times

Last updated: Sep 13 '21