Extend the map spark

[erkr]

It would be great when the map spark could add more options:

• an overlay to control hours to show. alternative is using an input helper and template the value. But that makes it a global server setting for all users, instead of limiting the scope to the current browser session.
• an overlay control to filter sub sets of the configured card entities (similar alternative with the same drawback)

Best Eric

[dcapslock]

@erkr thanks for the ideas. My thoughts:

an overlay to control hours to show.

UIX to have a generic slider spark which will overlay a slider with generic action on slider thumb released. That action can be a fire-dom-event to use along with event spark and then template hours_to_show.

Also, this can likely already be done with a separate custom slider, albeit not as an overlay.

an overlay control to filter sub sets of the configured card entities

Similar to above but slightly more difficult.

[dcapslock]

FYI - decided to just do a slider for hours_to_show to keep it simple. Working on this now.

Genmini's first test visual...

[erkr]

I agree the other one is more complex. Also HA does offer a multi select for that.

[dcapslock]

hours_to_show for map spark. Doco draft - all testing well except I am needing to get valid test paths data for my test scanrio and can them confirm 100% working.

---

| hours_to_show | boolean or object | false | Enable hours to show slider overlay. true uses all defaults; pass an object to customise (see below). |

Hours to Show sub-keys

Key	Type	Default	Description
min	number	0	Minimum hours to show on the slider.
max	number	24	Maximum hours to show on the slider.
step	number	1	Increment step size of the slider.
position	object	{bottom: 10px, right: 10px}	CSS position of the slider capsule. Accepts top, bottom, left, and right keys (numbers are treated as pixels).
tooltip_distance	number	20	Distance in pixels of slider tooltip away from thumb.

Hours to Show CSS variables

The history duration slider can be styled using CSS variables placed on the ha-card or any ancestor:

Variable	Default	Description
--uix-map-slider-background	rgba(255,255,255,0.8)	Background color of slider container.
--uix-map-slider-text-color	var(--primary-text-color, #212121)	Color of the duration label next to the slider.
--uix-map-slider-width	100px	Explicit width of the slider component.
--uix-map-slider-border-radius	20px	Rounded corner styling for the background capsule.
--uix-map-slider-padding	4px 12px	Padding of the capsule container.
--uix-map-slider-box-shadow	0 1px 5px rgba(0,0,0,0.4)	Box shadow of the container element.
--uix-map-slider-z-index	1000	Controls overlay depth of the slider capsule.
--uix-map-slider-label-min-width	28px	Minimum width of the duration label.
--uix-map-slider-thumb-size	(unset)	Height and width of the slider thumb.
--uix-map-slider-thumb-height	16px	Height of the slider thumb component structure (defaults to thumb-size if set).
--uix-map-slider-thumb-width	16px	Width of the slider thumb component structure (defaults to thumb-size if set).
--uix-map-slider-track-size	4px	Thickness of the slider track.
--uix-map-slider-track-color	var(--disabled-color)	Background base track color.
--uix-map-slider-indicator-color	var(--primary-color)	Color of the active indicator bar.
--uix-map-slider-thumb-color	var(--uix-map-slider-indicator-color)	Color of the circular slider thumb.
--uix-map-slider-thumb-hover-opacity	0.08	Hover opacity surrounding the thumb.
--uix-map-slider-thumb-pressed-opacity	0.12	Opacity of thumb halo while active/pressed.
--uix-map-slider-thumb-box-shadow	inherit	Custom shadow styling applied to the interactive thumb item.
--uix-map-slider-tooltip-color	var(--primary-text-color)	Text color inside the popup thumb tooltip.
--uix-map-slider-tooltip-font-size	var(--ha-font-size-s)	Font size of text inside the tooltip.
--uix-map-slider-tooltip-font-weight	var(--ha-font-weight-normal)	Font thickness of elements inside tooltip.
--uix-map-slider-tooltip-background-color	var(--secondary-background-color)	Background color of popup tooltip bubble.
--uix-map-slider-tooltip-border-radius	var(--ha-border-radius-sm)	Corner rounding of tooltip bubble.
--uix-map-slider-tooltip-border-width	0px	Border thickness of tooltip.
--uix-map-slider-tooltip-border-color	currentColor	Border color of tooltip bubble.
--uix-map-slider-tooltip-border-style	none	Border line style.

Hours to show slider mode:

When active, the spark:

1. Renders a horizontal ha-slider control in a capsule-shaped overlay container.
2. If tour is also active and at the default position, the slider is automatically shifted leftwards to prevent visual overlapping.
3. Automatically sets, clamps, and updates hui-map-card _config.hoursToShow based on slider drags and releases to fetch history records in real-time.
4. Smoothly preserves the user's selected value across template-driven forge re-renders.

[dcapslock]

Created FR #392. WIP in PR #393

[erkr]

Looking forward to have it released :-)

