Vector based map with redesigned people and zones

[matthiasdebaat]

What this prototype is

A move from the current PNG-tile map to a vector-based basemap, with a contextual surface holding two segments: People and Zones. On desktop it's a panel on the right; on mobile it's a bottom sheet. The People segment shows who's where. The Zones segment shows your zones and lets you manage them, adding a new one or editing an existing one, directly instead of through a settings form.

Try prototype

Why vector

The PNG map is raster tiles: it blurs when you zoom, doesn't adapt to light and dark themes, and gives us no control over styling. A vector basemap is crisp at any zoom, themeable, and lets us style the map to fit HA instead of fitting HA around the tiles.

The right panel

People segment. Who's where, at a glance.

Zones segment. Your zones in a list, with management in place. Add a new zone or edit an existing one from here rather than typing latitude, longitude and radius into Settings › Areas & Zones.

Polygon zones

I've added polygon zones to the concept. Worth being upfront about the limitation: this can't ship to the mobile apps until Apple and Google add support for it in their geofencing APIs. So it's in here to show the direction, not as something we can turn on everywhere today.

Curious about your feedback!

[matthiasdebaat]

And a quick demo how it would work on mobile.

CleanShot.2026-07-29.at.11.56.33.mp4

[bgoncal]

Looking good! Should we have a tab for devices as well? or something that are not people neither zone

[matthiasdebaat]

Yeah smart!

[marcinbauer-ohf]

Devices might be tricky, because most devices do not have location data or are just home.

[matthiasdebaat]

We had a small chat in Discord about the zoomed out version, where it shows multiple worlds.

And this is what Claude told me:

MapLibre 5 supports Globe projection. The map renders as an actual sphere instead of a flat Mercator sheet, so zooming out gives you one planet with no repeats and no seams, and the flattening back to a flat map as you zoom in is animated.

This needs an upgrade from version 4, and our people clustering and zone drag handles all do screen-space project() maths that gets unreliable near the curved edge. So those need rework before it's safe.

[bgoncal]

On the large screen size version, for some reason I would prefer to have the floating container on the left side, perhaps because it is what Google/Apple Maps do as well as some other apps like ABRP, if no strong opinions about it, should we keep consistency?

[matthiasdebaat]

Agreed that it's more common to have it on the left. I want to make sure that it's not competing with the left menu.

Don't have a strong opinion, so curious what the general consensus would be.

[bgoncal]

Oh true.. I forgot about this, I'll think about it as well, but I know Google Maps does this already, sidebar + floating container

[bgoncal]

We could also have a "+" button somewhere that allows user to add a "Person" or "zone", improving discoverability and adding an intuitive way to add those.

[marcinbauer-ohf]

@matthiasdebaat, contextually, it's a good idea and makes sense to see these things on a map. I think the title doesn't convey your idea well enough and might get missed. Since your main point is about where and what to present, I'd change the narrative towards that and not just "Vector map" ?

[matthiasdebaat]

Agreed, updated it