React: Leaflet LayerGroup

This entry is part 6 of 9 in the series React: Leaflet

In this tutorial I will demonstrate how to add a layer group control. Refer to the documentation for more information.

Before We Begin:

LayerGroup

You can now do anything you want to do here.

var MyLayerGroup = L.LayerGroup.extend({
    onAdd: function(map) {
        //Reference to the map
        this._map = map;
    },
    onRemove: function(){
        //Removes the layer
        L.LayerGroup.prototype.onRemove.call(this, map);
    },
    initialize: function (options) {
        L.LayerGroup.prototype.initialize.call(this);
        //The options sent in from initialisation
        L.Util.setOptions(this, options);
    }
});

Add LayerGroup to Map

var myLayerGroup = new MyLayerGroup();
myLayerGroup.addTo(this.map);

Overlay

If you want to add the layergroup to overlays menu.

this.layerControl.addOverlay(myLayerGroup, "My Layer Group");