topojson / D3 / Map with longitude + latitude
<p>Im using the follwing UK Geo JSON to render a UK SVG Map
<a href="http://martinjc.github.io/UK-GeoJSON/json/eng/topo_eer.json" rel="nofollow">http://martinjc.github.io/UK-GeoJSON/json/eng/topo_eer.json</a></p>

<p>On this map i want to be able to take longitude + latitude points and plot onto the map. </p>

<p>I am adding a GeometryCollection place to the map in the following way:</p>

<pre><code> data.objects.places = {
        type: "GeometryCollection",
        geometries: [
            {
                type: "Point",
                coordinates: [-0.127758, 51.507351], // London
                properties: {
                    name: "London - Testing"
                }
            }
        ]
    };
</code></pre>

<p>However the coordinates are not in the correct place.</p>

<p>Below is the full javascript.</p>

<pre><code>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);

});
</code></pre>