fixed rendering layers Bubbles + Points

[kwongz]

Description

Points + Bubbles Layering inconsistency affecting chromatic checks.
This PR seperates Points and Bubbles into separate layers, ensuring Points layers on top of bubbles

Video:

1. Multiple storybook refreshes showing points layered above bubbles
2. 2 browser refreshes showing points layered above bubbles

map.layering.-.Made.with.Clipchamp.mp4

Checklist

• For UI or styling changes, I have added a screenshot or gif showing before & after
• I have added a changeset
• [ ] I have added to the docs where applicable
• [ ] I have added to the VS Code extension where applicable

[changeset-bot]

🦋 Changeset detected

Latest commit: 16d7c79

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@evidence-dev/core-components	Patch
my-evidence-project	Patch
e2e-spa	Patch
e2e-themes	Patch
@evidence-dev/components	Patch
evidence-test-environment	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 9:59pm
next-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 15, 2024 9:59pm

[netlify]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	16d7c79
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/670ee3c90dcbb70008a68da6
😎 Deploy Preview	https://deploy-preview-2612--evidence-development-workspace.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for next-docs-evidence ready!

Name	Link
🔨 Latest commit	16d7c79
🔍 Latest deploy log	https://app.netlify.com/sites/next-docs-evidence/deploys/670ee3c9d6f0640008edcd3d
😎 Deploy Preview	https://deploy-preview-2612--next-docs-evidence.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for evidence-test-env ready!

Name	Link
🔨 Latest commit	16d7c79
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-test-env/deploys/670ee3c94f8b4600082d7947
😎 Deploy Preview	https://deploy-preview-2612--evidence-test-env.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[zachstence]

What if we have multiple <Points /> components and no <Bubbles /> components, how do we guarantee correct rendering order?

[kwongz]

@zachstence looking into this now

[kwongz]

1. We are creating new panes depending on bubbles or points, to ensure the points are layered on top of bubbles.

2. Users can use the new paneType and z prop to control multiple layers of points or bubbles

Note:
If users have 2 points in a basemap without panteType and z, the map layers the points pseudo-randomly (I believe whichever point renders first). We can try to automate this for this for the user.

[hughess]

@kwongz whats the syntax for pane type and z? And what would the user be specifying with those?