2013-06-29 02:39:49 +08:00
# Leaflet Plugin Authoring Guide
2013-06-29 02:50:49 +08:00
One of the greatest things about Leaflet is its powerful plugin ecosystem.
2013-06-29 02:39:49 +08:00
The [Leaflet plugins page ](http://leafletjs.com/plugins.html ) lists dozens of awesome plugins, and more are being added every week.
2013-06-29 03:09:52 +08:00
This guide lists a number of best practices for publishing a Leaflet plugin that meets the quality standards of Leaflet itself.
2013-06-29 02:39:49 +08:00
1. [Presentation ](#presentation )
- [Repository ](#repository )
2013-06-29 05:21:40 +08:00
- [Name ](#name )
2013-06-29 02:39:49 +08:00
- [Demo ](#demo )
- [Readme ](#readme )
- [License ](#license )
2. [Code ](#code )
- [File Structure ](#file-structure )
- [Code Conventions ](#code-conventions )
2013-06-29 02:50:49 +08:00
- [Plugin API ](#plugin-api )
2013-06-29 02:39:49 +08:00
## Presentation
### Repository
2013-06-29 02:50:49 +08:00
The best place to put your Leaflet plugin to is a separate [GitHub ](http://github.com ) repository.
If you create a collection of plugins for different uses,
don't put them in one repo —
2013-06-29 03:09:52 +08:00
it's usually easier to work with small, self-contained plugins in individual repositories.
2013-06-29 02:39:49 +08:00
2013-06-29 05:21:40 +08:00
### Name
Most existing plugins follow the convention of naming plugins (and repos) like this: `Leaflet.MyPluginName` .
You can use other forms (e.g. "leaflet-my-plugin-name"),
just make sure to include the word "Leaflet" in the name so that it's obvious that it's a Leaflet plugin.
2013-06-29 02:39:49 +08:00
### Demo
2013-06-29 03:09:52 +08:00
The most essential thing to do when publishing a plugin is to include a demo that showcases what the plugin does —
2013-06-29 02:39:49 +08:00
it's usually the first thing people will look for.
2013-06-29 02:50:49 +08:00
The easiest way to put up a demo is using [GitHub Pages ](http://pages.github.com/ ).
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 —
2013-06-29 02:39:49 +08:00
after pushing, it'll be published as `http://<user>.github.io/<repo>` .
### Readme
2013-06-29 03:09:52 +08:00
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).
At a minimum it should contain the following items:
2013-06-29 02:39:49 +08:00
2013-06-29 03:09:52 +08:00
- name of the plugin
- a simple, concise description of what it does
2013-06-29 02:39:49 +08:00
- requirements
- Leaflet version
2013-06-29 03:09:52 +08:00
- other external dependencies (if any)
2013-06-29 02:39:49 +08:00
- browser / device compatibility
- links to demos
- instructions for including the plugin
- simple usage code example
- API reference (methods, options, events)
### License
2013-06-29 03:09:52 +08:00
Every open source repository should include a license.
2013-06-29 02:50:49 +08:00
If you don't know what open source license to choose for your code,
2013-06-29 05:21:40 +08:00
[MIT License ](http://opensource.org/licenses/MIT ) and [BSD 2-Clause License ](http://opensource.org/licenses/BSD-2-Clause ) are both good choices.
2013-06-29 02:39:49 +08:00
You can either put it in the repo as a `LICENSE` file or just link to the license from the Readme.
## Code
### File Structure
2013-06-29 02:50:49 +08:00
Keep the file structure clean and simple,
don't pile up lots of files in one place —
2013-06-29 02:39:49 +08:00
make it easy for a new person to find their way in your repo.
2013-06-29 05:21:40 +08:00
A barebones repo for a simple plugin would look like this:
2013-06-29 02:39:49 +08:00
```
my-plugin.js
README.md
```
2013-06-29 05:21:40 +08:00
An example of a more sophisticated plugin file structure:
2013-06-29 02:39:49 +08:00
```
2013-06-29 05:21:40 +08:00
/src - JS source files
/dist - minified plugin JS, CSS, images
/spec - test files
/lib - any external libraries/plugins if necessary
/examples - HTML examples of plugin usage
2013-06-29 02:39:49 +08:00
README.md
LICENSE
package.json
```
### Code Conventions
Everyone's tastes are different, but it's important to be consistent with whatever conventions you choose for your plugin.
2013-06-29 02:50:49 +08:00
For a good starting point, check out [Airbnb JavaScript Guide ](https://github.com/airbnb/javascript ).
Leaflet follows pretty much the same conventions
except for using smart tabs (hard tabs for indentation, spaces for alignment)
2013-06-29 03:09:52 +08:00
and putting a space after the `function` keyword.
2013-06-29 02:39:49 +08:00
### Plugin API
2013-06-29 05:21:40 +08:00
Never expose global variables in your plugin.< br >
If you have a new class, put it directly in the `L` namespace (`L.MyPlugin`).< br >
If you inherit one of the existing classes, make it a sub-property (`L.TileLayer.Banana`).< br >
2013-06-29 02:39:49 +08:00
If you want to add new methods to existing Leaflet classes, you can do it like this: `L.Marker.include({myPlugin: …})` .
2013-06-29 05:21:40 +08:00
Function, method and property names should be in `camelCase` .< br >
2013-06-29 02:39:49 +08:00
Class names should be in `CapitalizedCamelCase` .
2013-06-29 05:21:40 +08:00
If you have a lot of arguments in your function, consider accepting an options object instead
(putting default values where possible so that users don't need specify all of them):
2013-06-29 02:39:49 +08:00
2013-06-29 02:50:49 +08:00
```js
// bad
marker.myPlugin('bla', 'foo', null, {}, 5, 0);
// good
marker.myPlugin('bla', {
2013-06-29 05:21:40 +08:00
optionOne: 'foo',
2013-06-29 02:50:49 +08:00
optionThree: 5
});
2013-06-29 02:39:49 +08:00
```
2013-06-29 02:50:49 +08:00
And most importantly, keep it simple. Leaflet is all about *simplicity* .