Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

4 control panel shows when the layer is added to the map #73

Open
Rakhee06 opened this issue Feb 14, 2024 · 2 comments
Open

4 control panel shows when the layer is added to the map #73

Rakhee06 opened this issue Feb 14, 2024 · 2 comments

Comments

@Rakhee06
Copy link

Rakhee06 commented Feb 14, 2024

hi,

Thank for the library! I am new to leaflet and still trying to wrap my head around the implementation/plugins.
I am trying to use Leaflet.Control.Layers.Tree package in Next.js application. Using the following versions:

  • next: 14.0.4
  • react-leaflet: 4.2.1
  • leaflet: 1.9.4
  • @types/leaflet: 1.9.8
  • leaflet.control.layers.tree: 1.1.0

When I create a base tree and try to add it to the map, I see 4 control panels. In addition, the controls also doesn't work. I am not sure if I am missing something in the implementation. Any help is much appreciated. Thank you!

Result:

Screenshot 2024-02-14 at 11 56 44 AM

Screenshot 2024-02-14 at 12 02 58 PM

let esri = L.tileLayer(
    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
)

let baseTree = {
    label: 'Base Layers',
    name: 'Base Layers Name',
    layer: france,
    children: [
        {
            label: 'Terminal',
            name: 'Terminal Name',
            layer: germany,
            children: [
                { label: 'Level 1', name: 'Level 1 Name', layer: osm },
                { label: 'Level 2', name: 'Level 2 Name', layer: esri },
            ],
        },
    ],
}

var ctl = L.control.layers.tree(baseTree, undefined, options)
ctl.addTo(map)
@jjimenezshaw
Copy link
Owner

I have not tested the library with leaflet 1.9.8 (and I do not know when I will have time for that). I don't know if the problem is due to the different version of leaflet.

I am bit confused with the layers in the tree. As they are tileLayers, there can be only one. Having Germany inside of France, and osm and esri inside of Germany sounds to me that there is something wrong. And those layers are not defined in your code.
If you want overlay layer, you have to use the second parameter, that is undefined in your example.

It is better to create a complete piece of code that can be tested, without any other dependency (only leaflet and this plugin).

@Rakhee06
Copy link
Author

Thank you for getting back to me so quickly! My goal is to have multiple base layers, each with its own tile layer, and then add multiple overlays on top of the selected base layers. Right now, I'm experimenting with just adding different base layers. I appreciate your suggestion to test the code without any dependencies. I'll let you know how it goes. Thank you again!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants