Package Exports

leaflet-panel-layers

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (leaflet-panel-layers) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Leaflet Panel Layers

Leaflet Control Layers extended with support groups and icons

Tested in Leaflet 0.7.3

demo: labs.easyblog.it/maps/leaflet-panel-layers

Source code:
Github
Bitbucket NPM

#Usage

Multiple active layers with icons

var baseLayers = [
    {
        active: true,
        name: "OpenStreetMap",
        layer: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
    }
];
var overLayers = [
    {
        name: "Drinking Water",
        icon: '<i class="icon icon-water"></i>',
        layer: L.geoJson(WaterGeoJSON)
    },
    {
        active: true,
        name: "Parking",
        icon: '<i class="icon icon-parking"></i>',
        layer: L.geoJson(ParkingGeoJSON)
    }
];
map.addControl( new L.Control.PanelLayers(baseLayers, overLayers) );

Build panel layers from pure JSON Config

var panelJsonConfig = {
    "baselayers": [
        {
            "active": true,
            "name": "Open Cycle Map",
            "layer": {
                "type": "tileLayer",
                "args": [
                    "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png"
                ]
            }
        },
        {
            "name": "Landscape",
            "layer": {
                "type": "tileLayer",
                "args": [
                    "http://{s}.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png"
                ]
            }
        },        
        {
            "name": "Transports",
            "layer": {
                "type": "tileLayer",
                "args": [
                    "http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png"
                ]
            }
        }
    ],
    "overlayers": [
        {
            "name": "Terrain",
            "layer": {
            "type": "tileLayer",
            "args": [
                "http://toolserver.org/~cmarqu/hill/{z}/{x}/{y}.png", {
                "opacity": 0.5
                }
            ]
            }
        }
    ]
};
L.control.panelLayers(panelJsonConfig.baseLayers, panelJsonConfig.overLayers).addTo(map);

Grouping of layers

L.control.panelLayers(
    [
        {
            name: "Open Street Map",
            layer: osmLayer
        },
        {
            group: "Walking layers",
            layers: [
                {
                    name: "Open Cycle Map",
                    layer: L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')
                },
                {
                    name: "Hiking",
                    layer: L.tileLayer("http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png")
                }
            ]
        },
        {
            group: "Road layers",
            layers: [
                {
                    name: "Transports",
                    layer: L.tileLayer("http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png")
                }
            ]
        }
    ],
    {collapsibleGroups: true}
).addTo(map);

Collapse some layers' groups

L.control.panelLayers([
    {
        name: "Open Street Map",
        layer: osmLayer
    },
    {
        group: "Walking layers",
        layers: [
            {
                name: "Open Cycle Map",
                layer: L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')
            },
            {
                name: "Hiking",
                layer: L.tileLayer("http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png")
            }			
        ]
    },
    {
        group: "Road layers",
        collapsed: true,
        layers: [
            {
                name: "Transports",
                layer: L.tileLayer("http://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png")
            }
        ]
    }
]).addTo(map);

Add layers dynamically at runtime

var panel = L.control.panelLayers();

$.getJSON('some/url/path.geojson', function(data){
    panel.addOverlay({
        name: "Drinking Water",
        icon: '<i class="icon icon-water"></i>',
        layer: L.geoJson(data)
    });
});

#Build

This plugin support Grunt for building process. Therefore the deployment require NPM installed in your system. After you've made sure to have npm working, run this in command line:

npm install
grunt