map tiles are gone?

When I visit click-that-hood.com, none of the underlying basemap tiles show up - I think there’s supposed to be satellite imagery underneath the clickable polygons. For some geographies, that’s not a big deal - I can play just fine on US state outlines without needing to see anything underneath it. For others, it’s more of a pain - California vistas are pretty tough to manage without seeing more of California!: http://click-that-hood.com/california-vista-points

It looks like there needs to be an update to use a different map tile source. In the browser console, I see requests for this failing with error 410 (Gone): http://a.tiles.mapbox.com/v3/codeforamerica.map-mx0iqvk2.jsonp?callback=reqwest_1635023189270

It comes back with a message: reqwest_1635023189270({"message":"Classic styles are no longer supported; see https://blog.mapbox.com/deprecating-studio-classic-styles-d8892ac38cb4 for more information"});

Do you have any suggestions for what map source to switch to?

[epaulson]

@fnogatz I talked with the folks at Code for America, and they’re willing to continue to provide a Mapbox key to support click-that-hood. Maybe long-term Code for Germany would like to switch to something else, but this might be an easy way to get something going again in the short term. If you send me an email - [e-mail] - I can share your email address with the CfA folks involved.

I’m happy to help update the code to use the new key, but I think it best that you and CfA talk directly about the key first. (we may need some help from CfA to set up the right style? I’m not 100% sure)

[epaulson]

@fnogatz @specious I’ve pushed more updates to my branch.

1. I included a mapbox key so it should for you with just a checkout of the branch and the usual npm install / run build/ start
2. I made clipping a per-map option - in the metadata, you can set a maxLat and minLat and your map is clipped to that - it builds a new geojson object, so it’s honest-to-goodness clipped. I turned it on for the europe-1914 and -1938 maps, which benefit from clipping out the really far north stuff. (I think Canada would too)
3. Africa’s geojson is still a bit different and chicago-parks still has the “turn points into bigger polygons” feature turned off, and I’m still using turfbox
4. I haven’t tested on a touch device
5. For the most part, the maps that cross the -180 meridian work correctly (asia, russia, and oceania)

There are two remaining problems - which I’m starting to suspect are related. The first is that the ‘Neighborhood Guess’ and ‘Timer’ boxes are centered to the SVG container, and not the map container. It is noticeably different from what’s currently on click-that-hood.com and I’m not sure why it’s picking the center of the window as a different place. Maybe the MapboxGL CSS is doing something?

The second big issue, which is most noticeable on the maps that cross the anti-meridian, is that when the window size gets too small, the polygons for the map/SVG get placed into incorrect location. It’s gradual - it’s off by a little bit if the window is a bit too small, and the smaller the window gets the more incorrect the polygon placement gets. It’s not just the anti-meridian crossers - Canada is a mess too if the window is too small, especially without maxLat set for it and the crazy northern mercator distortions, and africa can be a bit off if the window gets too small. I’m sure others are wrong too, I haven’t tested everything. Again, I think it might be related to whatever is causing the non-centering of the “Click <neighborhood>” and “Timer” boxes - it’s like something doesn’t quite know the size of the container it’s using.

I can open this as a pull request if you want, but I’m not sure it should get merged without understanding why windows that are too small don’t line up with the map - but maybe as a PR someone else who actually knows what they’re doing can see the problem…