A course format would probably be the correct way to do this, but it would be a lot of work too. And I have never written one.
Just another option, you might start by cloning the label module to something new, and add all your javascript fancy stuff to that. Then add the new label to the course page. Optionally using stealth mode to hide the activities from displaying normally on the same page.
Thank you Justin for your awnser you saved me a lot of time, stealth mode is really useful and I didn't know it existed now I'm looking through the label module to see how it outputs on the course page.
I have not tried this myself, but another user posted about their custom label plugin which does some fancy things here.
https://moodle.org/mod/forum/discuss.php?d=375398
Maybe its useful.
Thanks a lot Justin with your help I was able to make it work I used my js inside the moustache though I don't if there is a better way, this is how it looks now. I still have a lot of work on the map to do but at least now I know I can show it where I want 
