implement choropleth map / marker clustering (by city)

[emillipede]

AS A/AN:
user

WHEN I:
view the full extent of the LA county map

I WANT TO:
see intelligible shapes / features - polygons of cities rather than individual unintelligible tree markers

Leaflet Interactive Choropleth Map tutorial

in order to accommodate more tree markers (which cover other parts of LA county - based on Matt Stiles' data repo #114) and display the map in a functional way (not an extremely long load time, users can hover and click on visible features), I'd like to use a choropleth when the map is zoomed out (similar to the screenshot of the NYC tree map below).

on hover, the polygons will display the name of the city and the tree count (according to the data in the json) - for example "Pasadena - 71,000 trees"

on click of a polygon, the map will zoom in on the selected polygon area. (at the new zoom level, the polygon will disappear from view to reveal individual tree markers)

for the boundaries, we need to follow the structure of Matt Stiles' data (grouped by city), so I've uploaded a geojson file from the LA County portal with city boundaries and population counts.

color scheme:
I'd like to use a sequential color scheme for the choropleth map. I'd like to assign values (color saturation) based on public trees / city area

cityboundaries.geojson contains a field that documents each city's (and unincorporated la county) area and human population. #308 documents the need to add density and tree count fields to this json, in order to color each city by tree density.

once the density value's added to the json file, we can assign values to each city on a spectrum from most to least tree dense (number of categories + color weighting tbd).

I created a mapbox access token (pk.eyJ1IjoiZW1pbHlsaWtlc3RyZWVzIiwiYSI6ImNrYmgzbXF6dzAxa2cydG52cngwZ3A0eDEifQ.XMkB6CMXPNucpAp1qTstlg)

see NYC tree map

note:
I'd prefer to use LA times' current county neighborhoods boundaries but I think that'll right now present some complications, since Matt Stiles' data are collected by city not neighborhood

[emillipede]

some steps in a possible roadmap:

• reset initial map extent to LA County
• add polygons from geojson
• add color to polygons (to reflect density values add density field to cityboundaries.geojson #308)
• add hover for polygons (for now: city name + tree count eg "Pasadena - 71,000 public trees") hover style can match current hover for circlemarkers
• add action on click (if a user clicks a polygon): map view moves to the center of the clicked polygon, and the map zooms in enough to render colormarkers (vs polygons)
• specify when colormarkers appear, when polygons are hidden (eg after which zoom levels? polygons ought to be visible when the map is zoomed out, and colormarkers ought to be visible when the map is zoomed in)

@isabelle-wagenvoord please let me know what you think and feel free to make changes :)

[emillipede]

@isabelle-wagenvoord notes

• Reset initial zoom and center to view all of LA county (reset initial zoom level and center map to view all of LA county #318)
• Add geojson data (see add density field to cityboundaries.geojson #308) (implement choropleth map / marker clustering (by city) #301)
  • Add polygons
    • Color: reflects a higher tree density in that area
    • On hover: Display name of area and the tree count
      • eg "Pasadena - 71,000 trees"
    • On click:
      • map zooms in on the polygon area so it takes up the entire view
      • at this zoom level, polygon disappears from view to reveal individual tree markers
  • Add tree markers
    • hidden from view until a specific zoom level
    • should we worry about heritage trees for other cities right now? don't need to worry about it right now, most cities don't have heritage trees. LA city has some landmark trees, I will investigate. that said, the fields for each city will be consistent - Emily

---

• Redesign sidebar

  • Should we consider using a frontend framework? It could be tedious to implement the choropleth map and data using vanilla JS at this point:

    • the sidebar component maintains several views (displaying different attributes depending on the dataset):
      • tree view
      • vacant site,
        -heritage tree,
        -neighborhood view
    • right now, this is mostly done by creating extra css classes and removing/adding them to each individual DOM element
      • this leads to a lot of duplicate HTML and JS code
    • leaflet should integrate nicely with any framework
    • a frontend framework will make the code more concise and much easier to modify. no longer need to worry about hiding/revealing individual DOM elements or writing duplicate code
      • Two popular frameworks: Angular or React? I worry it may add a lot of work and some more complexity, but I'm open to the idea. Curious to see how it scopes out - Emily

  • Views:
    - Neighborhood = show statistics about trees, new view, values TBD
    - Tree
    - Regular tree
    - Heritage tree
    - Vacant site

• Problem: the attributes for each tree are not consistent across all datasets. Suggestions:
  • For now have sidebar dynamically display relevant attributes if they exist for that data point
    • some counties have almost nothing recorded about their tree except for location (like Inglewood)
  • Modify the data we will use so attribute names are consistent @allentran started to add parsers for the data from Matt Stiles repository #117 - Emily
    • In this case, decide which attributes we will focus on
    • NYC tree map displays the following data:
      • For trees:
        • Tree species name
        • Latin name
        • Tree ID
        • Trunk diameter
        • Closest address
        • Tree care activities
        • Ecological benefits (calculated from formulas from the US Forest Service); provides measurements and money value for each see #92 for some thoughts about how we can process ecosystem services values - Emily
          • storm water intercepted/year
          • energy conserved/year
          • air pollutants removed/year
          • carbon dioxide reduced/year
          • total value of annual benefits
      • For counties & neighborhoods:
        • number of trees
        • number of activities reported
        • number of trees favorited
        • number of tree species
        • Ecological benefits
          • same for trees, but aggregates total for each attribute
• Since this is a large transition that will take a lot of iterations(?), probably makes sense to temporarily implement a basic development/production mode to hide choropleth-related changes to the code for awhile
  • production environment = show regular santa monica public tree map
  • development environment = show choropleth view that is under development

[emillipede]

• add city boundaries to map
• add hover action
• add zoom / click action
• color polygons (density data)
• populate sidebar
• add circle markers (pending parsing the pipeline repository)