CODEWITHSUNDEEP
d3.js
geotheory
geotheory

Reputation: 23660

Cannot plot GeoJSON points in D3/Leaflet app

I am trying to adapt Mike Bostock's D3/Leaflet example to plot points/paths. I'm unable to get this script working. The JSON is verified - see Github. It also fails running via Python local server. Grateful for any tips in where I'm going wrong.

It is also viewable at Github and working in bl.ocks. The JSON file.

<!DOCTYPE html>
<html>
<head>
<title>Calibration-check points using Leaflet and D3</title>

<!-- Points are London O2 Arena, Washington Monument, Cape Town Stadium and the Sydney Opera House -->

<meta charset="utf-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->

<style>

#mapA 
{
border:2px solid;
border-radius:0;
 height: 99.5%; 
} 
html, body { height: 100%; width: 100%; margin: 0; }
</style>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>

</head>
    <body>
        <p id="mapA" height: 100%></p>

        <script>

// Function to check JSON is valid
geogjnfile = 'reference_points.geojson';
function validateJSON()
{
$.ajax({
    url: 'http://geojsonlint.com/validate',
    type: 'POST',
    data: geogjnfile,
    dataType: 'json',
    success: processSuccess,
    error: processError
});
}
function processSuccess() {console.log("JSON OK");}
function processError()   {console.log("JSON Invalid");}
validateJSON();


    var markersOnMap = [];

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png',
    cloudmadeAttribution = ' 2013 CloudMade';

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
    midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999,   attribution: cloudmadeAttribution});

var map = L.map('mapA', {
    center: new L.LatLng(20, 0),
    zoom: 2,
    layers: [minimal]
});

    var svg = d3.select(map.getPanes().overlayPane).append("svg"),
        g = svg.append("g").attr("class", "leaflet-zoom-hide");

    d3.json("https://dl.dropboxusercontent.com/u/46043231/data/reference_points.geojson", function(collection) {

        function project(x) {
          var point = map.latLngToLayerPoint(new L.LatLng(x[1], x[0]));
          return [point.x, point.y];
        }

        var path = d3.geo.path().projection(project);

        var feature = g.selectAll("path")
          .data(collection.features)
          .enter().append("path");

        feature.attr("d", path);

        var bounds = d3.geo.bounds(collection),
            bottomLeft = project(bounds[0]),
            topRight = project(bounds[1]);

        svg .attr("width", topRight[0] - bottomLeft[0])
            .attr("height", bottomLeft[1] - topRight[1])
            .style("margin-left", bottomLeft[0] + "px")
            .style("margin-top", topRight[1] + "px");

        g   .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");

    });


var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight
};

        </script>

    </body>
</html>

Upvotes: 3

Views: 960

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

Looks like you've hit a bug in d3.geo.bounds(). For your data, it returns

[[151.21495788612214, -33.90365832941416],
 [18.41118908051975, 51.50298551279427]]

whereas the bounds should be

[[-77.035237489892879, -33.903658329414156],
 [151.21495788612214, 51.502985512794268]]

If you specify these bounds manually, everything works fine -- http://jsfiddle.net/C7yNh/

I've opened a bug report about this here.

edit

Well, I stand corrected. This is in fact the correct behaviour as the minimum bounding box crosses the anti-meridian. In this case, you need to get the bounding box coordinates using path.bounds() and the points returned are top left and bottom right because of the x/y swap with leaflet. Working jsfiddle here, thanks to Mike Bostock.

Upvotes: 4

Related Questions