leaflet-control-window

Simple popup window plugin for leaflet. Ready for information, prompts, dialogs, photos etc.

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.