React: Leaflet LayerGroup

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

Before We Begin:

• Refer to how to Build a React/Python Site to get your basic site up and running.
• Refer to Basic Leaflet Map to get your basic leaflet control up and running.

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