diff --git a/README.md b/README.md index 3f82d94..d907407 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,12 @@ 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. @@ -11,8 +17,8 @@ Line offsetting is the process of drawing a line parallel to an existant one, at 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 @@ -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); ``` diff --git a/package.json b/package.json new file mode 100644 index 0000000..4106d12 --- /dev/null +++ b/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" +}