You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. # Leaflet Plugin Authoring Guide
  2. One of the greatest things about Leaflet is its powerful plugin ecosystem.
  3. The [Leaflet plugins page](http://leafletjs.com/plugins.html) lists dozens of awesome plugins, and more are being added every week.
  4. This guide lists a number of best practices for publishing a Leaflet plugin that meets the quality standards of Leaflet itself.
  5. 1. [Presentation](#presentation)
  6. - [Repository](#repository)
  7. - [Name](#name)
  8. - [Demo](#demo)
  9. - [Readme](#readme)
  10. - [License](#license)
  11. 2. [Code](#code)
  12. - [File Structure](#file-structure)
  13. - [Code Conventions](#code-conventions)
  14. - [Plugin API](#plugin-api)
  15. ## Presentation
  16. ### Repository
  17. The best place to put your Leaflet plugin to is a separate [GitHub](http://github.com) repository.
  18. If you create a collection of plugins for different uses,
  19. don't put them in one repo —
  20. it's usually easier to work with small, self-contained plugins in individual repositories.
  21. ### Name
  22. Most existing plugins follow the convention of naming plugins (and repos) like this: `Leaflet.MyPluginName`.
  23. You can use other forms (e.g. "leaflet-my-plugin-name"),
  24. just make sure to include the word "Leaflet" in the name so that it's obvious that it's a Leaflet plugin.
  25. ### Demo
  26. The most essential thing to do when publishing a plugin is to include a demo that showcases what the plugin does —
  27. it's usually the first thing people will look for.
  28. The easiest way to put up a demo is using [GitHub Pages](http://pages.github.com/).
  29. A good [starting point](https://help.github.com/articles/creating-project-pages-manually) is creating a `gh-pages` branch in your repo and adding an `index.html` page to it —
  30. after pushing, it'll be published as `http://<user>.github.io/<repo>`.
  31. ### Readme
  32. The next thing you need to have is a descriptive `README.md` in the root of the repo (or a link to a website with a similar content).
  33. At a minimum it should contain the following items:
  34. - name of the plugin
  35. - a simple, concise description of what it does
  36. - requirements
  37. - Leaflet version
  38. - other external dependencies (if any)
  39. - browser / device compatibility
  40. - links to demos
  41. - instructions for including the plugin
  42. - simple usage code example
  43. - API reference (methods, options, events)
  44. ### License
  45. Every open source repository should include a license.
  46. If you don't know what open source license to choose for your code,
  47. [MIT License](http://opensource.org/licenses/MIT) and [BSD 2-Clause License](http://opensource.org/licenses/BSD-2-Clause) are both good choices.
  48. You can either put it in the repo as a `LICENSE` file or just link to the license from the Readme.
  49. ## Code
  50. ### File Structure
  51. Keep the file structure clean and simple,
  52. don't pile up lots of files in one place &mdash;
  53. make it easy for a new person to find their way in your repo.
  54. A barebones repo for a simple plugin would look like this:
  55. ```
  56. my-plugin.js
  57. README.md
  58. ```
  59. An example of a more sophisticated plugin file structure:
  60. ```
  61. /src - JS source files
  62. /dist - minified plugin JS, CSS, images
  63. /spec - test files
  64. /lib - any external libraries/plugins if necessary
  65. /examples - HTML examples of plugin usage
  66. README.md
  67. LICENSE
  68. package.json
  69. ```
  70. ### Code Conventions
  71. Everyone's tastes are different, but it's important to be consistent with whatever conventions you choose for your plugin.
  72. For a good starting point, check out [Airbnb JavaScript Guide](https://github.com/airbnb/javascript).
  73. Leaflet follows pretty much the same conventions
  74. except for using smart tabs (hard tabs for indentation, spaces for alignment)
  75. and putting a space after the `function` keyword.
  76. ### Plugin API
  77. Never expose global variables in your plugin.<br>
  78. If you have a new class, put it directly in the `L` namespace (`L.MyPlugin`).<br>
  79. If you inherit one of the existing classes, make it a sub-property (`L.TileLayer.Banana`).<br>
  80. If you want to add new methods to existing Leaflet classes, you can do it like this: `L.Marker.include({myPlugin: …})`.
  81. Function, method and property names should be in `camelCase`.<br>
  82. Class names should be in `CapitalizedCamelCase`.
  83. If you have a lot of arguments in your function, consider accepting an options object instead
  84. (putting default values where possible so that users don't need specify all of them):
  85. ```js
  86. // bad
  87. marker.myPlugin('bla', 'foo', null, {}, 5, 0);
  88. // good
  89. marker.myPlugin('bla', {
  90. optionOne: 'foo',
  91. optionThree: 5
  92. });
  93. ```
  94. And most importantly, keep it simple. Leaflet is all about *simplicity*.