Skip to content

gregallensworth/L.Control.jQueryDialog

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

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:

About

Simple Leaflet control to open a jQuery dialog

Resources

License

Stars

Watchers

Forks

Packages

No packages published