Search code examples
routesgeometryleafletpolyline

How to convert polyline with weight to polygon in Leaflet?


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:

enter image description here

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

enter image description here


Solution

  • 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();