How to draw a polygon around a polyline in JavaScript?

Question

I want to draw a polygon around a polyline. The polyline in my case is a Google Maps direction and I need to show a polygon around it within the Google Maps canvas.

Answer 1

This is the working solution. You can find the JSTS files at coderwall.com.

var overviewPath = response.routes[0].overview_path,
overviewPathGeo = [];
for (var i = 0; i < overviewPath.length; i++) {
   overviewPathGeo.push(
      [overviewPath[i].lng(), overviewPath[i].lat()]
   );
}

var distance = value / 10000, // Roughly 10km
geoInput = {
type: "LineString",
    coordinates: overviewPathGeo
};
var geoReader = new jsts.io.GeoJSONReader(),
    geoWriter = new jsts.io.GeoJSONWriter();
var geometry = geoReader.read(geoInput).buffer(distance);
var polygon = geoWriter.write(geometry);

var oLanLng = [];
var oCoordinates;
oCoordinates = polygon.coordinates[0];
for (i = 0; i < oCoordinates.length; i++) {
   var oItem;
   oItem = oCoordinates[i];
   oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0]));
}

var polygone = new google.maps.Polygon({
    paths: oLanLng,
    map:map
});

Answer 2

My working solution: working example (based off of Manolis Xountasis's answer) and pieces from these related questions:

1. How to calculate intersection area in Google Maps API with JSTS Library?
2. Google Maps Polygons self intersecting detection

• include the JSTS library
• add routines to translate google.maps.Polyline paths to JSTS objects:

function googleMaps2JTS(boundaries) {
    var coordinates = [];
    var length = 0;
    if (boundaries && boundaries.getLength) length = boundaries.getLength();
    else if (boundaries && boundaries.length) length = boundaries.length;
    for (var i = 0; i < length; i++) {
        if (boundaries.getLength) coordinates.push(new jsts.geom.Coordinate(
        boundaries.getAt(i).lat(), boundaries.getAt(i).lng()));
        else if (boundaries.length) coordinates.push(new jsts.geom.Coordinate(
        boundaries[i].lat(), boundaries[i].lng()));
    }
    return coordinates;
};

• and back to google.maps.LatLng arrays

var jsts2googleMaps = function (geometry) {
  var coordArray = geometry.getCoordinates();
  GMcoords = [];
  for (var i = 0; i < coordArray.length; i++) {
    GMcoords.push(new google.maps.LatLng(coordArray[i].x, coordArray[i].y));
  }
  return GMcoords;
}

• get the directions polyline from the DirectionsService and buffer it

directionsService.route(request, function (response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var overviewPath = response.routes[0].overview_path,
            overviewPathGeo = [];
        for (var i = 0; i < overviewPath.length; i++) {
            overviewPathGeo.push(
            [overviewPath[i].lng(), overviewPath[i].lat()]);
        }

        var distance = 10 / 111.12, // Roughly 10km
            geoInput = {
                type: "LineString",
                coordinates: overviewPathGeo
            };
        var geoInput = googleMaps2JTS(overviewPath);
        var geometryFactory = new jsts.geom.GeometryFactory();
        var shell = geometryFactory.createLineString(geoInput);
        var polygon = shell.buffer(distance);

        var oLanLng = [];
        var oCoordinates;
        oCoordinates = polygon.shell.points[0];
        for (i = 0; i < oCoordinates.length; i++) {
            var oItem;
            oItem = oCoordinates[i];
            oLanLng.push(new google.maps.LatLng(oItem[1], oItem[0]));
        }
        if (routePolygon && routePolygon.setMap) routePolygon.setMap(null);
        routePolygon = new google.maps.Polygon({
            paths: jsts2googleMaps(polygon),
            map: map
        });
    }
});