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

couldn't add more than 3 layers #10

Closed
wondie opened this issue Sep 22, 2015 · 1 comment
Closed

couldn't add more than 3 layers #10

wondie opened this issue Sep 22, 2015 · 1 comment

Comments

@wondie
Copy link

wondie commented Sep 22, 2015

I tried to add more layers using the plugin as a group but I can only add 3 layers. The rest are not even added in html. I am using bootleaf template using bootstrap, jquery core, and jquery ui with leaflet 0.7.3. My code is the following.

var baseLayers = [
    {
        name: "Mapbox Street",
        layer: streets,
        "active": true
    },
    {
        name: "Esri Satellite",
        layer: satellite
    },
    {
        name: "Mapbox Grayscale",
        layer: grayscale
    }
];
var overLayers = [
    {
        group: "Lake Victoria Basin Land Cover",
        layers: [
            {
                name: "Land Cover - 2014",
                icon: iconByName('landcover'),
                layer: landcover2014
            },
            {
                name: "Land Cover - 2014",
                icon: iconByName('landcover'),
                layer: landcover2014
            },
            {
                name: "Land Cover - 2014",
                icon: iconByName('landcover'),
                layer: landcover2014
            }
        ]
    },
    {
        group: "National Boundaries",
        layers: [
            {
                name: "National Boundaries",
                icon: iconByName('boundaries'),
                layer: boundaries
            }
        ]
    }
];

panelLayers = new L.Control.PanelLayers(baseLayers, overLayers, {collapsed: false});

map.addControl(panelLayers);

I have used jquery to hide layer labels on collapse as they are shown on collapse too.

 $(".leaflet-panel-layers-overlays span").css("display", 'none');
$( ".leaflet-panel-layers" ).mouseover(function() {
    $(".leaflet-panel-layers-overlays span").css("display", 'inline');
    $(".leaflet-panel-layers-overlays input").css("display", 'inline');
});
$( ".leaflet-panel-layers" ).mouseout(function() {
    $('.leaflet-panel-layers-overlays span').hide();
    $(".leaflet-panel-layers-overlays input").css("display", 'none');
});
@stefanocudini
Copy link
Owner

For hidding elements the best way is CSS.

Which way you use to add nerw layers?

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