JSFiddle - React, Tailwind, and code Playground

by iamjpg

HTML

<script src="https://rawgit.com/mourner/simplify-js/master/simplify.js"></script>
<script src="https://rawgit.com/adammiller/826148/raw/c8af0ad3a5e4cf01f3f08db851b06a1857fc4c63/douglasPeucker.js"></script>
<div id="map"></div>

<script src="//maps.google.com/maps/api/js?key=AIzaSyDciDh5LCPwyxG8tml6998d80mlukEj8Q4&libraries=drawing,places,geometry"></script>

CSS

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

JavaScript

google.maps.Polyline.prototype.simplifyLine = function(tolerance) {
  var res = null;

  if (this.getPath() && this.getPath().getLength()) {
    var points = this.getPath().getArray();

    var Line = function(p1, p2) {
      this.p1 = p1;
      this.p2 = p2;

      this.distanceToPoint = function(point) {
        // slope
        var m = (this.p2.lat() - this.p1.lat()) / (this.p2.lng() - this.p1.lng()),
          // y offset
          b = this.p1.lat() - (m * this.p1.lng()),
          d = [];
        // distance to the linear equation
        d.push(Math.abs(point.lat() - (m * point.lng()) - b) / Math.sqrt(Math.pow(m, 2) + 1));
        // distance to p1
        d.push(Math.sqrt(Math.pow((point.lng() - this.p1.lng()), 2) + Math.pow((point.lat() - this.p1.lat()), 2)));
        // distance to p2
        d.push(Math.sqrt(Math.pow((point.lng() - this.p2.lng()), 2) + Math.pow((point.lat() - this.p2.lat()), 2)));
        // return the smallest distance
        return d.sort(function(a, b) {
          return (a - b); //causes an array to be sorted numerically and ascending
        })[0];
      };
    };

    var douglasPeucker = function(points, tolerance) {
      if (points.length <= 2) {
        return [points[0]];
      }
      var returnPoints = [],
        // make line from start to end 
        line = new Line(points[0], points[points.length - 1]),
        // find the largest distance from intermediate poitns to this line
        maxDistance = 0,
        maxDistanceIndex = 0,
        p;
      for (var i = 1; i <= points.length - 2; i++) {
        var distance = line.distanceToPoint(points[i]);
        if (distance > maxDistance) {
          maxDistance = distance;
          maxDistanceIndex = i;
        }
      }
      // check if the max distance is greater than our tollerance allows 
      if (maxDistance >= tolerance) {
        p = points[maxDistanceIndex];
        line.distanceToPoint(p, true);
        // include this point in the output 
        returnPoints...