Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
lib
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Leaflet.ResizableControlPanel

A Resizable and Scrollable Leaflet Control Panel.

Getting Started

Download

Download the production version or the development version.

Bower

(Coming Soon)

In your web page

Include the dependencies

  • leaflet
  • jquery
  • jquery-ui
  • boostrap glypicons
  • jquery-mousewheel (to enable mouse scrolling)
  • JScrollPane (option for nice scroll bars)
<link rel="stylesheet" href="dist/Leaflet.ResizableControl.css" />
<script src="dist/Leaflet.ResizableControl.js"></script>
<script>
            ...
    		var resizableControl = new L.ResizableControl({
                position: 'bottomleft',
                minimizedHeight: 40,
                minimizedWidth: 0.1,
                enlargedHeight: 0.6,
                enlargedWidth: 0.4,
                enlargeCallback: function(e) {},
                minimizeCallback: function(e) {},
                contentClassName: "resizable-control-content",
                scrollPaneClassName: "resizable-control-scrollpane",
                className: "resizable-control-container",
                jscrollpane: true,
                appendOnAdd: function(divElement) {}
            });
    		map.addControl(resizableControl);
            ...
</script>

AMD

It's also possible to include Leaflet.ResizableControl.js as AMD module.

Documentation

Options

  • position: The control position {bottomleft,bottomright, topleft,topright}
  • minimizedHeight: The height of the Resizable Control when minimized in px (eg. 40 for 40px) or percent relative to the map container (eg. 0.2 for 20%)
  • minimizedWidth: The with of the Resizable Control when minimized in px (eg. 40 for 40px) or percent relative to the map container (eg. 0.2 for 20%)
  • enlargedHeight: The height of the Resizable Control when enlarged in px (eg. 300 for 300px) or percent relative to the map container (eg. 0.5 for 50%)
  • enlargedWidth: The width of the Resizable Control when enlarged in px (eg. 300 for 300px) or percent relative to the map container (eg. 0.5 for 50%)
  • enlargeCallback: Callback function for enlarge events
  • minimizeCallback: Callback function for minimize events
  • contentClassName: The class name of the Content Div inside the ScrollPane
  • scrollPaneClassName: The class name of the ScrollPane inside the container
  • className: The class name of the ResizableControl Container
  • jscrollpane: true if JScrollPane should be used for scrollbars, false otherwise.
  • appendOnAdd: Callback function to append further elements to the container div.
  • resizable: true if resize handle should be shown, false otherwise. defaults to true.

Examples

Basic

todaysnewsmap

License

Copyright (c) 2015 David Albrecht
Licensed under the MIT license.

About

Resizable and scrollable Leaflet Control

Resources

License

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.