Multiple mapbox components on the same page about blade-ui-kit

[driesvints]

Good spot. I'll try to tackle this soon but currently trying to focus a bit on the docs.

[driesvints]

Heya, so I did some digging. Actually, the fact that it would use the same variable is irrelevant because it's scoped in the callback. However, this could never work anyway because there can't be two window.onload calls on the same page as they'd overwrite each other. So the solution to this would be a refactor to a lazy initialize somehow. I'd now refactored all components that used window.onload to Alpine's x-init loading. This should allow components which use a JS callback to initialize JS scripts to be used on the same page.

Also: remember that if you want to use two mapbox components on the same page that you need to set two different ids. The Mapbox component has an id of map by default. Two HTML elements cannot have the same ID. So try this:

<x-mapbox id="map1" />
<x-mapbox id="map2" />