Map Component

[spinozist]

Get started with...

• [x] Leaflet map container from react-leaflet CSS in homeView/style.css

  .leaflet-container {
  height: 100%;
  width: 100%;
  margin: auto;
  }

• [x] TileLayer

  {
  "name" : "ArcGIS Satellite",
  "attribution" : "",
  "url" : "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
  }

• example Eviction Tracker*

Get Boundary GeoJSONs using utils.getData(url) within component and set into boundaryGeo state variable like so...

const { boundaryGeos, setBoundaryGeos } = useState();

const boundariesConfigArray = [
{
   name: 'cities',
   visible: true,
   url: 'https://arcgis.atlantaregional.com/arcgis/rest/services/OpenData/FeatureServer/58/query?where=County10%20%3D%20%27YES%27&outFields=OBJECTID,Name,County10,Sq_Miles&outSR=4326&f=geojson'
},
{
   name: 'counties',
   visible: true,
   url: 'https://arcgis.atlantaregional.com/arcgis/rest/services/OpenData/FeatureServer/68/query?where=Reg_Comm%20%3D%20%27ATLANTA%20REGIONAL%20COMMISSION%27&outFields=*&outSR=4326&f=geojson'
}
];

const getBoundaries = boundariesConfigArray => {
  const boundariesObj = {};

  boundariesConfigArray.forEach(boundaryConfig => 
   utils.getData(boundaryConfig.url).then(res =>
      boundariesObj[boundaryConfig.name] = res.data
  );

  setBoundaryGeos(boundaryObj);

}

example DataNexus getGeoJSONs()

• [x] run as effect when component did mount

• [x] In JSX map over boundaryGeos and render GeoJSON layers

  
  boundaryGeos ?
  
  Object.values(boundaryGeos).map(boundaryGeoJSON =>
  <GeoJSON data={boundaryGeoJSON} />

: null

Build out with imported components...
- [x] GeoJSON layers (census tracts data, county boundaries, subareas)
- [x] Legend displaying color bins and values for selected indicator when data layer is visible
- [x] GeoJSON Layer selector
- [x] TileLayer Selector

## ADD DATA
- [x] Create styling function to set color for features based on selected indicator
- [x] Use function in style property of GeoJSON

[spinozist]

Was able to setBoundaryGeos by using Promise.all()

[JohnSasser]

Should be ready to be closed.