From b0275a06b9749da44eb13ec877584bd8e0ffa7a4 Mon Sep 17 00:00:00 2001 From: Adam Kendis Date: Thu, 4 Mar 2021 16:17:26 -0800 Subject: [PATCH] RequestsLayer rendering open requests --- client/components/Map/Map.jsx | 31 ++++++++---- client/components/Map/index.js | 13 +++-- client/components/Map/layers/RequestsLayer.js | 50 +++++++++---------- 3 files changed, 50 insertions(+), 44 deletions(-) diff --git a/client/components/Map/Map.jsx b/client/components/Map/Map.jsx index b36d34a27..3d81364aa 100644 --- a/client/components/Map/Map.jsx +++ b/client/components/Map/Map.jsx @@ -1,7 +1,7 @@ /* eslint-disable */ import React from 'react'; -// import PropTypes from 'proptypes'; +import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { withStyles } from '@material-ui/core/styles'; import mapboxgl from 'mapbox-gl'; @@ -36,7 +36,7 @@ import MapSearch from './controls/MapSearch'; // import MapRegion from './controls/MapRegion'; // import MapMeta from './controls/MapMeta'; -// import RequestDetail from './RequestDetail'; +import RequestDetail from './RequestDetail'; const styles = theme => ({ root: { @@ -52,7 +52,6 @@ const styles = theme => ({ }, }) -// TODO: major refactor, hooks class Map extends React.Component { constructor(props) { super(props); @@ -124,6 +123,13 @@ class Map extends React.Component { } } + // requestsLayer requires requestTypes for circle-color + if (this.props.requestTypes != prevProps.requestTypes) { + this.requestsLayer.init({ + map: this.map, + }); + } + if ( this.state.filterGeo !== prevState.filterGeo || this.state.selectedTypes !== prevState.selectedTypes @@ -140,7 +146,7 @@ class Map extends React.Component { this.setState({ locationInfo: { nc: { - name: ncNameFromId(geo.properties.nc_id), + name: geo.properties.council_name, // url removed from /geojson payload // need to map from /councils response // url: geo.properties.waddress || geo.properties.dwebsite, @@ -163,10 +169,6 @@ class Map extends React.Component { } initLayers = addListeners => { - this.requestsLayer.init({ - map: this.map, - }); - this.addressLayer.init({ map: this.map, addListeners, @@ -421,6 +423,7 @@ class Map extends React.Component { pinsInfo, getPinInfo, lastUpdated, + requestTypes, } = this.props; const { @@ -448,6 +451,7 @@ class Map extends React.Component { activeLayer={activeRequestsLayer} selectedTypes={selectedTypes} colorScheme={colorScheme} + requestTypes={requestTypes} /> this.addressLayer = el} @@ -464,9 +468,9 @@ class Map extends React.Component { visible={geoFilterType === GEO_FILTER_TYPES.cc} boundaryStyle={mapStyle === 'dark' ? 'light' : 'dark'} /> - {/*
this.requestDetail = el}> +
this.requestDetail = el}> -
*/} +
{ this.state.mapReady && ( <> {/* ({ ncBoundaries: state.metadata.ncGeojson, + requestTypes: state.metadata.requestTypes, }); export default connect(mapStateToProps, null)(withStyles(styles)(Map)); diff --git a/client/components/Map/index.js b/client/components/Map/index.js index 98154382f..595fdfc88 100644 --- a/client/components/Map/index.js +++ b/client/components/Map/index.js @@ -41,9 +41,6 @@ class MapContainer extends React.Component { if (prevProps.activeMode !== this.props.activeMode || prevProps.pins !== this.props.pins) this.setData(); - - if (prevProps.requestTypes !== this.props.requestTypes) - this.setState({ selectedTypes: this.getSelectedTypes() }); } getOpenRequests = async () => { @@ -91,11 +88,13 @@ class MapContainer extends React.Component { })) }); + // TODO: fix this getSelectedTypes = () => { const { requestTypes } = this.props; - return Object.keys(requestTypes).filter(type => { - return type !== 'All' && requestTypes[type] - }); + // return Object.keys(requestTypes).filter(type => { + // return type !== 'All' && requestTypes[type] + // }); + return requestTypes; }; render() { @@ -123,7 +122,7 @@ const mapStateToProps = state => ({ position: state.ui.map, lastUpdated: state.metadata.lastPulledLocal, activeMode: state.ui.map.activeMode, - requestTypes: state.mapFilters.requestTypes, + requestTypes: state.filters.requestTypes, }); const mapDispatchToProps = dispatch => ({ diff --git a/client/components/Map/layers/RequestsLayer.js b/client/components/Map/layers/RequestsLayer.js index b68743b2e..88c8217d9 100644 --- a/client/components/Map/layers/RequestsLayer.js +++ b/client/components/Map/layers/RequestsLayer.js @@ -9,17 +9,13 @@ import { getColors } from '../mapColors'; // so you don't cover up important labels const BEFORE_ID = 'poi-label'; -function circleColors(colorScheme) { - const colors = getColors(colorScheme); - - const colorsArray = Object.keys(REQUEST_TYPES).reduce((p, c) => { - return [...p, c, colors[c]]; - }, []); - +function circleColors(requestTypes) { + const colors = []; + requestTypes.forEach(type => colors.push(type.typeId, type.color)) return [ 'match', ['get', 'type'], - ...colorsArray, + ...colors, '#FFFFFF', ]; } @@ -46,6 +42,7 @@ class RequestsLayer extends React.Component { selectedTypes, requests, colorScheme, + requestTypes } = this.props; if (activeLayer !== prev.activeLayer) @@ -65,7 +62,7 @@ class RequestsLayer extends React.Component { const { requests } = this.props; this.map.addSource('requests', { type: 'geojson', - data: requests + data: requests, }); }; @@ -74,6 +71,7 @@ class RequestsLayer extends React.Component { activeLayer, selectedTypes, colorScheme, + requestTypes, } = this.props; this.map.addLayer({ @@ -91,36 +89,36 @@ class RequestsLayer extends React.Component { [15, 10] ], }, - 'circle-color': circleColors(colorScheme), + 'circle-color': circleColors(requestTypes), 'circle-opacity': 0.8, }, - filter: typeFilter(selectedTypes), + // filter: typeFilter(selectedTypes), }, BEFORE_ID); - this.map.addLayer({ - id: 'request-heatmap', - type: 'heatmap', - source: 'requests', - layout: { - visibility: activeLayer === 'heatmap' ? 'visible' : 'none', - }, - paint: { - 'heatmap-radius': 5, - }, - filter: typeFilter(selectedTypes), - }, BEFORE_ID); + // this.map.addLayer({ + // id: 'request-heatmap', + // type: 'heatmap', + // source: 'requests', + // layout: { + // visibility: activeLayer === 'heatmap' ? 'visible' : 'none', + // }, + // paint: { + // 'heatmap-radius': 5, + // }, + // filter: typeFilter(selectedTypes), + // }, BEFORE_ID); }; setActiveLayer = activeLayer => { switch(activeLayer) { case 'points': this.map.setLayoutProperty('request-circles', 'visibility', 'visible'); - this.map.setLayoutProperty('request-heatmap', 'visibility', 'none'); + // this.map.setLayoutProperty('request-heatmap', 'visibility', 'none'); break; case 'heatmap': this.map.setLayoutProperty('request-circles', 'visibility', 'none'); - this.map.setLayoutProperty('request-heatmap', 'visibility', 'visible'); + // this.map.setLayoutProperty('request-heatmap', 'visibility', 'visible'); break; default: @@ -154,7 +152,7 @@ export default RequestsLayer; RequestsLayer.propTypes = { activeLayer: PropTypes.oneOf(['points', 'heatmap']), - selectedTypes: PropTypes.arrayOf(PropTypes.string), + selectedTypes: PropTypes.arrayOf(PropTypes.number), requests: PropTypes.shape({}), colorScheme: PropTypes.string, };