{"id":20201792,"url":"https://github.com/jjimenezshaw/leaflet.control.resizer","last_synced_at":"2025-06-15T08:39:00.895Z","repository":{"id":111004309,"uuid":"133858312","full_name":"jjimenezshaw/Leaflet.Control.Resizer","owner":"jjimenezshaw","description":"Control to resize a Leaflet map","archived":false,"fork":false,"pushed_at":"2018-06-10T10:32:11.000Z","size":8,"stargazers_count":12,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-25T02:09:01.406Z","etag":null,"topics":["leaflet","leaflet-control","leaflet-plugin","resize","resizer"],"latest_commit_sha":null,"homepage":"https://jjimenezshaw.github.io/Leaflet.Control.Resizer/examples/basic.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jjimenezshaw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2018-05-17T19:18:30.000Z","updated_at":"2025-04-25T07:41:10.000Z","dependencies_parsed_at":"2023-09-27T03:24:17.608Z","dependency_job_id":null,"html_url":"https://github.com/jjimenezshaw/Leaflet.Control.Resizer","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"e35a274e9ccd8121e87cf86df2efd56cb41e72ad"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/jjimenezshaw/Leaflet.Control.Resizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjimenezshaw%2FLeaflet.Control.Resizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjimenezshaw%2FLeaflet.Control.Resizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjimenezshaw%2FLeaflet.Control.Resizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjimenezshaw%2FLeaflet.Control.Resizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jjimenezshaw","download_url":"https://codeload.github.com/jjimenezshaw/Leaflet.Control.Resizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jjimenezshaw%2FLeaflet.Control.Resizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259945763,"owners_count":22935882,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["leaflet","leaflet-control","leaflet-plugin","resize","resizer"],"created_at":"2024-11-14T04:52:43.599Z","updated_at":"2025-06-15T08:39:00.867Z","avatar_url":"https://github.com/jjimenezshaw.png","language":"JavaScript","readme":"# Leaflet.Control.Resizer\n[![NPM version](https://img.shields.io/npm/v/leaflet.control.resizer.svg)](https://www.npmjs.com/package/leaflet.control.resizer)\n[![License](https://img.shields.io/badge/license-BSD--3--Clause-blue.svg?style=flat)](LICENSE)\n[![Leaflet 1.x compatible!](https://img.shields.io/badge/Leaflet%201.x-%E2%9C%93-1EB300.svg?style=flat)](http://leafletjs.com/reference.html)\n\nControl to resize a Leaflet map\n\n[Simple example in action](https://jjimenezshaw.github.io/Leaflet.Control.Resizer/examples/basic.html)\n\n## Description\nThis 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.\n\n## Installation\nUsing 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.\n\n## Compatibility\nTested 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)\n\n## Usage\nJust add a control as usual.\n```javascript\n  var osm = L.tileLayer(\n      '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',\n      {attribution: '© OpenStreetMap contributors'}\n  );\n  var map = L.map('map', {\n      layers: [osm],\n      center: [40, 0],\n      zoom: 3\n  });\n\n\n  L.control.resizer({ direction: 'e' }).addTo(map);\n```\n\n## API\n### `L.Control.Resizer`\nThe main (and only) 'class' involved in this plugin. It exteds `L.Control`, so most of its methods are available. \n#### `L.control.resizer(options)`\nCreates the control. The arguments are:\n* `options`: `\u003cObject\u003e` specific options for this control.\n\n##### constructor options\n* `direction`: `\u003cString\u003e` Direction of the resizer. Valid values are 'e', 's', 'se'. Default 'e'.\n* `onlyOnHover`: `\u003cBoolean\u003e` Shows the control only when the mouse is over. Default 'false'.\n* `updateAlways`: `\u003cBoolean\u003e` Determines if `invalidateSize` is called on every mouse movement. Default 'true'.\n* `pan`: `\u003cBoolean\u003e` 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'.\n\nIf you don't like the style of the handles, overwrite the css styles ;)\n\n#### `enable()`\nEnables the control. Run by default on construction. Returns `this`.\n\n#### `disable()`\nDisables the control. Returns `this`.\n\n#### `fakeHover(ms)`\nFakes 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.\n\n### Events\nThis class fires the same events as `L.Draggable`. You can get them as usual. For example:\n```javascript\nvar southResizer = L.control.resizer({ direction: 's' }).addTo(map);\nL.DomEvent.on(southResizer, 'dragstart', function(e){ console.log(e.type, e) });\n```\nThe events are:\n* `down`: When the mouse is clicked over the control.\n* `dragstart`: When the drag starts.\n* `predrag`: On every movement, just before the map resize.\n* `drag`: On every movement, just after the map resize.\n* `dragend`: At the end of the resize.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjimenezshaw%2Fleaflet.control.resizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjjimenezshaw%2Fleaflet.control.resizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjjimenezshaw%2Fleaflet.control.resizer/lists"}