React: Leaflet html Controls

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

React: Leaflet
(Last Updated On: )

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:

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);
Series Navigation<< React: Leaflet EasyButtonReact: Leaflet DomEvent >>