Map Stream Not Displayed on Web Interface – Unit 07

[motomechatronics]

Hi everyone,

I followed all the steps for the Unit 7 exercise, but nothing is displaying on the canvas. I also encountered an error in the console, as shown in the attached image. I’m using the index.html and main.js files from the last section of Unit 07.

I’ve tried troubleshooting the issue but haven’t been able to resolve it. Any help would be greatly appreciated!

[bayodesegun]

@motomechatronics
I’m sorry to hear that. Please follow the steps below to check your code.

1. Please note that you need to replace the contents of index.html and main.js with the ones given in this unit.
   • The “copy” instruction at the beginning is unnecessary and perhaps confusing. My apologies. You could create empty HTML and JS files and paste the code given in the unit into them.
2. Please ignore the duplicate commands given in the later section of the notes, as they were already specified in the “Environment preparation” section. You only need to run them once. Again, I apologize for the possible confusion here.
   • python -m SimpleHTTPServer 7000
   • roslaunch course_web_dev_ros web.launch
3. Get the new rosbridge address by running rosbridge_address in a free terminal.
4. Make all the changes in the code specified in the unit.
5. Connect, and you should see the stream. I just tried it - it worked. Hint: only connect when you have made all the specified modifications.

If it still doesn’t work, you can copy-paste the HTML and JS files given in the " Don’t fall behind!" section.

PS: I’m flagging the course notes for review to make it clearer and less confusing.

[motomechatronics]

Hi,

Thank you for your response. I followed all the steps you mentioned, but unfortunately, nothing is displayed on the canvas. I also copy-pasted the index.html and main.js files provided in the “Don’t fall behind!” section as you suggested, but the map is still not showing.

I have attached a screenshot of the web response after following your steps. Let me know if there’s anything else I should check or try. I appreciate your help!

this response of the HTML and JS files given in the " Don’t fall behind!" nothing displayed

[bayodesegun]

I just checked with your files, and it worked. The problem could appear for two reasons:

1. Did you start the mapping node? roslaunch course_web_dev_ros mapping.launch. The blank screen appears if this node is not running.
2. Is your browser blocking the connection (third-party JavaScript)? Please try another browser or enable third-party JS. We support Chrome, Firefox, and Edge.