I have my json file looks like this
{"level" :[
{"color" : "#FF6600", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
{"color" : "#FFFF00", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
]}
if i declare a variable for the above json format inside my html, then I manage to manipulate the data with the following code
var dataObj = {"level" :[
{"color" : "#FF6600", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
{"color" : "#FFFF00", "Polygon" : [
{"lon" : 125.8575930951375,"latt": 36.95626849495004},
{"lon" : 125.8851548404469,"latt": 36.99677151742446},
{"lon" : 125.9128154107602,"latt": 37.03743133552931},
{"lon" : 125.9564137105485,"latt": 37.07788492352393},]},
]}
function UseJSON(){
for (i = 0; i < dataObj.level.length; i++)
{
var polygon = [];
for (j = 0; j < dataObj.level[i].Polygon.length; j++)
{
var point = map.getTransformXY(dataObj.level[i].Polygon[j].lon, dataObj.level[i].Polygon[j].latt,"EPSG:4326","EPSG:900913");
polygon.push(new OpenLayers.Geometry.Point(point.x, point.y));
}
var style_polygon = {strokeColor: "#000000", strokeOpacity: 0.7, fillColor: dataObj.level[i].color, fillOpacity: 0.5, strokeWidth: 1};
var intensityPolygon = new vworld.Polygon(polygon, style_polygon);
map.vectorLayer.addFeatures([intensityPolygon]);
}
}
Refer to this previous answer in SO: How to use json in html
I try to modify my code as per below:
function UseJSON(){
$.getJSON('data.json', function(dataObj) {
for (i = 0; i < dataObj.level.length; i++)
{
var polygon = [];
for (j = 0; j < dataObj.level[i].Polygon.length; j++)
{
var point = map.getTransformXY(dataObj.level[i].Polygon[j].lon, dataObj.level[i].Polygon[j].latt,"EPSG:4326","EPSG:900913");
polygon.push(new OpenLayers.Geometry.Point(point.x, point.y));
}
var style_polygon = {strokeColor: "#000000", strokeOpacity: 0.7, fillColor: dataObj.level[i].color, fillOpacity: 0.5, strokeWidth: 0.5};
var intensityPolygon = new vworld.Polygon(polygon, style_polygon);
map.vectorLayer.addFeatures([intensityPolygon]);
}
});
}
But it does not seems to work. As it seems does not get the data.json file from local. Any idea?
Thank you