Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list

L.Pather

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

Subscribe to updates I use L.Pather


Statistics on L.Pather

Number of watchers on Github 37
Number of open issues 7
Average time to close an issue 5 days
Main language JavaScript
Open pull requests 0+
Closed pull requests 1+
Last commit over 3 years ago
Repo Created over 4 years ago
Repo Last Updated over 1 year ago
Size 87 KB
Homepage https://pather.he...
Organization / Authorwildhoney
Contributors1
Page Updated
Do you use L.Pather? Leave a review!
View open issues (7)
View L.Pather activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating L.Pather for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

L.Pather

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

L.Pather open issues Ask a question     (View All Issues)
  • almost 3 years leaflet 1.0 compatibitlity
  • over 3 years Mobile (tablet) support?
  • over 3 years JSXTransformer.js not available in download package
  • almost 4 years Fix polyline clipping
  • about 4 years removeLayer
L.Pather list of languages used
Other projects in JavaScript