Leaflet.Control.Resizer
Control to resize a Leaflet map
Description
This plugin creates a control to resize your map on the right or bottom side. See that top and left are not a 'resize' but a 'move' inside your DOM... that is another story.
Installation
Using npm for browserify npm install leaflet.control.resizer
(and require('leaflet.control.resizer')
), or just download L.Control.Resizer.js
and L.Control.Resizer.css
and add a script and link tag for it in your html.
Compatibility
Tested with Leaflet 1.0.3 and 1.3.1. It does not work with 0.7 due to deprecated functionalities. However it is easy to change the code to make it compatible (come on, it is time to update to Leaflet 1.x)
Usage
Just add a control as usual.
var osm = L; var map = L; Lcontrol;
API
L.Control.Resizer
The main (and only) 'class' involved in this plugin. It exteds L.Control
, so most of its methods are available.
L.control.resizer(options)
Creates the control. The arguments are:
options
:<Object>
specific options for this control.
constructor options
direction
:<String>
Direction of the resizer. Valid values are 'e', 's', 'se'. Default 'e'.onlyOnHover
:<Boolean>
Shows the control only when the mouse is over. Default 'false'.updateAlways
:<Boolean>
Determines ifinvalidateSize
is called on every mouse movement. Default 'true'.pan
:<Boolean>
Specifies if the fixed point during the resize is the center. If not, it is the top left corner (that means that the map doesn't move. Default 'false'.
If you don't like the style of the handles, overwrite the css styles ;)
enable()
Enables the control. Run by default on construction. Returns this
.
disable()
Disables the control. Returns this
.
fakeHover(ms)
Fakes the hover effect during ms
milliseconds, that is, when the mouse passes over the control. Useful when onlyOnHover
is true, and you want to show where is the control.
Events
This class fires the same events as L.Draggable
. You can get them as usual. For example:
var southResizer = Lcontrol;LDomEvent;
The events are:
down
: When the mouse is clicked over the control.dragstart
: When the drag starts.predrag
: On every movement, just before the map resize.drag
: On every movement, just after the map resize.dragend
: At the end of the resize.