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