Currently utilizing the UK Geo JSON found at this link to generate a UK SVG Map.
The goal is to plot longitude and latitude points onto this map.
The GeometryCollection place is being added to the map in the following manner:
data.objects.places = {
type: "GeometryCollection",
geometries: [
{
type: "Point",
coordinates: [-0.127758, 51.507351], // London
properties: {
name: "London - Testing"
}
}
]
};
However, the coordinates are not aligning correctly.
JavaScript code for visualization purposes:
var width = 960;
var height = 1000;
var projection = d3.geo.albers()
.center([0, 55.4])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(4000)
.translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("topo_eer.json", function(error, data) {
// Create path for the UK
svg.selectAll(".subunit")
.data(topojson.feature(data, data.objects.eer).features)
.enter().append("path")
.attr("class", function(d) { return "subunit " + d.id; })
.attr("d", path);
// Path around regions
svg.append("path")
.datum(topojson.mesh(data, data.objects.eer, function(a, b) { return a !== b; }))
.attr("d", path)
.attr("class", "subunit-boundary");
// Add places to our data
data.objects.places = {
type: "GeometryCollection",
geometries: [
{
type: "Point",
coordinates: [-0.127758, 51.507351], // London
properties: {
name: "London - Testing"
}
}
]
};
// try plotting a point
svg.append("path")
.datum(topojson.feature(data, data.objects.places))
.attr("d", path)
.attr("class", "place-online");
console.log(data);
});