One issue you might run into with a custom legend on a map is this:

If your map doesn't take up the full width and height of the page, the legend might appear at the top of the page, outside of the map.

My preferred method for fixing this is to "wrap" the map and legend together in a div—I'm giving mine the class "map-wrapper"—then in CSS give it position: relative. Now your overlays should stay on top of the map.