Branching from Leaflet.FreeDraw, L.Pather is a freehand polyline creator that simplifies the polyline for mutability.
JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist Build May 5, 2015
tests Added setOptions method Apr 19, 2015
.bowerrc Filled in files Apr 16, 2015
.gitignore Setup Heroku Apr 16, 2015
.jshintrc Filled in files Apr 16, 2015
LICENSE Initial commit Apr 16, 2015
Procfile Modified README Apr 19, 2015
bower.json Version bump 🍺 May 6, 2015
gulpfile.js Created initial working example Apr 17, 2015
karma.conf.js Created initial working example Apr 17, 2015
package.json Changed map tiles Feb 6, 2016


Travis   npm   MIT License   IE9+

Branching from Leaflet.FreeDraw, L.Pather is a freehand polyline creator that simplifies the polyline for mutability. The reason for creating a branch from FreeDraw is that a polyline feature would bloat FreeDraw unnecessarily, whilst diverging from FreeDraw's original purpose for allowing geospatial queries.

L.Pather Screenshot

Getting Started

L.Pather behaves as a typical Leaflet module, and can therefore be added with the addLayer method:

var pather = new L.Pather();

You'll likely want to add the above in two lines as shown, because with the pather instance you can do some wonderful things – such as when a user creates or edits a polyline:

pather.on('created', this.created);
pather.on('edited', this.edited);
pather.on('deleted', this.deleted);

Polylines are created using the mouse, but you may also add polylines manually by supplying an array of L.LatLng objects:

var polyline = pather.createPath(LatLng[]);

Using the polyline instance, which would resolve to L.Pather.Polyline you can invoke many more methods. Although perhaps the most common would be to use it in the deletion process of your polyline:



For L.Pather you can set the mode using the pather.setMode method. There are a handful of modes:

  • L.Pather.MODE.CREATE – Map is not draggable when creating a path;
  • L.Pather.MODE.EDIT – Edit the polyline by dragging the handles;
  • L.Pather.MODE.APPEND – Click on the polyline to add new elbows to the path;
  • L.Pather.MODE.DELETE – Click on the polyline to delete the path;

Since both L.Pather.MODE.APPEND and L.Pather.MODE.DELETE involve the same click event, L.Pather.MODE.APPEND takes precedence. Therefore to delete a path when it is clicked on, you must have the L.Pather.MODE.APPEND mode disabled:

pather.setMode(pather.getMode() ^ L.Pather.MODE.APPEND);


Class names on the Leaflet container will contain the class names that resolve to the current mode. For example, if modes L.Pather.MODE.APPEND and L.Pather.MODE.CREATE are currently active, then the map container will have the following two class names:

<map class="... mode-create mode-append"></map>

By having the class names reflect the current mode, it allows you to respond via your CSS documents. In the case of the example on we colour the path handles when you have selected the L.Pather.MODE.EDIT mode – note the mode-edit class reference: div.elbow {
    cursor: move;
    pointer-events: all;
    background-color: rebeccapurple;


For a list of up-to-date options it is better to refer to the defaultOptions method of the Pather.js file. All of the options can be overridden during instantiation of the L.Pather object, including the smoothFactor which determines how much to simplify the rendered path:

var pather = new L.Pather({
    strokeWidth: 1,
    smoothFactor: 5,
    moduleClass: 'leaflet-pather',
    mode: L.Pather.MODE.CREATE | L.Pather.MODE.EDIT,
    pathColour: 'rebeccapurple'

You may also modify the options after instantiation by invoking the setOptions method with your object of defined options:

pather.setOptions({ pathColour: 'orange' });

Note: In defining the options, L.Pather uses ES6's Object.assign which is polyfilled using the MDN's polyfill if your browser doesn't currently support it.