Best way to create an interactive map with clickable icons

Hi Community,

I am looking for a bit of assistance from you all please

I am looking at creating an interactive map that has interactive icons that would allow a user to click and select rather than the what I have below. Some locations have various divisions which are quite difficult to make out as the outer ring is basically cut to incorporate the other divisions. At the moment I use a PDF document with a long list of depot contact details thereafter, however I want to create something more user friendly that we can keep on our desktops and also put online as HTML5. Below would be an example of the map.

To overcome this I was looking to create expanding pins, having some form of circular HUD animate out from the 'main pin' when the user interacts that allows the user to click the relevant division. A basic example below as if user has scrolled over the red section and expanded that depot.

As the user clicks or scrolls over the pin, the HUD would expand out allowing the user to select the relevant depot. From here all of the related information would populate at the side of the screen. I have some experience using Adobe Flash in the past, however I gather that it is not commonly used these days?

I have the map in AI with all depot pins categorised by region but I am just asking before I head into creating this what the best option would be? Would I animate each pin in Adobe edge for example?

Any suggestions would be greatly appreciated!

Thanks, Jamie