React: Leaflet Control

In this tutorial I will demonstrate how to add a control to the map. 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.

LayerControl

You can now do anything you want to do here.

var MyControl = L.Control.extend({
    onAdd: function (map){
        //Reference to the map
        this._map = map;
 
        //This is the container to return so it is available on the map
        var container = L.DomUtil.create("div");
        return container;
    },
    onRemove: function(){
        //Removes the control
        L.Control.prototype.onRemove.call(this);
        this._map = null;
    }
});

Add Control to Map

The options you add in the class definition are the options that the control gets.

var myControl = new MyControl({ position: "bottomright"});
myControl.addTo(this.map);