Make proof-of-concept React Leaflet map showing BNA census blocks overlay

[KlaasH]

The PeopleForBikes City Ratings site uses the output of the BNA analysis for a map, but currently it's just a screen-shot of a handmade map. We want it to draw directly from the map data produced by the BNA. The simplest way to do that seems likely to be with a simple Leaflet map (with a base map, zoom controls, and a legend, but no layer control) that pulls the tiles from the BNA's tile endpoint.

To help facilitate that, we said we'd make a simple proof-of-concept Leaflet map, in React, since that's what the City Ratings project is written in.

The pages on City Ratings already have the job UUIDs from the BNA, which I believe is all you need to access the tile endpoints.

[aaronxsu]

Overview

The changes included in the following zipped file are:

• Updated package.json and yarn.lock to add react-leaflet and leaflet dependencies
• Added the ./components/leaflet-map/map.js component that takes center: number[] and jobId: uuid as input and returns a leaflet map as output.
  • the map has a default basemap layer from cartodb and a census block level tile layer that is served by https://tiles.bna.peopleforbikes.org/tile
  • a default zoom control
  • a map legend that mimics the info, breakdown, color scheme, and styling of that in the pfb app
• Replaced the map image component in pages/cities/[slug].js with the above mentioned interactive map component
• Updated the z-index for the following two components in case they are laid on top of the leaflet map, which has high z-index:
  • components/global/navbar.js
  • components/global/search.js

pfb-city-ratings-main-leaflet-map-v20220203.zip

Demo

Notes

• This should work for all the cities in the app that are included in data/static/all_v14.json
• You may notice that the map is not zoomed to the boundary of each city, and depending on the city scale, the default zoom may look ok, or too close/far. This is a caveat of the current state, but this should be easy to enhance after we have aoi or bbox data available in the city data.

Testing Instructions

• yarn install
• yarn dev
• Use the search tool on top right of the nav bar and navigate to a city of your choice
• Make sure the map loads fine with the mentioned layers and controls
• Switch to some other cities and make sure the map state keeps up with the page change

Checklist

• ~[ ] Add entry to CHANGELOG.md~

Resolves (this issue itself)

[KlaasH]

This worked great! I put the modified files into a checkout of the repo and fired it up and the map showed up looking good.

There were some formatting changes--I think your editor must have run Prettier or something similar--so I ended up reverting the existing files and pulling only the substantive changes out of them, to avoid muddying the waters in the diff. In doing that, I noticed that adjusting the z-index on only the navbar seemed to work to also prevent the map from showing up above the search overlay. I assume that's because in the DOM, the search stuff is defined inside the navbar. So I didn't include the z-index changes to search.js in the version I sent.

It turned out that my access to the repo is read-only, so pushing a branch wasn't an option. So instead I wrote things up in an email and attached a diff and the modified files. I'll reproduce that below.

I'm not sure what the next steps will be--i.e. whether John will just run with what we sent or if there will be more follow-up--but we've certainly accomplished the task of making a proof-of-concept map, so I'm going to close this issue.

Here are the writeup and attachments from my email, sent today (2/10/22):

---

This email is going to look a lot like a draft PR, since that's how I was thinking of it until I realized my repo access is read-only. But I've attached the output of git diff and a zip file containing only the new and modified files. Unzipping it on top of a checkout of the repo (and running yarn install) should give you a working version of the modified app.

What the modifications do is replace the static images in the "Network analysis" section that were exported from BNA data with a proof-of-concept Leaflet map that directly pulls the census blocks tiles from the BNA tile endpoint. The map also reproduces the legend from the BNA map, and offers a zoom control, but leaves off the other controls (like the layer picker). Some notes:

• This replaces the map image code in [slug].js (but not anywhere else in the app). Since the tile endpoint uses the UUID that was already included in the cityData object, it didn't require any new parameters.
• The cityData object includes a lat/lon pair that this uses to center the map, but it doesn't include a bounding box, so the zoomlevel is hard-coded to a value that will work OK for some cities but be too wide or too tight for others. In the BNA, we load a GeoJSON boundary layer and zoom to that. The same could work here, but the boundary endpoint is keyed by neighborhood UUID rather than by the analysis job UUID that's used for the tile endpoint. So to use that same method, the data exported from the BNA would have to include the neighborhood UUID. Alternatively, that data could include a bounding box for each city. That would be significantly simpler on the front-end, but possibly more complicated on the "exporting the data from BNA" side.
• Side note re the above: the BNA place detail URLs use the neighborhood UUID, so having that would also allow the link above the map to go directly to the corresponding place detail page on the BNA, rather than to the landing page.
• The changes in navbar.js and styles.js are because the styles that come with Leaflet use high z-index values, so the map was showing up on top of the navbar. Increasing the navbar's z-index to something even higher seems to take care of it.

bna-map-demo.diff.txt bna-map-demo.zip