Um… neither?
While I might still use Hype to solve that problem, as it could be helpful to manage multiple screen sizes, I'd probably use JavaScript. A similar question regarding interactive layered maps was asked earlier on this forum… Rogue Button Behaviors on animation
To answer it, I created this video…
It depends what you're trying to do though. I like leaflet.js for creating interactive maps, but I haven't used it to create routes though. If you're manually creating the maps, and manually creating the image layers, you might not need to use leaflet.js.
This works because it's basically the same background… planet earth. It's only changed once and the code is modified to handle that. So, in your project, is it one overall map or are there several different locations?
Also, if JavaScript is too complex for you, then maybe this Hype template might be the way to go…
https://photics.com/free-template-tuesday-22-tumult-hype-menu/
…it's a menu, where a “persistent symbol” is used to navigate through the different scenes. It sounds like you're using animation with each map, so switching through scenes could be used to restart those animations easily. (The scenes change, but the menubar stays put — it's a persistent symbol.)
I don't think 30 would fit well on a bar like that though, not unless it had submenus. So, I think the bigger problem is imagining the interface first, then figuring out how to build it.
Can you draw what you want to create? 