# leaflet-dialog

> Resizable, movable dialog window for Leaflet

Latest version **1.0.5** (published 2018-09-18) · 0 weekly downloads

## Install

```sh
npm install leaflet-dialog
pnpm add leaflet-dialog
yarn add leaflet-dialog
bun add leaflet-dialog
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2018-09-18 |
| First published | 2016-03-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 60 |
| Author | Nate Marquardt |
| Maintainers | nbtsolutions |
| Keywords | javascript, leaflet, dialog, ui, popup, modal, window |

## Links

- npm: https://www.npmjs.com/package/leaflet-dialog
- Repository: https://github.com/NBTSolutions/Leaflet.Dialog
- Homepage: https://github.com/NBTSolutions/Leaflet.Dialog#readme
- Issues: https://github.com/NBTSolutions/Leaflet.Dialog/issues
- npm.io page: https://npm.io/package/leaflet-dialog

## Dependencies (1)

- [fontawesome](https://npm.io/package/fontawesome.md) ~4.5.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.5 (latest) — 2018-09-18
- 1.0.4 — 2017-12-29
- 1.0.3 — 2017-11-15
- 1.0.1 — 2016-03-29

## README

# Leaflet.Dialog

A dialog modal window that is resizable and positionable on the map.

[Check out the Demo Here](http://nbtsolutions.github.io/Leaflet.Dialog/)

## Installation:

````shell
# Bower:
bower install Leaflet.Dialog
````

````shell
# NPM:
npm install leaflet-dialog
````

## Adding a dialog box:

````js
// 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:

### Close the window:

````js
dialog.close();
````

### Open the window:

````js
dialog.open();
````

### Destroy the window:

````js
dialog.destroy();
````

### Reset the contents:

````js
dialog.setContent("<p>Here's some new content!</p>");
````

## Options:

| 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.

## Methods:

| 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

## Events:

| 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.

---
_Source: https://npm.io/package/leaflet-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
