By default, all geometries have a default predefined popup on the map. These popups display a menu allowing the end user to get more information or create a navigation request. Now there may be times when you want to create your custom popup.

Popup uses window class which extends layer class. In this demo we will show our custom popup with the type "small" on map click event.

Window class requires to parameters, community object and options object. Options object is where we define the UI and content of the popup. Now, let's first create the HTML content of the popup using DomUtil class.

var htmlContent = L.DomUtil.create("div", "popWrapper");
var confirmTitle = L.DomUtil.create("h2", "popupTitle", htmlContent);
confirmTitle.innerHTML = "Custom Popup";

Now let's create the menu items. Menu items will be displayed below the main content horizontally. Menu is of type array and holds menu item objects. Menu item object has two main properties, label and callback function. 

var navButton = {
   label: 'Custom Menu 1',
   callback: function () {
       // add your functionality here
       alert("Menu Item clicked");
   }
};

Same way let's create "close" the window menu item.

 var closeButton = {
    label: 'Close',
    callback: function () {
        if(win) {
            win.removeFrom(map);
        }
    }
}

Now that we have all the different pieces ready, let's put them together.

function clickHandler() {
    var htmlContent = L.DomUtil.create("div", "popWrapper");

    var confirmTitle = L.DomUtil.create("h2", "popupTitle", htmlContent);
    confirmTitle.innerHTML = "Custom Popup";

    var navButton = {
       label: 'Custom Menu 1',
       callback: function () {
           // add your functionality here
           alert("Menu Item clicked");
       }
   };

   var closeButton = {
       label: 'Close',
       callback: function () {
           if(win) {
               win.removeFrom(map);
           }
       }
   }

    if( htmlContent ) {
        win = L.micello.window(community, {
            type: 'small',
            content: htmlContent,
            menu: [navButton, closeButton]
        }).addTo(map);
    }
}

Try clicking on any geometry in indoor map shown in below working example.