javascript - Draw a convex hull on a google map -


i new javascript , working google maps api javascript.

this asignment school , provided working script , php code display map, position, update position , on.

our task implement convex hull algorithm.

these things i'm having problems with:

  • the data-structure of objects
  • how display lines of hull on map once i've computed them

here's code;

function convexhull(){     console.log("convexhull()");     console.log(obj.length);     //check if there more 1 user, otherwise convex hull calculation useless     if(obj.length > 0){         //lists x-positions , y-positions         var pos_x = [];         var pos_y = [];         //fill lists         for(var = 0;i < obj.length; i++){             pos_y.push(parsefloat(obj[i][1]));             pos_x.push(parsefloat(obj[i][2]));             console.log("point " + + ": lat = " + pos_y[i] + ", lon = " + pos_x[i]);         }         //find lowest point index         var low_index = 0         for(var = 1;i < obj.length; i++){             if(pos_y[i] < pos_y[low_index]){                 low_index =             }         }         var angle_list = []         //make list of angles linked index, lowest point not in list         for(var = 0;i < 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 positive, since point index low_index lowest point                 if(adj > 0){                     var new_angle = math.atan(opos/adj);                     var list_item = {index:i, angle:new_angle};                     angle_list.push(list_item);                 }                 if(adj < 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 90 degrees                     var new_angle = 90;                     var list_item = {index:i, angle:new_angle};                     angle_list.push(list_item);                 }             }         }         //sort angle_list ascending angles         angle_list = angle_list.sort(function(a,b){return a.angle - b.angle;});         for(var i=0;i< angle_list.length;i++){             console.log("angle = " + angle_list[i].angle + ", index = " + angle_list[i].index);         }         //graham algorithm starts here         //this list hold indexes of convex points         var final_list  = [];         //put lowest point in 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 starting point [lowest y coordinate]         final_list.unshift(angle_list[0]);         for(var i=2;i<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,             if(value > 0){                 console.log("left turn");                 final_list.push(angle_list[i-1]);             }             //right turn, not             if(value < 0){                 console.log("right turn");                 continue;             }             //points lie on line             if(value == 0){                 final_list.push(angle_list[i-1]);                 console.log("colinear");             }         }     }            settimeout(function(){convexhull();}, 5000);     console.log(final_list);//this console outputs: [object, object, object, object, object] don't understand why has structure!     return final_list; } function drawhull(final_list){     for(var = 0; < 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));     } } 

my main lookslike this;

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 &copy; <a href="http://openstreetmap.org">openstreetmap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">cc-by-sa</a>, imagery © <a href="http://mapbox.com">mapbox</a>',     maxzoom: 18,     id: 'mapbox.streets',     accesstoken: //i deleted this, figured should stay private }).addto(mymap);    drawhull(convexhull()); //these 2 funcions , line things wrote classmate [and code based on code found on web , adjusted our needs] 

basicly want know first why var final_list has structure [object, object, object, object, object] (what console outputs)

because error: uncaught typeerror: cannot read property 'length' of undefined @ drawhull

i think implemented algorithm in correct way, can't test out.

if need additional info don't hesitate ask, tips on how make question better welcome [this first question! take consideration , kind while providing constructive feedback]

i ended fixing myself , taught idea answer own question if people stumble uppon have answer :)

here's code:

function convexhull(){     console.log("convexhull()");     console.log(obj.length);     //check if there more 1 user, otherwise convex hull calculation useless     if(obj.length > 0){         //lists x-positions , y-positions         var pos_x = [];         var pos_y = [];         //fill lists         for(var = 0;i < obj.length; i++){             pos_y.push(parsefloat(obj[i][1]));             pos_x.push(parsefloat(obj[i][2]));             console.log("point " + + ": lat = " + pos_y[i] + ", lon = " + pos_x[i]);         }         //find lowest point index         var low_index = 0         for(var = 1;i < obj.length; i++){             if(pos_y[i] < pos_y[low_index]){                 low_index =             }         }         var angle_list = []         //make list of angles linked index, lowest point not in list         for(var = 0;i < 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 positive, since point index low_index lowest point                 if(adj > 0){                     var new_angle = math.atan(opos/adj);                     var list_item = {index:i, angle:new_angle};                     angle_list.push(list_item);                 }                 if(adj < 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 90 degrees                     var new_angle = 90;                     var list_item = {index:i, angle:new_angle};                     angle_list.push(list_item);                 }             }         }         //sort angle_list bij ascending angles         angle_list = angle_list.sort(function(a,b){return a.angle - b.angle;});         for(var i=0;i< angle_list.length;i++){             console.log("angle = " + angle_list[i].angle + ", index = " + angle_list[i].index);         }         //graham algorithm starts here         //this list hold indexes of convex points         var final_list  = [];         //put lowest point in 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         final_list.unshift(angle_list[0]);         for(var i=2;i<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,             if(value > 0){                 console.log("left turn");                 final_list.push(angle_list[i-1]);                 if(i==angle_list.length-1)final_list.push(angle_list[i]);             }             //right turn, not             if(value < 0){                 console.log("right turn");                 continue;             }             //points lie on line             if(value == 0){                 final_list.push(angle_list[i-1]);                 console.log("colinear");             }         }     }            console.log(final_list);//dit de output: [object, object, object, object, object]     console.log("final_list length: " + object.keys(final_list).length);     console.log("drawing hull now\n");     //console.log("obj:" + obj + "\n");     for(var = 0; < object.keys(final_list).length-1; i++){         //console.log("obj[final_list[i].index]\n" + parsefloat(obj[final_list[i].index]));         var p1 = new l.latlng(parsefloat(obj[final_list[i].index][1]),parsefloat(obj[final_list[i].index][2]));         var p2 = new l.latlng(parsefloat(obj[final_list[i+1].index][1]),parsefloat(obj[final_list[i+1].index][2]));         var pointlist = [p1, p2];         //adding last line close hull         if(i == object.keys(final_list).length-2){             console.log("laatste punt bereikt");             var p1 = new l.latlng(parsefloat(obj[final_list[i+1].index][1]),parsefloat(obj[final_list[i+1].index][2]));             var p2 = new l.latlng(parsefloat(obj[final_list[0].index][1]),parsefloat(obj[final_list[0].index][2]));//start             var pointlist = [p1, p2];         }         polylines.push(new l.polyline(pointlist, {             color: 'yellow',             weight: 5,             opacity: 0.5,             smoothfactor: 1         }).addto(mymap));     }     settimeout(function(){convexhull();}, 5000);     //l.polyline.setmap(null); } 

Comments

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -