Leaflet base layers control with icons
Switch branches/tags
Clone or download
Latest commit ea9af76 Jun 25, 2018
Permalink
Failed to load latest commit information.
dist Added dist Jun 25, 2018
examples For Leaflet 1.2 Aug 27, 2017
src Added dist Jun 25, 2018
.eslintrc Fixed eslint Apr 11, 2017
.gitignore Added dist Jun 25, 2018
.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 updated Apr 11, 2017

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);
});