L.Control.JQueryDialog
A simple Leaflet control to open a jQuery UI dialog.
Popupo dialogs, especially modal ones, are great for help panels, or for feedback forms, or for displaying a legend that doesn't need to take up screen space all the time. And if you want a Leaflet-styled button on your map, which would trigger this dialog... here's the plugin for you.
Usage
For a quick start, see the example folder, or the live demo: http://gregallensworth.github.io/L.Control.jQueryDialog/
Assuming that you already have already have a Leaflet map running and a jQuery UI Dialog set up, the control runs like this:
new L.Control.jQueryDialog({
dialogId: 'dialog-help',
tooltip: "How to use this thing",
iconClass: 'fa fa-question-circle'
}).addTo(MAP);
Parameters are:
-
dialogId -- The DOM ID of the DIV element, e.g. what you put inside the id="" part. Required
-
tooltip -- A tooltip to be displayed when the user hovers their mouse over the button. Optional
-
iconClass -- Additional CSS class/classesfor adding an icon. jQuery UI doesn't come with a built-in set of icons, so you have to supply your own. Example if you use FontAwesome: fa fa-info-circle
Icons and iconClass
jQuery UI doesn't come with a built-in set of icons, so you have to supply your own. Some very popular icon sets are:
-
FontAwesome https://fortawesome.github.io/Font-Awesome/icons/ -- Your iconClass would include the fa- bits, for example: fa fa-question-circle
-
Bootstrap Glyphicons http://getbootstrap.com/components/#glyphicons -- Your iconClass would include the glyphicon- bits, for example: glyphicon glyphicon-search