Wotuu / L.Pather

Branching from Leaflet.FreeDraw, L.Pather is a freehand polyline creator that simplifies the polyline for mutability.

L.Pather

     

• Heroku: http://pather.herokuapp.com/
• Bower: bower install leaflet-pather;

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.

---

Getting Started

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

var pather = new L.Pather();
map.addLayer(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:

pather.removePath(polyline);

Mode

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);

Classes

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 Heroku.com we colour the path handles when you have selected the L.Pather.MODE.EDIT mode – note the mode-edit class reference:

section.map.mode-edit div.elbow {
    cursor: move;
    pointer-events: all;
    background-color: rebeccapurple;
}

Options

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.