I have an example that may be close to what you're describing (not a very creative site, but it's what the client wanted): http://berger-engr.com/
Regarding RESPONSIVENESS, the example site above uses an older method to resize the entire Hype div (it was created several years ago). Hype now allow you to group your elements (map, city buttons, text, labels, etc. ) into one group then designate the Hype file as being SCALABLE (in the Scene Inspector) and then ZOOM CONTENTS for the group under SCALE BEHAVIOR, under FLEXIBLE LAYOUT, in the Metrics Inspector.
As with all scalable content, on very small screens like phones the city buttons may be too small to touch easily and the text may not be easily readable (as is the case with the site above). You can use Hype's layouts to create a layout for small screens that makes the text more readable, but with a map I'm assuming that the entire map needs to scale and fit on the screen and custom layouts may not be the answer in your case.
I hope this helps. If you need more detail, let me know. ~ John