Geometry (CONVOLUTION) function with javascript or

Question

I try to do this 3 months - I need to create a polygon by route direction like here:

so so I write this:

directionService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
        var r = [];
        var z = 0.5;
        var bla = result.routes[0].overview_path;
        for(var i=0 in result.routes[0].overview_path) {
            r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
        }
        bla.reverse();
        for(var x=0 in bla) {
            r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
        }

        var prva = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#00000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        prva.setMap(map);

        druga = new google.maps.Polygon({
            paths: r,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });

        druga.setMap(map);

    } else {
      alert("Directions query failed: " + status);
    }
  });

but in some cases is good in some cases not, so my code produce this:

BAD case:

GOOD case:

So how I can solve this problem to get nice polygon by route direction ??? Does someody have idea?

How I can implement this into my code:

CONVOLUTION ALGORITHM

Is there any solution for my problem?

Is there some other way than this to create what I need?

Answer 1

The algorithm to produce the second image is quite simple geometrically. I'll write you some pseudocode, assuming you have an array of x,y arrays:

coordinates = [[x1,y1],[x2,y2] ... [xn,yn]]
leftcoords = []
rightcoords = []

projectionwidth = 1        # How wide the path is

for each coordinate in coordinates:
    pathvector = coordinate(index + 1) - coordinate(index - 1)
    normpathvector = pathvector/(length(pathvector))
    perpvector = projectionwidth*[-normpathvector[1],normpathvector[0]]
    leftcoords.append(coordinate + perpvector)
    rightcoords.append(coordinate - perpvector)

You have to take care at the end of the path to only choose coordinates ahead or behind, but you get the idea. You end up with three sets of coordinate trajectories. You can set it up to average several points if you'd like to smooth the path.

Ok, so here is code that works, but you'll have to do some work to smooth it out to account for the jitter in the path. My suggestion would be to average several previous points, or just grab a point several back.

http://jsbin.com/uTATePe/2/