codeforgermany / click_that_hood

A game where users must identify a city's neighborhoods as fast as possible
http://click-that-hood.com
MIT License
450 stars 639 forks source link

For some cities only a square is displayed #339

Open sebkur opened 2 years ago

sebkur commented 2 years ago

For some cities, the expected suburb boundaries do not appear, instead there only a giant square on the map.

These are cities for which it doesn't work here:

for most other cities everything works fine.

I have the impression it might have something to do with the extend of the city, the ones above are all rather small ones, so that the zoom level is rather high (i.e. zoomed in).

sebkur commented 2 years ago

I have looked into the Chrome Developer Tools and looked for something suspicious happening but didn't stumble upon anything that looks like it could be the cause for this. I don't think it is a problem with the data as others who also experience the problem told me they used to work before.

epaulson commented 2 years ago

@sebkur can you check out the geojson winding order of those - see what we did in #332

sebkur commented 2 years ago

Thanks, indeed, that seems to do the trick. See #342 for Bad Belzig. When this passes review I can also fix the others.

sebkur commented 2 years ago

I also detected a few more broken ones:

Those also have some polygons that are not in clockwise order, however I wasn't able to see that anything is broken in the web app:

epaulson commented 2 years ago

re: the cities that aren't ordered right but display correct - I'm unfortunately not enough of a GIS/D3 expert to know exactly why the old version of d3 (v3) had no problem with these files and why the modern version of d3 (v7) does - I've not been able to find a documented change in d3 that says it's more strictly enforcing the order or some other change that would help us understand what exactly to look for.

sebkur commented 2 years ago

I guess it might have to do with @mbostock's reply further down on the thread you you linked to https://github.com/d3/d3-geo/pull/79#issuecomment-281130284:

Related, it’s not sufficient to say that the exterior ring should be clockwise (or anticlockwise) because D3 uses spherical rather than planar equirectangular coordinates. Better to clarify that exterior ring for polygons smaller than a hemisphere should be clockwise; polygons larger than a hemisphere will use the opposite winding order. In other words both winding orders are valid but have opposite meaning.

I'm also still not quite getting this yet. Spherical polygons, planar polygons, hmm, which one's do we have at hand?

epaulson commented 2 years ago

Right - but what I didn't understand was what changed in D3 between v3 and v7 - wasn't it always using spherical coordinates?