├── .gitignore
├── LICENSE
├── README.md
├── examples
├── example.html
├── example_bus.html
└── example_cycle.html
├── leaflet.polylineoffset.js
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | *.sh
2 | *.ps1
3 | *~
4 | *.sublime-*
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Benjamin Becquet
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Leaflet Polyline Offset
2 | ===
3 | Works with Leaflet >= 1.0.
4 |
5 | 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.
6 |
7 | ## Install with NPM
8 |
9 | ```bash
10 | npm install leaflet-polylineoffset
11 | ```
12 |
13 | ## Use cases and demos
14 |
15 | 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.
16 |
17 | This plugin brings this feature to Leaflet, to apply to client-side vectors.
18 |
19 | Demos are clearer than words:
20 | * [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.
21 | * [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.
22 | * [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.
23 |
24 | ## Usage
25 |
26 | The plugin adds offset capabilities directly to the `L.Polyline` class.
27 | ```javascript
28 | // Instantiate a normal Polyline with an 'offset' options, in pixels.
29 | var pl = L.polyline([[48.8508, 2.3455], [48.8497, 2.3504], [48.8494, 2.35654]], {
30 | offset: 5
31 | });
32 |
33 | // Setting the 'offset' property through the 'setStyle' method won't work.
34 | // If you want to set the offset afterwards, use 'setOffset'.
35 | pl.setOffset(-10);
36 |
37 | // To cancel the offset, simply set it to 0
38 | pl.setOffset(0);
39 | ```
40 |
41 | ## License
42 | MIT.
43 |
44 | ## Contributors
45 | * [Benjamin Becquet](https://github.com/bbecquet) (original author)
46 | * [sanderd17](https://github.com/sanderd17)
47 | * [jellevoost](https://github.com/jellevoost)
48 | * [ghybs](https://github.com/ghybs)
49 | * [BartWaardenburg](https://github.com/BartWaardenburg)
50 |
--------------------------------------------------------------------------------
/examples/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Leaflet Polyline Offset example
8 |
9 |
10 |
15 |
16 |
17 |
18 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/examples/example_bus.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Leaflet Polyline Offset - Bus lines example
8 |
9 |
10 |
15 |
16 |
17 |
18 |
279 |
280 |
281 |
282 |
283 |
284 |
285 |
--------------------------------------------------------------------------------
/examples/example_cycle.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Leaflet Polyline Offset - Cycle lanes example
8 |
9 |
10 |
15 |
16 |
17 |
18 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
--------------------------------------------------------------------------------
/leaflet.polylineoffset.js:
--------------------------------------------------------------------------------
1 | (function (factory, window) {
2 | if (typeof define === 'function' && define.amd) {
3 | define(['leaflet'], factory);
4 | } else if (typeof exports === 'object') {
5 | module.exports = factory(require('leaflet'));
6 | }
7 | if (typeof window !== 'undefined' && window.L) {
8 | window.L.PolylineOffset = factory(L);
9 | }
10 | }(function (L) {
11 |
12 | function forEachPair(list, callback) {
13 | if (!list || list.length < 1) { return; }
14 | for (var i = 1, l = list.length; i < l; i++) {
15 | callback(list[i-1], list[i]);
16 | }
17 | }
18 |
19 | /**
20 | Find the coefficients (a,b) of a line of equation y = a.x + b,
21 | or the constant x for vertical lines
22 | Return null if there's no equation possible
23 | */
24 | function lineEquation(pt1, pt2) {
25 | if (pt1.x === pt2.x) {
26 | return pt1.y === pt2.y ? null : { x: pt1.x };
27 | }
28 |
29 | var a = (pt2.y - pt1.y) / (pt2.x - pt1.x);
30 | return {
31 | a: a,
32 | b: pt1.y - a * pt1.x,
33 | };
34 | }
35 |
36 | /**
37 | Return the intersection point of two lines defined by two points each
38 | Return null when there's no unique intersection
39 | */
40 | function intersection(l1a, l1b, l2a, l2b) {
41 | var line1 = lineEquation(l1a, l1b);
42 | var line2 = lineEquation(l2a, l2b);
43 |
44 | if (line1 === null || line2 === null) {
45 | return null;
46 | }
47 |
48 | if (line1.hasOwnProperty('x')) {
49 | return line2.hasOwnProperty('x')
50 | ? null
51 | : {
52 | x: line1.x,
53 | y: line2.a * line1.x + line2.b,
54 | };
55 | }
56 | if (line2.hasOwnProperty('x')) {
57 | return {
58 | x: line2.x,
59 | y: line1.a * line2.x + line1.b,
60 | };
61 | }
62 |
63 | if (line1.a === line2.a) {
64 | return null;
65 | }
66 |
67 | var x = (line2.b - line1.b) / (line1.a - line2.a);
68 | return {
69 | x: x,
70 | y: line1.a * x + line1.b,
71 | };
72 | }
73 |
74 | function translatePoint(pt, dist, heading) {
75 | return {
76 | x: pt.x + dist * Math.cos(heading),
77 | y: pt.y + dist * Math.sin(heading),
78 | };
79 | }
80 |
81 | var PolylineOffset = {
82 | offsetPointLine: function(points, distance) {
83 | var offsetSegments = [];
84 |
85 | forEachPair(points, L.bind(function(a, b) {
86 | if (a.x === b.x && a.y === b.y) { return; }
87 |
88 | // angles in (-PI, PI]
89 | var segmentAngle = Math.atan2(a.y - b.y, a.x - b.x);
90 | var offsetAngle = segmentAngle - Math.PI/2;
91 |
92 | offsetSegments.push({
93 | offsetAngle: offsetAngle,
94 | original: [a, b],
95 | offset: [
96 | translatePoint(a, distance, offsetAngle),
97 | translatePoint(b, distance, offsetAngle)
98 | ]
99 | });
100 | }, this));
101 |
102 | return offsetSegments;
103 | },
104 |
105 | offsetPoints: function(pts, options) {
106 | var offsetSegments = this.offsetPointLine(L.LineUtil.simplify(pts, options.smoothFactor), options.offset);
107 | return this.joinLineSegments(offsetSegments, options.offset);
108 | },
109 |
110 | /**
111 | Join 2 line segments defined by 2 points each with a circular arc
112 | */
113 | joinSegments: function(s1, s2, offset) {
114 | // TODO: different join styles
115 | return this.circularArc(s1, s2, offset)
116 | .filter(function(x) { return x; })
117 | },
118 |
119 | joinLineSegments: function(segments, offset) {
120 | var joinedPoints = [];
121 | var first = segments[0];
122 | var last = segments[segments.length - 1];
123 |
124 | if (first && last) {
125 | joinedPoints.push(first.offset[0]);
126 | forEachPair(segments, L.bind(function(s1, s2) {
127 | joinedPoints = joinedPoints.concat(this.joinSegments(s1, s2, offset));
128 | }, this));
129 | joinedPoints.push(last.offset[1]);
130 | }
131 |
132 | return joinedPoints;
133 | },
134 |
135 | segmentAsVector: function(s) {
136 | return {
137 | x: s[1].x - s[0].x,
138 | y: s[1].y - s[0].y,
139 | };
140 | },
141 |
142 | getSignedAngle: function(s1, s2) {
143 | const a = this.segmentAsVector(s1);
144 | const b = this.segmentAsVector(s2);
145 | return Math.atan2(a.x * b.y - a.y * b.x, a.x * b.x + a.y * b.y);
146 | },
147 |
148 | /**
149 | Interpolates points between two offset segments in a circular form
150 | */
151 | circularArc: function(s1, s2, distance) {
152 | // if the segments are the same angle,
153 | // there should be a single join point
154 | if (s1.offsetAngle === s2.offsetAngle) {
155 | return [s1.offset[1]];
156 | }
157 |
158 | const signedAngle = this.getSignedAngle(s1.offset, s2.offset);
159 | // for inner angles, just find the offset segments intersection
160 | if ((signedAngle * distance > 0) &&
161 | (signedAngle * this.getSignedAngle(s1.offset, [s1.offset[0], s2.offset[1]]) > 0)) {
162 | return [intersection(s1.offset[0], s1.offset[1], s2.offset[0], s2.offset[1])];
163 | }
164 |
165 | // draws a circular arc with R = offset distance, C = original meeting point
166 | var points = [];
167 | var center = s1.original[1];
168 | // ensure angles go in the anti-clockwise direction
169 | var rightOffset = distance > 0;
170 | var startAngle = rightOffset ? s2.offsetAngle : s1.offsetAngle;
171 | var endAngle = rightOffset ? s1.offsetAngle : s2.offsetAngle;
172 | // and that the end angle is bigger than the start angle
173 | if (endAngle < startAngle) {
174 | endAngle += Math.PI * 2;
175 | }
176 | var step = Math.PI / 8;
177 | for (var alpha = startAngle; alpha < endAngle; alpha += step) {
178 | points.push(translatePoint(center, distance, alpha));
179 | }
180 | points.push(translatePoint(center, distance, endAngle));
181 |
182 | return rightOffset ? points.reverse() : points;
183 | }
184 | }
185 |
186 | // Modify the L.Polyline class by overwriting the projection function
187 | L.Polyline.include({
188 | _projectLatlngs: function (latlngs, result, projectedBounds) {
189 | var isFlat = latlngs.length > 0 && latlngs[0] instanceof L.LatLng;
190 |
191 | if (isFlat) {
192 | var ring = latlngs.map(L.bind(function(ll) {
193 | var point = this._map.latLngToLayerPoint(ll);
194 | if (projectedBounds) {
195 | projectedBounds.extend(point);
196 | }
197 | return point;
198 | }, this));
199 |
200 | // Offset management hack ---
201 | if (this.options.offset) {
202 | ring = L.PolylineOffset.offsetPoints(ring, this.options);
203 | }
204 | // Offset management hack END ---
205 |
206 | result.push(ring.map(function (xy) {
207 | return L.point(xy.x, xy.y);
208 | }));
209 | } else {
210 | latlngs.forEach(L.bind(function(ll) {
211 | this._projectLatlngs(ll, result, projectedBounds);
212 | }, this));
213 | }
214 | }
215 | });
216 |
217 | L.Polyline.include({
218 | setOffset: function(offset) {
219 | this.options.offset = offset;
220 | this.redraw();
221 | return this;
222 | }
223 | });
224 |
225 | return PolylineOffset;
226 |
227 | }, window));
228 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "leaflet-polylineoffset",
3 | "version": "1.1.1",
4 | "description": "Apply a relative pixel offset to polylines without changing their coordinates.",
5 | "main": "leaflet.polylineoffset.js",
6 | "directories": {
7 | "example": "examples"
8 | },
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/bbecquet/Leaflet.PolylineOffset.git"
15 | },
16 | "keywords": [
17 | "map",
18 | "leaflet",
19 | "polyline",
20 | "offset",
21 | "layer",
22 | "vector"
23 | ],
24 | "author": "Benjamin Becquet",
25 | "license": "MIT",
26 | "bugs": {
27 | "url": "https://github.com/bbecquet/Leaflet.PolylineOffset/issues"
28 | },
29 | "homepage": "https://github.com/bbecquet/Leaflet.PolylineOffset#readme"
30 | }
31 |
--------------------------------------------------------------------------------