{"id":13426617,"url":"https://github.com/Turbo87/leaflet-sidebar","last_synced_at":"2025-03-15T21:31:36.083Z","repository":{"id":383784,"uuid":"13966235","full_name":"Turbo87/leaflet-sidebar","owner":"Turbo87","description":"A responsive sidebar for Leaflet maps","archived":false,"fork":false,"pushed_at":"2024-04-03T18:28:15.000Z","size":1001,"stargazers_count":496,"open_issues_count":10,"forks_count":158,"subscribers_count":24,"default_branch":"master","last_synced_at":"2025-03-10T22:46:26.068Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://turbo87.github.io/leaflet-sidebar/examples/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Turbo87.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"Turbo87","custom":"https://paypal.me/tobiasbieniek"}},"created_at":"2013-10-29T19:29:09.000Z","updated_at":"2025-02-16T04:40:02.000Z","dependencies_parsed_at":"2024-06-18T15:13:34.534Z","dependency_job_id":"f68493b6-4497-457d-b313-179265a1e773","html_url":"https://github.com/Turbo87/leaflet-sidebar","commit_stats":{"total_commits":133,"total_committers":19,"mean_commits":7.0,"dds":0.2556390977443609,"last_synced_commit":"2659315d5bb758376ed755e1d551bccb926e53ba"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turbo87%2Fleaflet-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turbo87%2Fleaflet-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turbo87%2Fleaflet-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Turbo87%2Fleaflet-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Turbo87","download_url":"https://codeload.github.com/Turbo87/leaflet-sidebar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243792473,"owners_count":20348653,"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":[],"created_at":"2024-07-31T00:01:39.242Z","updated_at":"2025-03-15T21:31:35.518Z","avatar_url":"https://github.com/Turbo87.png","language":"JavaScript","funding_links":["https://github.com/sponsors/Turbo87","https://paypal.me/tobiasbieniek"],"categories":["JavaScript"],"sub_categories":[],"readme":"# leaflet-sidebar\n\nA responsive sidebar plugin for [Leaflet](http://leafletjs.com/), a JS library for interactive maps.\n\nPlease also have a look at [sidebar-v2](https://github.com/Turbo87/sidebar-v2), the tabbed successor of this library.\n\n\u003ca href=\"https://flattr.com/submit/auto?user_id=turbo\u0026url=https%3A%2F%2Fgithub.com%2FTurbo87%2Fleaflet-sidebar\" target=\"_blank\"\u003e\u003cimg src=\"https://api.flattr.com/button/flattr-badge-large.png\" alt=\"Flattr this\" title=\"Flattr this\" border=\"0\"\u003e\u003c/a\u003e\n\n\n## Examples\n\n![Basic example](leaflet-sidebar.gif)\n\nExamples are available in the `examples` folder and on Github Pages:\n\n* [Basic example](http://turbo87.github.io/leaflet-sidebar/examples/)\n* [mapbox.js listing-markers example](http://turbo87.github.io/leaflet-sidebar/examples/listing-markers.html)\n* [Example with 2 sidebars](http://turbo87.github.io/leaflet-sidebar/examples/two-sidebars.html)\n\n\n## Using the plugin\n\nSee the included examples for usage.\n\n\n### Usage\n\nAdd a content container somewhere in your document:\n\n~~~~html\n\u003cdiv id=\"sidebar\"\u003e\n    \u003ch1\u003eleaflet-sidebar\u003c/h1\u003e\n\u003c/div\u003e\n~~~~\n\nCreate a new `L.Control.Sidebar` and add it to the map:\n\n~~~~javascript\nvar sidebar = L.control.sidebar('sidebar', {\n    position: 'left'\n});\n\nmap.addControl(sidebar);\n~~~~\n\nThe sidebar will be hidden on startup, use the following methods to show or hide it:\n\n~~~~javascript\n// Show sidebar\nsidebar.show();\n\n// Hide sidebar\nsidebar.hide();\n\n// Toggle sidebar visibility\nsidebar.toggle();\n\n// Check sidebar visibility\nvar visible = sidebar.isVisible();\n~~~~\n\nIf you want the sidebar to be visible on startup use the following snippet after adding it to the map:\n\n~~~~javascript\nsetTimeout(function () {\n    sidebar.show();\n}, 500);\n~~~~\n\nDo not call `show()` directly after adding the control to the map. The `setTimeout` will work around some CSS quirks for you.\n\nThe content of the sidebar can be changed dynamically:\n\n~~~~javascript\nsidebar.setContent('test \u003cb\u003etest\u003c/b\u003e test');\n~~~~\n\nIf you need more flexibility you can use `sidebar.getContainer()` to get the content container element or use e.g. jQuery on the `\u003cdiv id=\"sidebar\"\u003e` element.\n\n\n### Options\n\nThe sidebar can be configured with these options:\n\n- **position**: Can be `left` (default) or `right` and shouldn't need explaining.\n- **closeButton**: Can be `true` (default) or `false`. If `true` a close button will be added to the sidebar.\n- **autoPan**: Can be `true` (default) or `false`. If `true` the map will be shifted when the sidebar is shown.\n\n\n### Events\n\nWhenever the visibility of the sidebar is changed, an event is fired on the sidebar instance. You can listen for these events like this:\n\n~~~~javascript\nsidebar.on('hidden', function () {\n    console.log('Sidebar is now hidden.');\n});\n~~~~\n\nAvailable events:\n\n- **show**: Show animation is starting, sidebar will be visible.\n- **shown**: Show animation finished, sidebar is now visible.\n- **hide**: Hide animation is starting, sidebar will be hidden.\n- **hidden**: Hide animation finished, sidebar is now hidden.\n\nNote that the `shown` and `hidden` events depend on `transitionend`/`webkitTransitionEnd` which might not be supported by all browsers yet.\n\n\n## Compatibility\n\nleaflet-sidebar was developed to work with Leaflet 0.6.4 and should work fine\nwith v0.7 too. I have no information whether it works well with older versions.\n\nThe leaflet-sidebar plugin has been tested on the following systems and browsers:\n\n- Ubuntu: Firefox, Chrome\n- Mac OS X: Firefox, Chrome, Safari\n- Android 4.3: Firefox, Chrome, Opera\n- iOS: Safari\n- Windows XP: Internet Explorer 6 (failed!)\n\n\n## License\n\nleaflet-sidebar is free software, and may be redistributed under the [MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTurbo87%2Fleaflet-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTurbo87%2Fleaflet-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTurbo87%2Fleaflet-sidebar/lists"}