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


Git stats


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


NPM version License Leaflet 1.x compatible!

Control to resize a Leaflet map

Simple example in action


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.


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.


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)


Just add a control as usual.

  var osm = L.tileLayer(
      {attribution: '© OpenStreetMap contributors'}
  var map ='map', {
      layers: [osm],
      center: [40, 0],
      zoom: 3

  L.control.resizer({ direction: 'e' }).addTo(map);



The main (and only) 'class' involved in this plugin. It exteds L.Control, so most of its methods are available.


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 if invalidateSize 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 ;)


Enables the control. Run by default on construction. Returns this.


Disables the control. Returns this.


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.


This class fires the same events as L.Draggable. You can get them as usual. For example:

var southResizer = L.control.resizer({ direction: 's' }).addTo(map);
L.DomEvent.on(southResizer, 'dragstart', function(e){ console.log(e.type, e) });

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.