bbecquet / leaflet.polylineoffset

Apply a relative pixel offset to polylines without changing their coordinates.

Leaflet Polyline Offset

Works with Leaflet >= 1.0.

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

Install with NPM

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. 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. Drawing a road with two directions of cycle lanes, a main one and one shared.
• Bus lines. 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

The plugin adds offset capabilities directly to the L.Polyline class.

// Instantiate a normal Polyline with an 'offset' options, in pixels.
var pl = L.polyline([[48.8508, 2.3455], [48.8497, 2.3504], [48.8494, 2.35654]], {
  offset: 5
});

// Setting the 'offset' property through the 'setStyle' method won't work.
// If you want to set the offset afterwards, use 'setOffset'.
pl.setOffset(-10);

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

License

MIT.

Contributors

• Benjamin Becquet (original author)
• sanderd17
• jellevoost
• ghybs
• BartWaardenburg

leaflet.polylineoffset's Issues

npm package

Hi.

Have you planned to add your plugin published to npm ?
It's really useful when using Typescript to directly use npm package.

Thanks !

Offset is not applying correctly

Can anyone help with this issue. When polylines are imported with offset with distance 5, at corners some of the lines it is applying -5 and for some it is applying +5.

Side of the offset

I noticed that the JOSM MapCSS implementation uses positive=left and negative=right offset (see https://josm.openstreetmap.de/wiki/Help/Styles/MapCSSImplementation#Linestyles)

I noticed your library uses the opposite definition. When I look at it logically, I'd also take your approach. But JOSM approach already has many styles that use it (and already exists 3 years https://josm.openstreetmap.de/changeset/4316/josm).

I'd like to use your code in overpass-turbo (see tyrasd/overpass-turbo#117) to interpret MapCSS. The side of the offset is not a big problem (just add a '-' on the parsing side). But code is always cleaner without unnecessary negations (and the difference may lead to more problems outside this MapCSS library).

So I wonder if you're planning to change the offset side, or if your side is permanant, and we should adapt it in the MapCSS parsing. (In the latter case, it might be worth to document the difference clearly.)

Regards,
Sander

Fix offset behavior at low zoom levels

When zooming-out, the offset lines get messed up, with bad angles and overlapping segments.

Get LatLngs of new offset-ed polyline

Hi,
How can I get the new LatLng of the new offset-ed polyline?

Thanks

Add Polygon support

As L.Polygon extends L.Polyline, it already works mostly, except for the segment joining the last and first point.
It needs to be taken into account by the offset process, including the angles.

Compatibility with Leaflet 1.x

It seems that updating leaflet to any of the Leaflet 1.x versions will brake this plugin.

It would be really great if someone would be able to find where it breaks and how we can make this compatible again. I'll try to have a look as well.

Bug with polygons from GeoJSON

I have drawn polygons with the L.geoJson() function. I wanted to create a large line along the border of each polygon (inside the polyogon), so I have used another L.geoJson() function with an offset at 5. I have an issue for some polygons : the offset works well with all the sides but on the top and right sides, the offset get a little outside of the polygon. It is random, sometimes only on top, sometimes only on right side and sometimes both.

In extreme cases, points are far off

Drawing a polyline with a 2px offset with many points (100+) in many angles I have several times seen serious issues with points that are on different continents.... Not sure if this is a duplicate.

Setting an offset creates circles

PolylineOffset creates circles whenever I set an offset to my polyline.

The polyline I use has some coordinates which are very close to eachother, this is probably the cause.

based on the following data:
https://gist.github.com/nlafleur/4092716f612859335dcdeaf990ab5863#file-sectiondata

Single polyline:

Single polyline + extra polyline added on the same coordinates:

Extra polyline code:

var red = L.polyline(sectionCoords, {
  color: "red",
  opacity: 1,
  offset: 0
}).addTo(groupRef)

Single polyline + extra polyline added with the same coordinates with an offset of 5:

Offset polyline code:

var red = L.polyline(sectionCoords, {
  color: "red",
  opacity: 1,
  offset: 5
}).addTo(groupRef)

I tried adding the "smoothFactor" (https://leafletjs.com/reference.html#polyline-smoothfactor) with an high number but this doesn't fix everything + it simplifies the polyline too much.

unable to integrate in angular application

Hi @bbecquet ,

In this plugin type definition file is missing, due to that I'm unable to integrate this plugin in my angular application. Could you please help for the same?

Thanks in advance.

Add leaflel polyline offset in Angular

Hello! How can I add this plugin to Angular? I have some problems.
I did:

1. npm install leaflet-polylinedecorator --force
2. in angular.json, inside "scripts", i added: "node_modules/leaflet-polylineoffset/leaflet.polylineoffset.js"

thanks in advance!

Get the offset latlnt

Thanks for this great plugin.
Is there any way to have the offset line actual latlng?
I have an offset polyline that I want to use to draw a polygon. But for this, I need the latlng of the offset polyline.
Thanks.

Cannot set offset property with ngx-leaflet

Hello! I am new to leaflet and i am trying to use offset property in Angular 10 using ngx-leaflet. I installed polylineOffset with npm, but it seems like it doesn't extend property 'offset' to my Polyline type.
I create the polyline like this:
//replace 'lat' and 'long' with actual coordinates var coords = [ [lat, long], [lat, long], .... , [lat, long] ] const newPolyline= L.polyline(coords, { offset: -5 });
I get the following error: Argument of type '{ offset: number; }' is not assignable to parameter of type 'PolylineOptions'.

Offset to a gpx track

Hi, is it possible to offset a gpx track, because PolylineOffset works with a L.Polyline class? I intend to add a parallel line to a track path displayed with the GPX Plugin, and thus, avoiding to import all the polyline array of points to the script. In that case, is there any code example o demo I can take a look to? Thank you!

point on polyline

Hi, nice work,
I would like to show some points on these lines, f.e. moving buses.
Can you pls add some function (or some advice) to calculate position of point somewhere on org line?
it means
Transformation of position on org line to point on line with offset.
thx

Allow control of the joint style

Much is already coded in the utility functions, but it's not exposed to the Polyline class.

Merging parallel ways that are part of the same street using GeoJSON leaflet

I am using leaflet, for routing transit GeoJSON routes, and one thing I've noticed is that often, in major routes polylines are divided into two separate Inbound and Outbound routes, parallel ways - one way for each direction. This behavior is not desirable for the particular program I'm writing, so I want parallel ways to be merged into a single way running down the center of the street. It seems like a fairly simple problem, but I'm having a trouble getting the program to identify ways that need to be merged and then merge them properly.

Right now I'm using "https://github.com/bbecquet/Leaflet.PolylineOffset" this library for showing transit bus routes

Tooltip getCenter error

After I upgraded to the leaflet 1.3 I got the error that getCenter() was not a function triggered by leaflets tooltip.

After a little digging, it seems that the polylineOffset is return an object with {x:..., y:...} rather than an instance of a leaflet point https://github.com/bbecquet/Leaflet.PolylineOffset/blob/master/leaflet.polylineoffset.js#L206

If I change ring to return leaflet point's this seems to fix the bug.
result.push(ring.map(xy => L.point(xy.x, xy.y)));

Can you see any issue with this fix, or anything that I have missed?

Leaflet.PolylineOffset and React

Hi,

Has anyone been able to get this to work with current (> 17.0) React.js and react-leaflet? Just importing it after npm install doesn't do anything (two Polylines between two locations don't show an offset), I saw a hint that I was supposed to do something like at https://github.com/pajicv/react-leaflet-with-custom-plugin/blob/master/src/App.js but leafletElement is undefined.

I am at a loss ;-)

Thanks!

The rounding applied to some angles appears off

Fix the algo. The interpolated points needs to be set evenly between the two extremities.

Offset in meters

Hello,

Is it possible to add a method to specify the offset in meters? To create new polyline with a specific offset in meters?

Thanks.