Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Wildhoney/L.Pather
Branching from Leaflet.FreeDraw, L.Pather is a freehand polyline creator that simplifies the polyline for mutability.
https://github.com/Wildhoney/L.Pather
Last synced: 3 months ago
JSON representation
Branching from Leaflet.FreeDraw, L.Pather is a freehand polyline creator that simplifies the polyline for mutability.
- Host: GitHub
- URL: https://github.com/Wildhoney/L.Pather
- Owner: Wildhoney
- License: mit
- Created: 2015-04-16T07:29:40.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-05-16T13:20:47.000Z (over 5 years ago)
- Last Synced: 2024-05-23T04:03:22.890Z (5 months ago)
- Language: JavaScript
- Homepage: https://pather.herokuapp.com/
- Size: 85 KB
- Stars: 69
- Watchers: 11
- Forks: 26
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# L.Pather
* **Heroku**: [http://pather.herokuapp.com/](http://pather.herokuapp.com/)
* **Bower:** `bower install leaflet-pather`;
Branching from [`Leaflet.FreeDraw`](https://github.com/Wildhoney/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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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:
```javascript
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:
```html
```
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](https://pather.herokuapp.com) we colour the path handles when you have selected the `L.Pather.MODE.EDIT` mode – note the `mode-edit` class reference:
```css
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](https://github.com/Wildhoney/L.Pather/blob/master/module/Pather.js). 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:
```javascript
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:
```javascript
pather.setOptions({ pathColour: 'orange' });
```
**Note:** In defining the options, `L.Pather` uses ES6's [`Object.assign`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) which is polyfilled using the [MDN's polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill) if your browser doesn't currently support it.