React: Leaflet Modal

In this tutorial I will demonstrate how to add a modal dialog 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.

Node Package Install:

npm install leaflet-modal --save

Edit app/home/leaflet/js/map.jsx:

//Add the leaflet modal package
require("leaflet-modal");
require("leaflet-modal/dist/leaflet.modal.min.css");
 
//Somewhere on your page add the following. You can even put it on a onclick event or whatever
 
//Create a test control for your modal control.
this.modalContainer = L.DomUtil.create("div");
map.openModal({
	zIndex: 10000, 
	element: this.modalContainer, //The container to display in the modal 
	OVERLAY_CLS: "overlay", //This is a built in class which you can change if you want
	MODAL_CLS: "modal", //This is a built in class which you can change if you want
	height: 200, width: 200, 
	MODAL_CONTENT_CLS: "modal-content",  //This is a built in class which you can change if you want
	CLOSE_CLS: "modal-close-hide" //The property for close class
});

Edit app/home/leaflet/css/map.css:

.modal-close-hide {
	/*Class for hiding the modal*/
	display: none;
}