React: Leaflet html Controls

In this tutorial I will demonstrate how to add html controls to your leaflet 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.

Really you can create any html control just substitute div for whatever you want. Below are just some basic examples.

Div

var divContainer = L.DomUtil.create("div", "myClassName");

Image

var img = L.DomUtil.create("img", "myClassName");

Label

var label = L.DomUtil.create("label", "myClassName");

Span

var span = L.DomUtil.create("span", "myClassName");

Input

var input = L.DomUtil.create("input", "myClassName");

BR

var br = L.DomUtil.create("br", "myClassName");

You can modify the html control with additional values such as

#style
divContainer.style.display = "";
 
#id
divContainer.id = "myId";
 
#name
divContainer.name = "myId";
 
#img src
divContainer.src = "";
 
#title
divContainer.title = "";
 
#innerHTML
divContainer.innerHTML = "";
 
#type
divContainer.type= "checkbox";
 
#checked
divContainer.checked= false;
 
 

Parent Control

You can add the control to a parent control in the following way.

var divContainer = L.DomUtil.create("div", "myClassName");
 
var subContainer = L.DomUtil.create("div", "myClassName", divContainer);