html5 - How do i use KineticJS polygon object with geoJSON coordinates rather than points? -

html5 - How do i use KineticJS polygon object with geoJSON coordinates rather than points? -

i creating interactive map on html5 canvas using kineticjs, problem map info in geojson, have polygon coordinates rather polygon points.

this how polygon points(according tutorial)

//javascript object map info var mymap = { 'russia': { points: [44,1,397,1,518,2,518,151,515,..............6,43,4,43,4] }, 'azerbaijan': { points: [198, 242, 201, 245, 203,..............197, 242] }, 'uae': { points: [224,406,225,410,...............225,407] } }; //function homecoming map info function getdata() { homecoming mymap; }

then utilize kineticjs polygon object draw map on html5 canvas.

//store map info in variable var areas = getdata(); //loop through map (var key in areas) { (function () { var k = key; var area = areas[key]; var points = area.points; var shape = new kinetic.polygon({ points: points, fill: '#fff', stroke: '#555', strokewidth: .5, alpha: 0.1 }); } ()); }

does know how can accomplish same geojson coordinates? here sample of geojson. coordinates nested within geometry object.

{ "type": "featurecollection", "features": [{ "type": "feature", "id": 0, "properties": { "objectid_1": 29, "objectid": 29, "county_nam": "baringo", "county_cod": 30, "shape_leng": 5.81571392065, "shape_area": 0.88451236881 }, "geometry": { "type": "polygon", "coordinates": [ [ [ 36.028686523000033, 1.276123047000056 ], [ 36.036499023000033, 1.263916016000053 ], [ 36.039306641000053, 1.259887695000032 ],............[ 36.028686523000033, 1.276123047000056 ] ] ] } } ] }

var myarray = new array(); for( var level1 in coordinates ){ // each array in coordinates for( var level2 in level1){ // each array in array for( var number in level2){ // each number in array myarray.push(number); } } } var points = myarray;

maybe many levels of nesting, main idea:

go through sub arrays , grab numbers in each , place them in new array.

html5 gis kineticjs geojson