A dialog modal window that is resizable and positionable on the map.
Check out the Demo Here
# Bower:
bower install Leaflet.Dialog
# NPM:
npm install leaflet-dialog
// After you've set up your map and layers, add the modal window by running:
var dialog = L.control.dialog(options)
.setContent("<p>Hello! Welcome to your nice new dialog box!</p>")
.addTo(map);Working with the dialog box:
dialog.setContent("<p>Here's some new content!</p>");
| Property |
Type |
Default |
Description |
| size |
[Array][width, height] |
[ 300, 300 ] |
An array of the starting width and height values (in pixels). |
| minSize |
[Array][width, height] |
[ 100, 100 ] |
An array with the minimum resize width and height (in pixels). |
| maxSize |
[Array][width, height] |
[ 350, 350 ] |
An array with the maximum resize width and height (in pixels). |
| anchor |
[Array][top, left] |
[ 250, 250 ] |
The starting point anchor location (from the upper left) in pixels. |
| position |
[String] |
'topleft' |
The leaflet control div to place the modal inside, as a starting reference point. |
| initOpen |
[Boolean] |
true |
Whether or not to initialize in an open state. |
| Method |
Returns |
Example |
Description |
| open() |
this |
dialog.open(); |
Opens the dialog window. |
| close() |
this |
dialog.close(); |
Closes the dialog window. |
| destroy() |
this |
dialog.destroy(); |
Removes the dialog box from the window. |
| setLocation( [Array][top, left] anchor location ) |
this |
dialog.setLocation( [ 15, 15 ] ); |
Move the dialog box to the specified pixel location ( Relative to the 'position' option ) |
| setSize( [Array][width, height] size ) |
this |
dialog.setSize( [ 150, 150 ] ); |
Resize the dialog window to the specified width and height. |
| lock() |
this |
dialog.lock(); |
Hides all visible dialog window controls. |
| unlock() |
this |
dialog.unlock(); |
Re-instates all dialog window controls. |
| freeze() |
this |
dialog.freeze(); |
Hides all visible dialog window movement/sizing controls. |
| unfreeze() |
this |
dialog.unfreeze(); |
Re-instates all dialog window movement/sizing controls. |
| hideClose() |
this |
dialog.hideClose(); |
Hides the closing 'x' |
| showClose() |
this |
dialog.showClose(); |
Shows the closing 'x' |
| hideResize() |
this |
dialog.hideResize(); |
Hides the resizing symbol |
| showResize() |
this |
dialog.showResize(); |
Shows the resizing symbol |
| Event |
Data |
Description |
| dialog:opened |
this |
Fired when open() is called. |
| dialog:closed |
this |
Fired when close() is called or when the 'x' is clicked. |
| dialog:destroyed |
this |
Fired when destroy() is called. |
| dialog:locked |
this |
Fired when lock() is called. |
| dialog:unlocked |
this |
Fired when unlock() is called. |
| dialog:frozen |
this |
Fired when freeze() is called. |
| dialog:unfrozen |
this |
Fired when unfreeze() is called. |
| dialog:updated |
this |
Fired when contents are set or when added to the map. |
| dialog:resizestart |
this |
Fired when the resize button is clicked. |
| dialog:resizing |
this |
Fired continuously as the resize button is dragged. |
| dialog:resizeend |
this |
Fired when the resize button click is released. |
| dialog:movestart |
this |
Fired when the move button is clicked. |
| dialog:moving |
this |
Fired continuously as the move button is dragged. |
| dialog:moveend |
this |
Fired when the move button click is released. |
| dialog:closehidden |
this |
Fired when hideClose() is called. |
| dialog:closeshown |
this |
Fired when the showClose() is called. |
| dialog:resizehidden |
this |
Fired when hideResize() is called. |
| dialog:resizeshown |
this |
Fired when the showResize() is called. |