3

I'm trying to get the Google Maps Javascript API to take points from a JSON and use the computeOffset() function to calculate points left and right so that I can plot a path using polygons. My current code seems to only be making strange shapes instead of making clean polygon connections from point to point.

I'm defining var lastPoint as the lastPoint from the jQuery $.each loop so that when the query goes to the next lat lng value the polygon will connect to the previous point. Instead of nice square polygons from point to point I'm getting weird shapes, mainly triangles instead of squares.

$.getJSON('sixth.json', function(data) { 
  var lastPoint;
  var myLatlng2;
  var polyShape;

  $.each( data.contactdetails, function(i, value) {
    myLatlng2 =  new google.maps.LatLng(value.lat, value.lng);

    var boomwidth = value.boomwidth;
    var bear = value.bear;
    var boomconversionfactor = 1;

//computeOffset returns a LatLng position by using the bearing and number of feet to return another location
    var point1 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear + 90);
    var point2 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);
    var point3 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, 90 + bear);
    var point4 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);

    if (lastPoint !== undefined){
      var point1 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear + 90);
      var point2 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear - 90);
    }

    var Coords = [point1,point2, point3, point4];

    // Construct the polygon.
    polyShape = new google.maps.Polygon({
      paths: Coords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });

    polyShape.setMap(map); 

//assign lastPoint the lat lng value from the jQuery loop. Trying to connect previous position to next by placing the lastPoint outside the loop.

  lastPoint = myLatlng2;

  }); //close of .each jQuery loop




 });

This is what the json contains. When I use an alert or plot with markers the locations show up correctly on the map.

JSON

Here is an image. Instead of cleanly closing the polygons I'm getting these triangular shaped pieces.

Google Map's Image with unclosed Red Polygons

Tom
  • 1,223
  • 1
  • 16
  • 27
johnsonjp34
  • 3,139
  • 5
  • 22
  • 48
  • What is the data in `second.json`? (or sample data that will exhibit the issue...) – geocodezip Jun 22 '15 at 22:47
  • @geocodezip I have placed the contents of the json above. Thanks – johnsonjp34 Jun 22 '15 at 23:04
  • Putting those red lines into a single polygon make for one weird looking polygon. What are you really trying to do? – geocodezip Jun 23 '15 at 00:07
  • @geocodezip Those points probably aren't a good representation. Basically I take the lat lng values, calculate an offset left and right (to highlight how wide the object moving is) and then close in the area to the next point. A better lat lng data sample would be a path, but regardless I can't seem to get the area between the points to fill in with a polygon. – johnsonjp34 Jun 23 '15 at 00:35
  • @geocodezip I have placed a better sample of the points that I'm trying to make a path out of polygons for. I have included a link to the JSON source above. I need to use polygons because combined with the computeOffset() method of the Google Maps Spherical tools is the only way to highlight an area exactly the inputed width. For the most part this will be used out in the countryside offroad to track the width and coverage of my equipment in the field as the equipment moves back and forth. – johnsonjp34 Jun 25 '15 at 18:52
  • Are you just trying to cover the road? There are easier ways of doing that. – geocodezip Jun 26 '15 at 00:38
  • Possible duplicate of [How to draw a polygon around a polyline in JavaScript?](http://stackoverflow.com/questions/19369363/how-to-draw-a-polygon-around-a-polyline-in-javascript) – geocodezip Jun 26 '15 at 00:40

1 Answers1

6

If the bearing is less than 90 a point to left for a polygon in the computeOffset() method won't work because computeOffset() only takes a bearing of 0-360 starting at 0 and going clockwise from North. So if the bearing is less than 90 simply take 360 and add the bearing - 90. If the bearing is greater than 270 take the bearing + 90 and subtract 360.

The following code will make the polygons the correct shape around the path:

   var bear2;
   if(bear>270){bear2 = (bear + 90) - 360;} else{bear2 = bear + 90;}
   var bear3;
   if(bear<90) { bear3 = 360 + (bear -90);} else{bear3 = bear - 90;}


    var point1 =    google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear2);
 var point2 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear3);
   var point3 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2,  bear2);
   var point4 = google.maps.geometry.spherical.computeOffset(myLatlng2, (0.30480 * boomwidth * boomconversionfactor) / 2, bear3);

        if (lastPoint !== undefined){
  var point1 =    google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2 , bear3);
 var point2 = google.maps.geometry.spherical.computeOffset(lastPoint, (0.30480 * boomwidth * boomconversionfactor) / 2, bear2);

        }

The 0.30480 * boomWidth * boomconversionfactor simply puts the width of the polygon in units of feet. The boomconversionfactor can be set to 1 (to make it stay feet) or 3.28 (for meters) with the use of a boolean and an if statement. Dividing by two is used because the width is determined by the distance to the left and to the right.

The polygons now look like:

Polygons formed around path

johnsonjp34
  • 3,139
  • 5
  • 22
  • 48