0

I need to plot many polygons from a FeatureCollection geojson file. When I do so using D3.js and Leaflet, my path elements are drawn far away off the map. And my svg element is drawn with a height of zero. Why is my code giving me this result?

I thought that path.bounds() would be able to handle my FeatureCollection, but I think it's the reason my svg element is draw with a height of zero. While I see my path elements in the DOM, I am stumped as to why my path elements are being drawn so far away from the map. 

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

...

var transform = d3.geo.transform({point: projectPoint}),
path = d3.geo.path().projection(transform)

// create path elements for each of the features
var d3_features = g.selectAll("path").data(geoShape.features)
            .enter().append("path");


map.on("viewreset", reset);

reset();

// fit the SVG element to leaflet's map layer
function reset() {

var bounds = path.bounds(geoShape);

var topLeft = bounds[0],
bottomRight = bounds[1];

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

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

// initialize the path data
     d3_features
        .attr("d", path)
        .attr('fill','blue')
        .attr("stroke", "black")
        .style("fill-opacity", 0.7);
}

        // Use Leaflet to implement a D3 geometric transformation.
  function projectPoint(x, y) {
  var point = map.latLngToLayerPoint(new L.LatLng(y, x));
  this.stream.point(point.x, point.y);
 }
})

The path elements should draw over Tucson many rectangular polygons that overlap. I've reproduced my problem here: http://bl.ocks.org/Alex-Devoid/97a003bf42cfc9a7e922b650c42d264c

Dinosaur Reporter
  • 55
  • 1
  • 9
  • Can look closer tomorrow, not sure why your vertices are all rendering at the same point at a glance, but geojson is long then lat, whereas you have lat then long: `[corner4.lat, corner4.lng],` – Andrew Reid Jul 18 '19 at 05:32
  • Once I switched to lng then lat, all of the polygons rendered where I expected them to. Thank you. You should be able to see it at the bl.ocks.org link. – Dinosaur Reporter Jul 18 '19 at 17:34

0 Answers0