leaflet-control-window

The optional action button allows for multiple interaction with the same window as it hides the window instead of closing it.

*Requires Leaflet and modern browser

Features

• modal/modeless mode
• draggable
• customisable
• responsive
• optional Action button

Example

Check out demo and example of use!

Installation

Install via npm

npm i leaflet-control-window

Install Manually

Download L.Control.Window.css and L.Control.Window.js and include them in your project.

Getting started

Using leaflet-control-window plugin is very easy and comfortable.

Quick usage

• Download and place files from src dir to the same folder in your project.
• Link javascript and style file in your HTML document:

     <script src="...path-to-files.../L.Control.Window.js"></script>
     <link rel="stylesheet" href="...path-to-file.../L.Control.Window.css" />

Include as ES6 Module

import 'leaflet-control-window';
import 'L.Control.Window.css';

How to use

L.control.window( <Map> map ,<window options> options?)

There are two ways to set up control windows. It's up to you what you prefer. Following examples have the same results.

• using options

var winOpts = L.control.window(map,{title:'Heading!',content:'First paragraph.',visible: true})

• using methods

var winMtds = L.control.window(map)
        .title('Heading!')
        .content('First paragraph.')
        .show()

Options

| Property | Description | Default Value | Possible values | | --------------- | ---------------------- | ------------- | ---------------------------------------------------- | | title | Sets window title. | null | String, empty string or false causes no title | | content | Sets window content. | null | HTMLElement|String | | modal | Modal|modeless window mode? | false | Boolean | | position | Sets where to show window. | 'center' | 'center', 'top', 'topRight', 'right', 'bottomRight', 'bottom', 'bottomLeft', 'left', 'topLeft' |

Methods

| Method | Returns | Description | | --------------- | ------------- | ---------------------------------------------------- | | show() | L.control.window object | Render window. | | show( position) | L.control.window object | Render window on defined position. | | title() | HTMLElement|String | Gets window title. | | title(HTMLElement|String) | L.control.window object | Sets window title. | | content() | HTMLElement|String | Gets window contet. | | content(HTMLElement|String) | L.control.window object | Sets window content. | | close() | undefined | Hide and remove window. | | enableBtn() | undefined | Enables the OK button of the window (default). | | disableBtn() | undefined | Disables the OK button of the window. |

Other options

| Property | Description | Default Value | Possible values | | --------------- | ---------------------- | ------------- | ---------------------------------------------------- | | closeButton | Render close button? | true | Boolean | | className | Sets container class to style window. | 'control-window' | String | | maxWidth | Sets maximum width of window container in pixels. | 600 | Number | | prompt | JSON object for prompt buttons. | undefined | JSON {callback: ..., action: ..., buttonAction: ..., buttonOK: ..., buttonCancel: ...} | | prompt.callback | Function to run after OK button is clicked. | undefined | e.g. function(){alert('hello')} | | prompt.action | Function to run after ACTION button is clicked. | undefined | e.g. function(){alert('I\'ll do something')} | | prompt.buttonAction | Text for Action button. | button hidden by default | String | | prompt.buttonOK | Text for OK button. | 'OK' | String | | prompt.buttonCancel | Text for Cancel button | button hidden by default | String | | visible | Render window immediately. | false | Boolean |

Other Methods

| Method | Returns | Description | | --------------- | ------------- | ---------------------------------------------------- | | showOn( [x,y]) | L.control.window object | Render window on defined position in pixels ([x,y]). | | hide() | L.control.window object | Hide window, can be rendered by .show() method. | | prompt(JSON object) | L.control.window object | Sets prompt option. | | setPromptCallback() | L.control.window object | Sets prompt option. |

Events

| Event | Description | | ---------------|------------------------------------------------ | | show | Fired when window is shown. | | hide | Fired when window is hidden. | | close | Fired when window is closed. |

License

leaflet-control-window is free software, and may be redistributed under the MIT-LICENSE.

Credit

This whole structure was based on the mapshakers project. So don't be surprised to see somefamiliar code.