How to convert polyline with weight to polygon in Leaflet?

Question

I need to allow user to draw a route (using polyline) with specified road radius (visually it was done with "weight" parameter).

Visually it looks like that:

So I'm wondering how can build a polygon around this polyline with some offset? Like this:

Answer 1

Finally I made it with JSTS library (https://www.npmjs.com/package/jsts).

It's easy:

//pathCoords should be an array of jsts.geom.Coordinate
var pathCoords = [];
var geometryFactory = new jsts.geom.GeometryFactory();

// on what distance new polygon should be built
var distance = (meters * 0.0001) / 111.12;
var shell = geometryFactory.createLineString(pathCoords);

// building a new polygon
var polygon = shell.buffer(distance);

// finally get your new polygon coordinates
var polygonCoords = polygon.getCoordinates();

Answer 2

Like you said, you can use the getLatLngs method of L.Polyline to access the coordinates and use them to initialize a L.Polygon. If you need to access the weight that's been set on the polyline you can do so by using it's options object:

var polyline = new L.Polyline([[25, -25], [25, 25], [-25, 25], [-25, -25]], {
    weight: 10,
}).addTo(map);

var polygon = new L.Polygon(polyline.getLatLngs(), {
    weight: polyline.options.weight
}).addTo(map);

You could even use the entire options object if you've got more things you'll need to duplicate:

var polygon = new L.Polygon(polyline.getLatLngs(), polyline.options).addTo(map);

Since L.Polygon is extended from L.Polyline that won't be a problem since it has the same options.