[Visual Refresh][Maps] Update EMS styles to Borealis

[nickofthyme]

With the new Borealis theme being added in #199993 we need to update the styles of the maps visusalization.

To view the current styles you can use Maputnik app and use the Load from URL option by pointing to the raw files on github.

Maps on Borealis Light mode

Light styles stored here

Maps on Borealis Dark mode

Dark styles stored here

cc: @gvnmagni @JasonStoltz

[elasticmachine]

Pinging @elastic/eui-team (EUI)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[jsanz]

Thanks @nickofthyme for opening this issue 🙇

I'd like to put some time on thinking if the new styles could be implemented as some set of controlled changes we can put on top of our current styles to keep everything easier to maintain in the future with new releases of the OpenMapTiles schema or just go ahead and fork these new styles from our current ones.

@gvnmagni any advice on the minimum changes you'd like to see on the new styles to adapt to the Borealis theme would be appreciated! So for example for the light theme maybe a brighter gray for the sea background would be nice and a general more blueish tint to the dark theme would be a minimum but maybe there's room for more significant changes?

Sharing here a small experiment using the tinting feature in Kibana Maps basemap properties to get an idea of the effect of applying an overall color correction to our dark style.

Finally, our Tile Service is not versioned and we deploy a single basemap dataset so we will need to add new styles while maintaining the current ones for our pre-Borealis users, so we need to also put some work in our backend to create these two new styles. Issues and PRs related to that will backlink to this issue to keep track of them.

[gvnmagni]

Thank you both for starting the conversation, I have been waiting for the first release by EUI to do a proper walkthrough and take some notes about this.

If you are ok, my plan for next week is to do it and list a series of fixes that could be done very quickly to align the visual style of maps to the new theme. I don't expect this to be bigger than a few swaps of color variables.

Then, I would love to talk with you Jorge (and maybe the rest of the presentation Team + Nick + EUI people maybe) to see if it is necessary to consider bigger changes. I don't think that's going to be the case, I just want to be sure that the Presentation Team is introduced to the new tokens structure and its mechanism and we are all aligned.

[jsanz]

I've done my first attempt to create two initial styles for EMS and Borealis:

• Light theme: just change the water, water-offset, and country boundaries with a light blue following or close to the new EUI blue colors.
• Dark theme: I've colorized the current dark theme with a dark blue from the Borealis palette so all the layer colors are affected to move towards that base color.

Please take a look at the screenshots and recording below

Screenshots and recording

vokoscreenNG-2024-12-11_17-33-22.webm

I'm trying to figure out what is the best way to expose this in our manifest, since I can imagine the current styles are going to still be required after Borealis is live and we need to decide if we would migrate current maps to the new styles or ask users to update the basemaps manually to the new styles if they see it appropriate. Of course I can see the new styles being the default for any new map being created.

[gvnmagni]

Thank you Jorge, looks great!

[jsanz]

Update:

• Changes in ems-client have been released and waiting for the SKA effort to finish for the presentation team to open a PR to upgrade to @elastic/ems-client@8.6.1.
• A PR to update our tileserver docker images has been opened (see the backlinks) and is open for review. This is a first step before upgrading our backend.

Once we have the client upgraded here in Kibana and the new infra deployed (likely on the second week of January), we will open a new PR with the necessary code changes in Kibana to adopt the new styles in the automatic styling mechanism that Maps uses to select the basemap based on the light/dark theme.

[jsanz]

Update:

• The new styles are deployed in our EMS development environment and can be tested by setting up the following property in config/kibana.dev.yml

map.emsTileApiUrl: "https://tiles.maps.elastic.dev/"

• [Maps] Update @elastic/ems-client to 8.6.2 #205132 is ready for review. With this release of EMS Client, pointing to our testing EMS environment enables in Kibana the new Light blue and Dark blue styles