Gaming ‘Live-Map’ for mobile UX considerations

I'm working on creating a page that will host a live-map with some realtime ingame data that users can quickly check without having to connect to the game itself. The type of data that users would see is the following:

1) Google map with pre-existing markers drawn on screen populated with things like capture points, objectives, and the status of objectives.

2) Ingame chat, events, and missions streamed to the site

3) The list of currently online players in the game

4) Discord widget, Teamspeak widget, other integrations

I designed this part of the UI to look like an embedded window with it's own horizontal and vertical navigation popups to make it easy to access the content while minimizing the amount of data needed to display on the screen all at once.

Desktop-Livemap

I did some initial mobile responsive work on this page as well, but i'm looking for better ways of presenting some of this content. What I've initially done is simply hide certain content on mobile and just keep the important bits in place. However it feels like too much content has been hidden away this way (only the chat window and the online players tables are accessible this way), also the map is very narrow because it needs to accommodate 2 vertical nav bars, making it awkward to use.

Mobile-Livemap

What are some other ways I can present this content so that it's consistent with the desktop experience, but also intuitive to navigate on mobile?

Tags: