Leaflet-control-window NPM

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

npm i leaflet-control-window

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

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

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

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

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.

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

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

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'

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.

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

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.

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

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

5 years ago