Provide a way to update active style (so the correct style is bold in the option menu) about style-switcher

[el]

Hello,

the active state is just a css class ".active".

You can just set it to whatever you like with css.

[mmnoo]

I ended up doing that, and it blew up the style switcher. I cant rule out the complicated code base I am working in though (within the constraints of my time box anyway).

Instead of manually setting the style on the map instance and then setting css classes to make the switcher have the right style in bold, my current approach is to hack into the private properties of the style switcher instance to grab the target style button and click it with JavaScript. Very not ideal, and definitely not durable against any internal changes you guys may make, but it seems to be working without bugs currently!

[mmnoo]

Not exactly code I take pride in, but sometimes you need to do gross things quickly :)

const clickOnStyleSwitcherTargetStyleHack = ({ mapInstance, styleToSelect }: {
	styleToSelect: string;
	mapInstance: IMapInstance;
}) => {
	// Instead of manually changing the map instance style to match another map instance, we click on the other instance's style switcher target style
	// This ensures the style is bolded in both map instances, and also that subsequent styles render property (when we have a style switcher on both map sides)
	// this hack may break if the internals of the style switcher or mapbox change. Use with caution.
	// @ts-expect-error - this is definitely a dirty hack, so we are using private properties
	const styleSwitcherControl = mapInstance._controls.find((control) => control instanceof MapboxStyleSwitcherControl);
	const styleButtons = styleSwitcherControl.mapStyleContainer.children;

	for (let index = 0; index < styleButtons.length; index++) {
		const button = styleButtons[index];
		const isButtonForTheTargetStyle = button.getAttribute('data-uri') === `"${styleToSelect}"`; // getAttribute returns a string including quotes
		if (isButtonForTheTargetStyle) {
			button.click();
		}
	}
};