Add tiles editor to hide/show layers

[mustaphaturhan]

🛠️ Fixes Issue

Related with #307 but it is not completely fix the problem. It adds new tiles tab to the homepage, and gives capability of making layers visible/invisible.

👨‍💻 Changes proposed

• Adds new tiles tab
• Lists the layers of style.json
• Adds search input for layers

📷 Screenshots

[ghost]

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

[nilsnolde]

great, thanks!

do you want to have some MVT selector in the Tiles tab eventually, where the /tile endpoint would be hard-coded, but one could also have their custom style.json selectable? I guess you just show the currently selected style.json to showcase the functionality and lay the groundwork?

[mustaphaturhan]

I guess you just show the currently selected style.json to showcase the functionality and lay the groundwork?

@nilsnolde yes, I am still trying to understand what is the best experience for tiles tab. in current implementation, we are getting defined style from maplibre-gl instance directly, and we are listing the layers from it. I have two options connect implementation to /tile endpoint but I am not sure which one we should go with.

option 1: we can create our own style.json that works with tile endpoint -which is basically the one that shared in valhalla tile documentation- and it lists all possible layers. and we disable the style selector. when user goes to tiles tab, only our custom style can be selected.

option 2: we can keep current selected style and we can append our source and layers to it like:

  "sources": {
    // ...other sources like versatiles-shortbread,
    "valhalla": {
      "type": "vector",
      "tiles": [
        "http://localhost:8002/tile?json=%7B%22tile%22%3A%7B%22z%22%3A{z}%2C%22x%22%3A{x}%2C%22y%22%3A{y}%7D%7D"
      ],
      "minzoom": 7,
      "maxzoom": 22,
      "scheme": "xyz"
    }
  },
  "layers": {
    // ...layers from current style
    // ...layers from our tiles
  }

option 3: we can make the style.json of valhalla (the one we created in option 1 :)) selected when user go to tiles tab, and we can give freedom to select any style later.

what do you think? If I'm misinterpreting what we need to do, please let me know.

[nilsnolde]

thanks for outlining a few options @mustaphaturhan!

I actually think that option 2 would be enough no? it could be interesting for some custom style.json, but it seems that option 2 could be a "via waypoint" towards option 3 which we could add if there's demand?

[nilsnolde]

in any case, this PR is good as it is:)