feat: added Point data + Legend for Cooling Centers

[bodom0015]

Problem

We would like to add a layer that will display Point data showing all the different types of Cooling Centers in the city

For reference: https://data.cityofchicago.org/Health-Human-Services/Cooling-Centers-Map/cj7n-sh49

Fixes #146

Approach

• feat: scraped this public API for JSON data, converted to GeoJSON, and added to public resources
• feat: added a new layer (overlay) to display this Point data - uses existing colors from the link above
• feat: added a Legend for new Cooling Centers overlay - uses existing colors from the link above

TODOs

• allow user to select multiple data overlays at once done - we may need to adjust or allow user to choose the order that overlay layers are rendered
• adjust colors to avoid overlap with variable layer(s) done - now uses various shades of blue
• display detailed info when point is clicked: address, phone number, hours of operation, etc done

How to Test

1. Navigate to https://deploy-preview-159--chicago-env-explorer.netlify.app/map
2. Scroll down to the Data Overlays dropdown and expand it
   • You should see the new Cooling Centers overlay is listed here
3. Select the Cooling Centers overlay
   • You should see color-coded point data appear on the map
   • You should see a Legend appear below the dropdown showing the meaning of each colored point
   • You should see that this overlay is now selected in addition to the Community Areas overlay
4. Hover over a Cooling Center map point with the mouse cursor
   • You should see a tooltip appear that contains site_type, site_name, address, phone number (if applicable), and hours of operation (if applicable)
5. Compare with https://data.cityofchicago.org/Health-Human-Services/Cooling-Centers-Map/cj7n-sh49

[netlify[bot]]

✅ Deploy Preview for chicago-env-explorer ready!

Name	Link
🔨 Latest commit	c9473aed6a7b505100badb1b0ea5b6c680c1d3f9
🔍 Latest deploy log	https://app.netlify.com/sites/chicago-env-explorer/deploys/66579bfbd312050008f22044
😎 Deploy Preview	https://deploy-preview-159--chicago-env-explorer.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[bodom0015]

First-pass at this one.. I used the same colors as the original tool, but the colors overlap with Heat Index pretty heavily :/

Might need to adjust the colors for these to reflect the "cool" that they provide, and to avoid the overlap with related variables :+1:

[mradamcox]

Great! Looks like a solid start. A couple of things to address:

• When an overlay is deactivated, the width of the dropdown gets to narrow
• Suggestions to improve the interactivity:
  1. Add the cursor "pointer" style on hover of these points
  2. Add a black (or maybe white??) outline on the dots to make them a bit more distinctive
  3. Perhaps a non-gradient set of colors, and brighter?
  4. Keep the tooltip, but add a clickable popup that matches the style of the existing popup (I think popups are a bit easier to manage than tooltips)

[bodom0015]

Good catch, thank you for the feedback! I have added some logic that should select "None" when all other overlays are deselected

I will look into the interactivity improvements as well :+1:

[bodom0015]

@mradamcox I believe I have mostly addressed your feedback I'm still trying to figure out an easy way to adjust the styling when the mouse hovers over a particular point

• Show black border around each Cooling Center point
• Show a styled popup when Cooling Center point is clicked

Let me know if you notice anything else that needs to be adjusted :smile:

I have not adjusted the colors, but I can change them if that is still desirable and if we know what colors we might want instead :+1:

[bodom0015]

@mradamcox I tried a few things from that thread, but not sure if I'm putting them in the right place :thinking: I've also tried some tips from https://github.com/visgl/react-map-gl/issues/579 and a few other existing GitHub issues

I've tried setting one of cursor and getCursor on the DeckGLOverlay, the MapboxGLMap, and the GeoJsonLayer itself.. unfortunately, none of these seemed to have any effect on the behavior :/

Context: We appear to be using a mix of mapbox-gl, react-map-gl (plus geocoder), and deck-gl (tutorial with similar architecture here)

This example seems to closely match our patterns (this is what I followed to add the Tooltip hover), but their custom cursor example does not appear to closely match the components that we're using

Approach: Using the following approach from the GitHub issue I mentioned above gets us really close, but the pointer changes back to grab when the mouse is not moving. I believe that this is the "flickering" behavior mentioned in that issue.

We can set up a simple handler (initially this was 2 calls for on enter/leave, but I can't find where to wire both of these in)

  const onMouseEnter = useCallback((info, event) => {
    mapRef.current.getCanvas().style.cursor = 'pointer';
  });

And in the GeoJsonLayer itself, we can set the onHover handler (requires pickable=true):

    /* Point data */
    new GeoJsonLayer({
      id: 'cooling-centers',
      data: `${process.env.PUBLIC_URL}/geojson/cooling-centers.geojson`,
      onClick: handleCcPointClick,
      onHover: onMouseEnter,
      pickable: true,

      extruded: true,
      filled: true,
      getElevation: 30,

Initially I had thought this was the cursor getting confused about hovering over the layer vs the tooltip, but removing the tooltip did not get rid of the flickering cursor issue.

[mradamcox]

@Makosak I'm going to merge this in for wider inspection. We can update the colors easily enough once more people get a chance to look at it.