Fork: 0
natto / leaflet_plugins
Download ZIP 12commits
Transfer to URL with SHA
leaflet_plugins / control-window /
latest commit 5942dec873
@natto natto authored on 17 Sep 2018
..
src add plugin 5 years ago
LICENSE add plugin 5 years ago
README.md add plugin 5 years ago
c115087@roy.e.koeki-u.ac.jp add plugin 5 years ago
index.html change resorce 5 years ago
index.html~ add plugin 5 years ago
package.json add plugin 5 years ago
tamesi.js add plugin 5 years ago
tamesi.js~ add plugin 5 years ago
README.md

leaflet-control-window

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!

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.'})
         .show()

    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.