map tiles are gone?

[epaulson]

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]

I did send an email to Code for America to see if they're still supporting their Mapbox account, if they are this might be a reasonably easy change. I will update if I hear anything back.

[fnogatz]

Hi @epaulson, thank you for raising this point. In recent weeks, we transferred this repository from the namespace of Code for America to Code for Germany. We just made the first steps to revive the repository and public instance at https://click-that-hood.com/. After this migration, I don't think it's feasible to rely on the Mapbox account of CfA again.

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

The failing maps were simply not yet on our roadmap. So maybe I could just ask you: Do you have any suggestions for what map source Click that 'hood could switch to? We are open to any pull request!

[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 - [email protected] - 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)

[fnogatz]

CARTO offers free tile servers for their basemaps. In the branch leaflet-carto-basemaps, I just uploaded a first fuzzy draft for the replacement of Mapbox. All the zoom logic needs to be updated, but it's already possible to get a first impression on the map's look:

Alternatively with ESRI satellite images (https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}):

I just wanted to try this approach. @epaulson and @specious, what do you think? Should we move into this direction or migrate to the latest Mapbox version?

[epaulson]

I also have it somewhat working with the latest MapboxGL, however, I don't have the zoom logic quite right yet (and I haven't fixed "point" type maps like airports)

To do zooms I wanted to upgrade to a slightly more recent version of d3 (i'm using v4 in my code) - it's got some libraries that I think might let us get rid of a lot of the code and hard-coded constants in calculateMapSize - see the answer by dnltsk in this post: https://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object

(Note that I turned on controls, because my projection/zoom logic is wrong. it gets the size right but clips too much at the bottom and puts the shapefile a bit off to the side - for this screenshot I dragged the map over a bit to make it look right)

[fnogatz]

Yeah, the zoom calculation had to be adjusted in my quick+dirty approach, too, @epaulson. Maybe it's best to open an issue to upgrade D3.js to its latest version first, and then continue here?

And feel free to push your changes to a new branch, I recently added you as a collaborator to this repository :)

[epaulson]

@fnogatz I pushed my changes into a branch on my fork - https://github.com/epaulson/click_that_hood/tree/newmaps
(I left it my repo because I am bad at git and would probably screw up the real repo 😄 )

I updated to d3 version 4, to keep the changes minimal. (I think I tried the latest version and it didn't work out of the box because there were some breaking API changes between v3 and v7. v4 seemed to work out of the box and had the new call I wanted)

I did not check in my mapbox key, but it's easy to sign up for a free account and get a key - the usage limits are plenty high for testing. (I didn't have to give them a credit card to get started)

My zoom/projection is much closer now and might even work for most things - it seems to size and place things correctly. (the d3v4 API does make this a lot easier.) I pulled in turf.js when I was experimenting but I think we could probably drop it - I'm just using it for a bounding box but we're already calculating that elsewhere in the code, we can use the mapboxgl code to create a bounding box from the boundary points we're already calculating.

The new D3 API means there's some "dead" code that is still included and calculating numbers that aren't ever used. If we keep turf.js there might even be some more code we could get rid of.

This does not work for the point type maps like airports, I didn't try to update the code to deal with those. (It's probably pretty easy though)

I left the controls turned on for the map, we would want to turn those off for real.

It'll be a couple of days at least before I can get take another look at this again. I don't have a strong opinion on if we should use mapboxgl.js + Mapbox or leaflet.js + CARTO for the basemaps. I think I like the ESRI images the most, but Mapbox studio lets you come up tweak the styles and you're not limited to only the public styles.

(I think it probably still needs a bit more buffer space on the map size, to make the polygons a bit smaller and keep the counter off the countries)

[epaulson]

It was a 2 line fix to get point-type maps (airports, etc) working again so I added that to my branch

Overall the scale is still a little bit off - with points, the bounding box only goes right to the points, so the markers for the points on the edges get cut off by half. The original code fixed that by putting in a 1.1 scale factor for the bounding box (the 'latSpread' and 'longSpread') - I think adding some kind of extra buffer would fix both the point type maps and give the counter box/question boxes a bit of space to keep them off polygons for the map - I'm just not quite sure how to get d3 to scale them down a bit more without mapbox putting the shapes in the wrong spot.

[epaulson]

@fnogatz @specious I've pushed some more updates to my branch, this is getting closer. Four big problems:

1. It's taking even more of a dep on turfbox. (That might not be a problem, but wanted to flag it)
2. Things aren't right with the antimeridian. For asia, oceania, and russia, it's clipping at 180. I'm still not sure what the right way to fix this is.
3. I'm intentionally clipping at 75 N - I think it makes it easier to play, especially the historic European maps (including svalbard with mercator really distorts/shrinks the bulk of Europe), but it's a bit weird for parts of russia to be clipped off in the russia and asia maps. Maybe it's better to add some kind of max lat setting per map in the metadata?
4. chicago-parks tries to have a mix of points and polygons, but I don't quite have the projection code fixed for that one. So for now, i just turned off that feature for chicago maps.
5. (minor problem) - Africa's geojson is just a touch different than everything else, so I have to hardcode a case to deal with it.

I have not tried every map, but as far as I can tell most everything works.

I added some additional vertical padding in the CSS, which work better for me on a retina mac in Chrome and Safari, but maybe it is unnecessary on a lower DPI display?

I've also not tried it on mobile.

I think we should stick with mapbox for maps, and get a key from CodeForAmerica. MapboxGL is a pretty great library, and if we ever want to use a fancier projection like the cool globe projection that google maps uses as farther-out zoom levels, I think we'd have the most luck getting that to work with Mapbox.

[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 " 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...