Resizable and scrollable Leaflet Control
JavaScript CSS
Latest commit cfc1098 Jun 11, 2016 waihti enlarged status, version 1.1.1

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.