Leaflet base layers control with icons
JavaScript CSS
Latest commit 7feb6ce Mar 18, 2016 @zverev zverev allow mixed line endings
Permalink
Failed to load latest commit information.
examples commonjs support Nov 9, 2015
src build on prepublish Nov 9, 2015
.eslintrc allow mixed line endings Mar 18, 2016
.gitignore ignore log files Nov 9, 2015
.npmignore ignore log files Nov 9, 2015
LICENSE Fixed dates in licence Jun 16, 2015
README.md demo -> examples Jun 15, 2015
demo.gif update readme Jun 8, 2015
gulpfile.js add linter Sep 21, 2015
package.json build examples on postinstall Nov 9, 2015

README.md

Leaflet-IconLayers

Leaflet base layers switching control with icons (example)

Requires Leaflet 0.7.3 or newer; IE9+

Extends L.Control.

Using Control

Copy files from src dir and include them to your project.

Basic usage:

L.control.iconLayers(layers).addTo(map);

In order to interact with layers Leaflet-IconLayers uses an array of layer objects, that have following fields:

  • icon - icon url (typically 80x80)
  • title - a short string that is displayed at the bottom of each icon
  • layer - any Leaflet ILayer

You can pass this array to construtor or use setLayers method.

The second constructor argument may be options hash. It is also ok if it is the only one.

Options

  • maxLayersInRow - the number of layers, that a row can contain
  • manageLayers - by default control manages map layers. Pass false if you want to manage layers manually.

plus L.Control options (position)

Methods

  • setLayers(<Array> layers) - replace layers array with a new one
  • setActiveLayer(<ILayer> layer) - set active layer
  • collapse() - hide secondary layers
  • expand() - show hidden layers

Events

  • activelayerchange - fires when user changes active layer (clicks one of layer icons). The changed layer is passed in layer key of an event object (see an example).

Detailed example

var iconLayersControl = new L.Control.IconLayers(
    [
        {
            title: 'Map', // use any string
            layer: mapLayer, // any ILayer
            icon: 'img/mapIcon.png' // 80x80 icon
        },
        {
            title: 'Satellite',
            layer: satLayer,
            icon: 'img/mapIcon.png'
        }
    ], {
        position: 'bottomleft',
        maxLayersInRow: 5
    }
);

// new L.Control.IconLayers(layers)
// new L.Control.IconLayers(options)
// are also ok

iconLayersControl.addTo(map);

// we can modify layers list
iconLayersControl.setLayers(layers);

iconLayersControl.on('activelayerchange', function(e) {
    console.log('layer switched', e.layer);
});