Length buffer around polyline

Question

I'm not very good at mathematics, so I got a problem. I have a route from one, to another distination. Some time I was trying to apply a colored plot aroud the route in fixed length. But I cant get a nice rounded corners and my lack of math is making me a lot of truble.

Now I got this

And the code

        var r = [];
        var bla = result.routes[0].overview_path;
        for(i in result.routes[0].overview_path) {
            r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
        }
        bla.reverse();
        for(x in bla) {
            r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
        }

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

        kelias.setMap(MAP);

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

        fonas.setMap(MAP);

I just want to ask for some information directions OR maybe some of you already have made this functionality and have some functions

Working demo here. Somehow i need to get same result of drawing that.

SOLUTIONS

• Buffered polyline using JSTS lib.
• ArcGIS server solution

Answer 1

I found this stack in SO Path stroke algorithm (convert to triangles/quads) or other suggestions where there is a similar question, just for C++.

The answer is a algorithm in this PDF on page 3 (the CONVOLVE algorithm).

If you perhaps could make a working example in JSFiddle, we could be able to program a solution in there.

-- edit

After some time of analysing the script in the link you provided for the life demo, I found, that the polyline is not calculated in javascript, but is calculated on the server and returned with a AJAX call to some PERL programme.

Answer 2

Can't you just draw another polyline on the same path as the first one, with a larger stroke? It doesn't give you exactly the same results, i.e. a polygon with a border color different from its fill color, but the overall effect is very similar.

// first, black line
var kelias = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#000000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

// second, translucent red line
var kelias2 = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 40,
            map: MAP
        });

Update: You're adding and subtracting 'z' from both the latitude and longitude of the points along your path. Given that latitude runs from +90 to -90, but longitude runs from +180 to -180, I think you maybe need different values for each.