Create legend g element outside of loop

and delete dead code
Ensure the hover box doesn't end up outside the containing box

Still has a bug on Chrome - the size of the mapcanvas is different on
firefox and chrome
Fix the bugs and use the correct size

by using the containing HTML element size, not the SVG size