1

I have been struggling trying to get d3.js to render geoJSON data correctly into an SVG. The following JSFiddle shows the problem

http://jsfiddle.net/8zjb3yrq/

You will notice that the result of fiddle produces a white object on a gray background, but it should instead be showing a gray object on a white background. Basically it's showing the desired shape as a hole in the rest of the map. I've been trying to show multiple of these shapes, but they overlay eachother because of this and I only see the last one. I'm pulling data from a geography field in SQL Server, converting it to geoJSON and passing it to this page. Some shapes render correctly, but others do not and I haven't found a pattern yet. I've used http://geojsonlint.com/ and http://geojson.io to validate the geoJSON and they show it correctly.

My javascript code looks like this:

$(function() {

var mapData = JSON.parse('{"type": "FeatureCollection", "features": 
[{"type": "Feature", "properties": {"name": "Bear Lake Schools"}, "geometry":{"type": "MultiPolygon","coordinates":[[[[-86.070382504247434,44.425073643644744],
...
[-86.171655793200145,44.374257397888158]]]] }}]}');

var svg = d3.select("svg");
var width = 960;
var height = 600;

var projection = d3.geoMercator().scale(4000).center([-83, 43]);
var path = d3.geoPath().projection(projection);

svg.attr("width", width).attr("height", height)

svg.append("g")
  .classed('map-layer', true)
  .selectAll("path")
  .data(mapData.features)
  .enter().append("path")
  .attr("d", path);
});

What do I need to do to get this to display correctly?

Rono
  • 3,171
  • 2
  • 33
  • 58
  • 2
    The issue is winding order, see [this question and answer](https://stackoverflow.com/q/54947126/7106086), though in the event of mixed winding orders, you could use another library such as turf to rewind as in [this question and answer](https://stackoverflow.com/q/49311001/7106086). There is also the possibility of seeing if features intersect the south pole or some other point that is not included in the polygons to determine if rewinding is necessary using `d3.geoContains`. – Andrew Reid Jun 26 '19 at 14:17
  • Thanks for pointing me to that article @AndrewReid. Calling .ReorientObject() on the geometry value in my SQL statement fixed the issue. – Rono Jun 26 '19 at 15:29
  • 1
    that would be a good solution - you could add it as an answer and tag the question with SQL server - I don't believe I've come across a similar answer (though I mostly just look at client side geojson issues). – Andrew Reid Jun 26 '19 at 15:46

1 Answers1

0

In the SELECT statement when getting the data from SQL Server, I added ReorientObject() to the clause like the following. Then my shapes appeared properly.

SELECT Location.ReorientObject().STAsText() AS WKT FROM MyTable
Rono
  • 3,171
  • 2
  • 33
  • 58