Create an initial "map" component

[glesica]

Since the first part of this project is focused on creating a map of Montana nonprofits, we will need a full-window map component. Not sure what it should be built on, but Leaflet.js seems promising. Bonus points for relying on OSM for the mapping data since it's also a community-driven project. Additionally, we may be able to even augment OSM itself later with some of our data to make things simpler.

[eidietrich]

Maybe late to this, but I'd suggest we try to use vector tiles (which provide smoother UX on zooming) instead of the default Leaflet raster base map. Resource below suggests a mapbox-gl-leaflet library:

https://openmaptiles.org/docs/website/leaflet/

[eidietrich]

I've committed to mocking up our planned map view:

Three zoom levels

• State - county lines w/ circle marks representing # of nonprofits, as data is filtered w/ number text label. With tooltips
• County - County boundary. Neighbor counties shown (click to shift view to that county). Within selected county: circles for each distinct post office/address city w/ nonprofit counts as circle mark and text label. Plus tooltips, probably
• City level: D3 bubble chart showing nonprofits by category, e.g. https://github.com/UsabilityEtc/d3-country-bubble-chart. Plus tooltips

[eidietrich]

I've made enough progress to check in here w/ a rough implementation of what we discussed the week before last.

New components should be pushed to the repo on the three-tier-view branch. I haven't integrated them into the primary app pending Smai's front-end framework being ready but you can see where I'm at with a Storybook setup. Run npm i to get storybook and the D3 libraries I've used, then npm run storybook to open up its component viewer. The main mock ups are in the ThreeTierMap category, which has a few prepackaged views. Note I've used an old data file that looks like an incomplete list of nonprofits, and also doesn't have any budget/category fields to use to make the city-level view interesting.

I think I've set up these maps so it'll be pretty quick to iterate on design specifics (colors, label formatting, etc.), but want to talk through whether the overall approach is working before putting any more time in. I'm also curious how the approach I've taken squares to the D3-in-React stuff Smai was experimenting with.

Work remaining:

• [ ] - Pulling in better data (which means I need to figure out where George's extractor is at)
• [ ] - Fixing some quirks of the geographic data I've used (e.g. Belgrade is shown south of Bozeman, not west of it b/c that's where the centroid of the Belgrade zip code lands)
• [ ] - Integrating this into our front-end data management system (Redux?). I've been trying to bundle business logic functions in a logic/logic.js file, but I suspect we'll have to rework most all of that
• [ ] - Adding some sort of onHover interactivity indicator to clickable things (need to discuss what CSS approach we want to use first)
• [ ] - Adding tooltip functionality
• [ ] - Making these components responsive (already implemented if a higher-level component can pass a desired width/height to the chart components)
• [ ] - (Possibly) look at using d3-force for the bubble plots instead of a slightly hacky implementation of the d3-hierarchy circle packing system.
• [ ] - General graphic design polish