feat: added custom layer editor to tiles panel

[s4chinjha]

🛠️ Fixes Issue

Closes #323

---

👨‍💻 Changes proposed

• Added a store to keep track of custom layers the user adds
• Added a dialog with a JSON text area where users can paste a MapLibre layer definition and add it to the map
• The dialog validates the input before adding,checks for valid JSON, a string id field, and that the id is not already on the map
• Custom layers show up in their own section at the bottom of the Tiles panel with a visibility toggle and a remove button
• Custom layers survive map style reloads, they get re-applied automatically
• Custom layers referencing valhalla-tiles survive the Valhalla source being toggled off and back on
• Fixed a bug where custom layers were showing up inside standard layer groups as well as the Custom Layers section
• Added accessible labels so screen readers can identify the toggle and remove buttons for each layer
• Added 47 new tests, 836 passing in total

---

📷 Screenshots

Before (standard tiles)

After (custom layer added)

Layer definition used above:

{
  "id": "edges-highlight",
  "type": "line",
  "source": "valhalla-tiles",
  "source-layer": "edges",
  "paint": {
    "line-color": "#ff0000",
    "line-width": 2
  }
}

This highlights all the edges in red.

---

📄 Note to reviewers

• Layers are lost on page refresh, no persistent storage yet

AI Contribution:
I've used AI assistance to help me write most of the code & for debugging the code.
I've reviewed every change, ran all the tests myself, and manually verified the feature works properly.

[ghost]

Preview is ready! 🚀 You can view it here: https://valhalla-app-tests.gis-ops.com/354

[nilsnolde]

remember to un-draft PRs when you want to be reviewed! if it is ready, then we're missing a real proof, e.g. providing a style.json for some custom layer.

[nilsnolde]

this is really cool! cc @chrstnbwnkl

one change: unless "Append Valhalla layers" is active, the new button shouldn't be active IMO, bcs that's a no-op.

[mustaphaturhan]

We don't want to introduce new stores to the project, the old "directions", "isochrone" stores are artifacts from redux.

Usage of zustand stores in this component is totally unnecessary.

[mustaphaturhan]

This store shouldn't be exist at all.

[mustaphaturhan]

let's call it value or jsonValue

[mustaphaturhan]

I don't think this div is in the correct place. Where we are adding the padding? To the content of dialog, or to the trigger?

[s4chinjha]

@nilsnolde @mustaphaturhan here i have tried to implement the changes suggested
In the first commit i've renamed json to jsonValue, removed the extra div wrapper and disabled the add Custom Layer button when Append Valhalla layers is off.
And in the second commit i've removed the custom-layers-store.

Also i've updated the tests accordingly.

[nilsnolde]

nice, thanks!

tiny nit: once I add a custom layer and disable Valhalla layers, the "add" button is still active. that's just a small nit, meaning if it's quick to do, pls do, but if it's more than 2 lines of code, just don't:)

[s4chinjha]

nice, thanks!

tiny nit: once I add a custom layer and disable Valhalla layers, the "add" button is still active. that's just a small nit, meaning if it's quick to do, pls do, but if it's more than 2 lines of code, just don't:)

Thanks for the nit! I went ahead and fixed it.

[nilsnolde]

looks great, thanks!