I have received a JSON response containing coordinates from PHP in the following format:
{"All":[{"longitude":"36.8948669","name":" Manyanja Rd, Nairobi, Kenya","latitude":"-1.2890965","userID":"1"}, ...]}
Next, I am processing it using JavaScript as shown below:
$.ajax({
url : "http://xxx.xxx.xxx/GetLocations.php",
dataType : "json",
data :"",
success :
function (data){
//populate map is the function that gets the coordinates for display using d3
//When I console.log(data), the JSON data is displayed meaning the data is present
populate_map(data)
}
});
This is the populate_map function.
function populate_map(pos_data){
console.log(pos_data.All[0]);
var width = 700;
var height = 580;
var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );
var g = svg.append( "g" );
var albersProjection = d3.geo.albers()
.scale( 190000 )
.rotate( [71.057,0] )
.center( [0, 42.313] )
.translate( [width/2,height/2] );
var geoPath = d3.geo.path()
.projection( albersProjection );
var projection = d3.geo.mercator()
.center([36.8, -1.3])
.scale([60000])
.translate([width/2, height/2]);
var nairobipathing = d3.geo.path().projection(projection);
g.selectAll( "path" )
.data( data.geometries )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "stroke", "#333")
.attr( "d", nairobipathing );
svg.selectAll("circles.points")
.data(pos_data)
.enter()
.append("circle")
.attr("r",5)
.attr("transform", function(d) {return "translate(" d.All.longitude+","+d.All.latitude ")";});
}
The issue lies in the fact that no coordinates are being displayed on the initialized Nairobi map. However, when I log the data in the populate function, the JSON data is visible.
The last SVG element is supposed to show these coordinates on the map but it doesn't seem to be working and no coordinates are displayed.
I would appreciate any assistance in identifying where the problem might be occurring.