Add slippy tiles

[nachtm]

We now use mapbox-gl to display our data instead of static images. Users can zoom in/out and pan around to an extent:

Since we were concerned about potentially hitting our quota of map loads, I did some work to recycle the map instances as much as possible. Basically, the <App/> component stores a div and a <Map/> associated with that div. The CityProfileCard needs access to that div, which I could have done by passing it down as a prop but decided to try using a Context instead. I think it's pretty clean but I'm happy to rework. Actually getting the CityProfileCard to show an element passed in to it took a little hacking/magic as seen in this comment.

Thanks to @ahmouda12 for doing a lot of the initial legwork here!

Remaining TODOs on the map area:

• button to switch between styles
• update the legend
• add an "open in iD editor" button
• anything else?

[MonicaBrandeis]

LGTM!

[MonicaBrandeis]

@nachtm let me know if rest to-do will be on your other PR so we can merge or we should wait!

[nachtm]

I took the svg that @ahmouda12 created through d3 and added it directly to the map as the legend. Looks like this:

If anyone has a better eye for design and wants to make/suggest improvements I'm all ears.

[nachtm]

More updates: we now have an open in iD editor button (the pencil logo on the right) and a switch-map-styles button (the layers button on the left).

Looks like this:

More specifically, here are the three different layers:

@MonicaBrandeis can you confirm that these are correct?

[MonicaBrandeis]

Not exactly

1. No car -> Car Ownership
2. Population
   Delete the work from home

[nachtm]

Updated the layer names again:

[sayas01]

Looks great!