[dcapslock]

Available now in 7.6.0-beta.3 (also now beta.4 which updates the tour icon to have a box shadow like the new slider).

[dcapslock]

OK, on to an overlay control to filter sub sets of the configured card entities. I will check out Home Assistant's availble controls and see what we come up with.

[erkr]

I configured the hours to show spark and it works great. Have a suggestion though!

I expected a slider spark where I had to tweak yaml to feed the thumb position into hours_to_show.
To my surprise you went a step further by feeding hours_to_show automagically. Really user friendly!

My suggestion:
This slider is so nice, that I suggest to make it an slider spark in stead of a map spark.
It then can then be used for the history and/or statistic cards as well!!
By adding an additional option to specify the card element to control (default hours_to_show), it even becomes more generic applicable

Thanks Eric

[dcapslock]

This slider is so nice, that I suggest to make it an slider spark in stead of a map spark.

Sliders can be tricky to support when used with other cards that may have slide/touch integartion hence the decision not to have a generic slider. I have requested for custom fetures slider to have default value when used with no enity (Nerwyn/custom-card-features#208). If that gets imoplmented then that will be an option.

For history or statistics there are other options to adjust time periods using one of the many custom cards including apex-charts, controlling options using buttons et sending events.

Finally, when using a config update on cards, they will reload. Not so much an issue for history / statistics but is for map as it will recenter/zoom etc so makes much more sense for a tightly integrated slider on map.

[erkr]

A, that makes sense. Not my brightest idea after all ;-)
I'm very happy with the slider. It works really great

[dcapslock]

Map entity filter sneak peek and draft doco... taking care with this as filtering entities also impacts map tour. Also map spark has been updated to correctly allow for tour with show_all: true or geo_location_sources.

---

• Entity filter overlay mode (entity_filter: true | object): Injects an interactive checkable dropdown checklist overlay into the map allowing users to toggle visible entities on the map in real-time.

Configuration

Key	Type	Default	Description
entity_filter	boolean or object	false	Enable entity filter checklist dropdown overlay. true uses all defaults; pass an object to customise (see below).

Entity Filter sub-keys

Key	Type	Default	Description
position	object	{bottom: 10px, right: 10px}	CSS position of the filter button capsule. Accepts top, bottom, left, and right keys (numbers are treated as pixels).
size	string	s	Button size (e.g. s, m, l).
variant	string	neutral	Button variant brand/style (e.g. brand, neutral, danger, warning, success).
appearance	string	filled	Button presentation appearance (e.g. accent, filled, plain).
icon	string	mdi:filter-variant	Trigger button start-icon representation.
label	string	Filter	Trigger button label string.

Entity Filter CSS variables

The entity filter dropdown can be styled using CSS variables placed on the ha-card or any ancestor:

Variable	Default	Description
--uix-map-entity-filter-background	rgba(255,255,255,0.8)	Background color of entity filter container.
--uix-map-entity-filter-padding	4px	Padding of the filter capsule container.
--uix-map-entity-filter-border-radius	20px	Rounded corner styling for the background capsule.
--uix-map-entity-filter-box-shadow	0 1px 5px rgba(0,0,0,0.4)	Box shadow of the container element.
--uix-map-entity-filter-z-index	1000	Controls overlay depth of the filter capsule.
--uix-map-entity-filter-dropdown-min-width	180px	Minimum width of the opened dropdown menu list.

Entity filter overlay mode:

When active, the spark:

1. Renders a dropdown overlay using ha-dropdown with a trigger ha-button.
2. Resolves and displays each map entity as a checkbox using Friendly Name.
3. Directly filters visible entities. As a map card will error with no entities, deselecting any last selected entity is disabled.
4. If the show_all: true is set in forged map card config, a Show All option will also show in the dropdown. While entities are filtered, any new map entities will not show until Show All is selected.
5. If touror hours_to_show is also active and at the default position, the slider is automatically shifted leftwards to prevent visual overlapping.
6. If tour is also active, changing filtered entities will cause the map tour to restart.

Jun-23-2026.21-03-10.mov

[dcapslock]

Anyhow, maybe I will have a group option for the filter menu and then you can choose to select the groups or still entities in the sub menu.

Gemini is working on this now :-)

[dcapslock]

Group option now available in 7.6.0-beta.6. See updated doco for group option - either set to true or an object to customise grouping labels.

[erkr]

Amazing. This is a Hugh improvement😊 give Gemini a coffee 😉

[dcapslock]

I had to tidy this one up a bit. Gemini got confused and was both checking and selecting menu items. But it did cut down dev time as always. But $$ now so can’t do much dev this way.

[erkr]

Never used Gemini myself, but ChatGPT is confused most of the time