Skip to content

Commit

Permalink
NPM package
Browse files Browse the repository at this point in the history
  • Loading branch information
bbecquet committed Jul 18, 2016
1 parent 24d2361 commit c05c293
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 3 deletions.
12 changes: 9 additions & 3 deletions README.md
Expand Up @@ -4,15 +4,21 @@ Works with Leaflet 0.7.x and 0.8-dev. Should work with the upcoming 1.0.

This plugin adds to Leaflet `Polyline`s the ability to be drawn with a relative pixel offset, without modifying their actual `LatLng`s. The offset value can be either negative or positive, for left- or right-side offset, and remains constant across zoom levels.

## Install with NPM

```bash
npm install leaflet-polylineoffset
```

## Use cases and demos

Line offsetting is the process of drawing a line parallel to an existant one, at a fixed distance. It's not a simple (x,y) translation of the whole shape, as it shouldn't overlap. It can be used to visually emphasize different properties of the same linear feature, or achieve complex composite styling.

This plugin brings this feature to Leaflet, to apply to client-side vectors.

Demos are clearer than words:
* [Basic demo](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example.html). The dashed line is the "model", with no offset applied. Red is with a -10px offset, green is with a 5px offset. The three are distinct `Polyline` objects but uses the same coordinate array.
* [Cycle lanes](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example_cycle.html). Drawing a road with two directions of cycle lanes, a main one and one shared.
* [Basic demo](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example.html). The dashed line is the "model", with no offset applied. Red is with a -10px offset, green is with a 5px offset. The three are distinct `Polyline` objects but uses the same coordinate array.
* [Cycle lanes](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example_cycle.html). Drawing a road with two directions of cycle lanes, a main one and one shared.
* [Bus lines](http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example_bus.html). A more complex demo. Offsets are computed automatically depending on the number of bus lines using the same segment. Other non-offset polylines are used to achieve the white and black outline effect.

## Usage
Expand All @@ -28,7 +34,7 @@ var pl = L.polyline([[48.8508, 2.3455], [48.8497, 2.3504], [48.8494, 2.35654]],
// If you want to set the offset afterwards, use 'setOffset'.
pl.setOffset(-10);

// To cancel the offset, simply set it to 0
// To cancel the offset, simply set it to 0
pl.setOffset(0);
```

Expand Down
30 changes: 30 additions & 0 deletions package.json
@@ -0,0 +1,30 @@
{
"name": "leaflet-polylineoffset",
"version": "1.0.0",
"description": "Apply a relative pixel offset to polylines without changing their coordinates.",
"main": "leaflet.polylineoffset.js",
"directories": {
"example": "examples"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/bbecquet/Leaflet.PolylineOffset.git"
},
"keywords": [
"map",
"leaflet",
"polyline",
"offset",
"layer",
"vector"
],
"author": "Benjamin Becquet",
"license": "MIT",
"bugs": {
"url": "https://github.com/bbecquet/Leaflet.PolylineOffset/issues"
},
"homepage": "https://github.com/bbecquet/Leaflet.PolylineOffset#readme"
}

0 comments on commit c05c293

Please sign in to comment.