Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time


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


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


Check out demo and example of use!

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" />
  • Then use in simple way in javascript file:
// Creating window object
var win =  L.control.window(map,{title:'Hello world!',content:'This is my first control window.'})

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)
        .content('First paragraph.')


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.

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.


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


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