Skip to content

feat(maplibre): provide basic theme for maplibre - #2029

Open
spliffone wants to merge 2 commits into
mainfrom
feat/maplibre-theme
Open

feat(maplibre): provide basic theme for maplibre#2029
spliffone wants to merge 2 commits into
mainfrom
feat/maplibre-theme

Conversation

@spliffone

@spliffone spliffone commented May 8, 2026

Copy link
Copy Markdown
Member

Provide an experimental styling for maplibre and provide the ground for further features e.g. 3d buildings, localization, marker, cluster support...

See also #829


Documentation.
Examples.
Dashboards Demo.
Playwright report.

Coverage Reports:

Code Coverage

@spliffone
spliffone requested review from a team as code owners May 8, 2026 09:30

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces MapLibre integration into the @siemens/element-ng library, providing theme-aware style specifications and Angular signal-based utilities for map state management. Feedback focused on improving visual hierarchy through specific font weights, removing redundant dependency injections, and ensuring consistent UX by adjusting cursors for disabled elements. Additionally, several hardcoded color values in the SCSS files should be replaced with Siemens Element semantic tokens to maintain theme consistency.

Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/si-maplibre-style.ts Outdated
Comment thread projects/element-ng/maplibre/si-maplibre-style.ts Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
@spliffone
spliffone force-pushed the feat/maplibre-theme branch 4 times, most recently from 3030ff8 to 1ff5366 Compare May 8, 2026 10:57
@spliffone spliffone added this to the 49.x milestone May 8, 2026
@spliffone spliffone added the feature Marks feature requests and feature implementations label May 8, 2026
@spliffone
spliffone force-pushed the feat/maplibre-theme branch 2 times, most recently from 120f45c to e8d42d1 Compare May 9, 2026 15:06
@kfenner kfenner added the core-team-discussion Topics that should be discussed in the core team meeting label May 11, 2026
@spliffone
spliffone force-pushed the feat/maplibre-theme branch 2 times, most recently from 938da06 to 5a3ca9c Compare May 12, 2026 06:25
@spliffone

Copy link
Copy Markdown
Member Author

@kfenner @timowolf @dr-itz So which direction shall we go, shall we keep it as it is or do we want to move everything into '@siemens/maps-ng' which would mean we need to relaxe the dependencies and it requires multiple entry points. (I guess that we be breaking)

I would prefer to keep it in '@siemens/element-ng' since we did the same for other dependencies e.g. ag-grid too.

@spliffone
spliffone force-pushed the feat/maplibre-theme branch from 1a57571 to 03aae8a Compare May 12, 2026 14:49
@kfenner kfenner removed the core-team-discussion Topics that should be discussed in the core team meeting label May 18, 2026
@kfenner
kfenner requested a review from chintankavathia as a code owner May 20, 2026 17:00
@spike-rabbit spike-rabbit modified the milestones: 49.x, 51.0.0 Jul 1, 2026
@spliffone
spliffone force-pushed the feat/maplibre-theme branch 4 times, most recently from 74cf465 to d5a664c Compare July 16, 2026 07:41
@spliffone spliffone added the core-team-discussion Topics that should be discussed in the core team meeting label Jul 17, 2026

@spike-rabbit spike-rabbit left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks amazing

Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/si-maplibre-style.ts Outdated
Comment thread projects/element-ng/ng-package.json Outdated
@spliffone
spliffone force-pushed the feat/maplibre-theme branch 3 times, most recently from 089760c to db36b98 Compare July 27, 2026 07:03
@spliffone
spliffone force-pushed the feat/maplibre-theme branch 5 times, most recently from 15c3769 to b087b01 Compare July 27, 2026 08:11
@spliffone
spliffone requested a review from spike-rabbit July 27, 2026 08:23
@spliffone
spliffone force-pushed the feat/maplibre-theme branch from b3f8ce7 to 94cd4f0 Compare July 27, 2026 11:08

@spike-rabbit spike-rabbit left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dr-itz can you please have a look here? For me it looks good beside the small comment.

Comment thread projects/element-ng/theme/si-theme-signals.ts Outdated
@spliffone
spliffone force-pushed the feat/maplibre-theme branch from 94cd4f0 to 404a906 Compare July 27, 2026 11:44
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
.maplibregl-ctrl-scale {
@extend %base-control;

font-size: 10px;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rem value?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's not possible, maplibre calculate the width and apply the width via styles see
image

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but that's the width of the scale. I tried 0.625rem and it works fine for me. It's correctly aligned and I don't see overlaps or anything

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking the same, but then played with the zoom level and it looks like this:
image

Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
Comment thread projects/element-ng/maplibre/styles/maplibre-gl.scss Outdated
@kfenner kfenner removed the core-team-discussion Topics that should be discussed in the core team meeting label Jul 27, 2026
@spliffone
spliffone force-pushed the feat/maplibre-theme branch 2 times, most recently from 83d39f3 to 6fa6202 Compare July 27, 2026 16:35
@spliffone
spliffone force-pushed the feat/maplibre-theme branch from b342f43 to 5fe5564 Compare July 28, 2026 05:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feature Marks feature requests and feature implementations

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants