title: Draw a convex hull on a google map
body: <p>I am new to javascript and working with google maps API for javascript.</p>
  
  <p>This is an asignment for school and we were provided with a working script and some php code to display a map, get the position, update the position and so on.</p>
  
  <p>Our task is to implement a convex hull algorithm.</p>
  
  <p>These are the things I'm having problems with:</p>
  
  <ul>
  <li>The data-structure of some objects</li>
  <li>How to display the lines of the hull on the map once I've computed them</li>
  </ul>
  
  <p>Here's the code;</p>
  
  <pre><code>function convexHull(){
      console.log("convexHull()");
      console.log(obj.length);
      //check if there are more than one user, otherwise convex hull calculation would be useless
      if(obj.length &gt; 0){
          //lists with x-positions and y-positions
          var pos_x = [];
          var pos_y = [];
          //fill the lists
          for(var i = 0;i &lt; obj.length; i++){
              pos_y.push(parseFloat(obj[i][1]));
              pos_x.push(parseFloat(obj[i][2]));
              console.log("point " + i + ": lat = " + pos_y[i] + ", lon = " + pos_x[i]);
          }
          //find lowest point index
          var low_index = 0
          for(var i = 1;i &lt; obj.length; i++){
              if(pos_y[i] &lt; pos_y[low_index]){
                  low_index = i
              }
          }
          var angle_list = []
          //make list of angles linked to index, the lowest point will not be in this list
          for(var i = 0;i &lt; obj.length; i++){
              if(i != low_index){
                  var opos = pos_y[i] - pos_y[low_index];
                  var adj = pos_x[i] - pos_x[low_index];
                  //opos will always be positive, since the point with index low_index is the lowest point
                  if(adj &gt; 0){
                      var new_angle = Math.atan(opos/adj);
                      var list_item = {index:i, angle:new_angle};
                      angle_list.push(list_item);
                  }
                  if(adj &lt; 0){
                      var new_angle = Math.atan(opos/adj)+ Math.PI;
                      var list_item = {index:i, angle:new_angle};
                      angle_list.push(list_item);
                  }
                  if(adj == 0){ //if adj = 0, angle is 90 degrees
                      var new_angle = 90;
                      var list_item = {index:i, angle:new_angle};
                      angle_list.push(list_item);
                  }
              }
          }
          //sort angle_list by ascending angles
          angle_list = angle_list.sort(function(a,b){return a.angle - b.angle;});
          for(var i=0;i&lt; angle_list.length;i++){
              console.log("angle = " + angle_list[i].angle + ", index = " + angle_list[i].index);
          }
          //GRAHAM ALGORITHM STARTS HERE
          //this list will hold all indexes of convex points
          var final_list  = [];
          //put the lowest point in the angle_list
          var list_item = {index:low_index, angle:0};
          angle_list.unshift(list_item);
  
          //NEW STUFF HERE
          //eerst het beginpunt met laagste y-coor invoegen
          //english: inserting the starting point [lowest y coordinate]
          final_list.unshift(angle_list[0]);
          for(var i=2;i&lt;angle_list.length;i++){
              var value = (((pos_x[angle_list[i-1].index]-pos_x[angle_list[i-2].index])*(pos_y[angle_list[(i)].index]-pos_y[angle_list[i-2].index]))-((pos_y[angle_list[i-1].index]-pos_y[angle_list[i-2].index])*(pos_x[angle_list[(i)].index]-pos_x[angle_list[i-2].index])));
              //left turn, this is good
              if(value &gt; 0){
                  console.log("left turn");
                  final_list.push(angle_list[i-1]);
              }
              //right turn, this is not good
              if(value &lt; 0){
                  console.log("right turn");
                  continue;
              }
              //points lie on a line
              if(value == 0){
                  final_list.push(angle_list[i-1]);
                  console.log("colinear");
              }
          }
      }       
      setTimeout(function(){convexHull();}, 5000);
      console.log(final_list);//this is what the console outputs: [Object, Object, Object, Object, Object] I don't understand why it has this structure!
      return final_list;
  }
  function DrawHull(final_list){
      for(var i = 0; i &lt; final_list.length-1; i++){
          console.log(parseFloat(obj[final_list[i]]));
          var p1 = new L.LatLng(parseFloat(obj[final_list[i]][1]),parseFloat(obj[final_list[i]][2]));
          var p2 = new L.LatLng(parseFloat(obj[final_list[i+1]][1]),parseFloat(obj[final_list[i+1]][2]));
          var pointList = [p1, p2];
          polylines.push(new L.polyline(pointList, {
              color: 'yellow',
              weight: 10,
              opacity: 0.5,
              smoothFactor: 1
          }).addTo(mymap));
      }
  }
  </code></pre>
  
  <p>My main lookslike this;</p>
  
  <pre><code>getLocation();
  
  
  var mymap = L.map('mapid').setView([51.0336851,3.7019778], 13);
  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, &lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt;, Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
      maxZoom: 18,
      id: 'mapbox.streets',
      accessToken: //I deleted this, I figured it should stay private
  }).addTo(mymap);
  
    DrawHull(convexHull()); //These two funcions and this line are the only things I wrote with my classmate [and his code is based on some code he found on the web and adjusted to our needs]
  </code></pre>
  
  <p>Basicly what I want to know first is why var final_list has a structure [Object, Object, Object, Object, Object] (what the console outputs)</p>
  
  <p>Because I get this error: Uncaught TypeError: Cannot read property 'length' of undefined at DrawHull</p>
  
  <p>I think I implemented the algorithm in a correct way, but I can't test it out.</p>
  
  <p>If you need additional info don't hesitate to ask, tips on how to make this question better are also welcome [this is my first question! So take that into consideration and be kind while providing constructive feedback]</p>