Skip to content

Commit

Permalink
List all possible choropleths
Browse files Browse the repository at this point in the history
  • Loading branch information
Annabelle Thomas Taylor committed May 26, 2020
1 parent e198f82 commit 500bbfb
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 4 deletions.
38 changes: 36 additions & 2 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,43 @@ <h3 class="layers__subtitle">Demographic choropleths</h3>
<input type="radio" id="basic" name="layer__radio-options" autocomplete="off">
<label for="basic">Basic employment (%)</label><br>

<h3 class="layers__subtitle">Focus area travel patterns</h3>
<h3 class="layers__subtitle">2040 projection choropleths</h3>
<input type="radio" id="lrtp_hh" name="layer__radio-options" autocomplete="off">
<label for="lrtp_hh">LTRP 2040 household projection</label><br>

<input type="radio" id="lrtp_emp" name="layer__radio-options" autocomplete="off">
<label for="lrtp_emp">LTRP 2040 employment projection</label><br>

<input type="radio" id="feir_hh" name="layer__radio-options" autocomplete="off">
<label for="feir_hh">FEIR 2040 household projection</label><br>

<input type="radio" id="feir_emp" name="layer__radio-options" autocomplete="off">
<label for="feir_emp">FEIR 2040 employment projection</label><br>

<input type="radio" id="fmax_hh" name="layer__radio-options" autocomplete="off">
<label for="fmax_hh">FMAX 2040 household projection</label><br>

<input type="radio" id="fmax_emp" name="layer__radio-options" autocomplete="off">
<label for="fmax_emp">FMAX 2040 employment projection</label><br>

<h3 class="layers__subtitle">Average trips to focus area</h3>
<input type="radio" id="trips_all" name="layer__radio-options" autocomplete="off">
<label for="trips_all">Trips to focus area</label><br>
<label for="trips_all">Total trips</label><br>

<input type="radio" id="trips_transit" name="layer__radio-options" autocomplete="off">
<label for="trips_transit">Transit trips</label><br>

<input type="radio" id="trips_driver" name="layer__radio-options" autocomplete="off">
<label for="trips_driver">Auto trips (driver)</label><br>

<input type="radio" id="trips_pax" name="layer__radio-options" autocomplete="off">
<label for="trips_pax">Auto trips (passenger)</label><br>

<input type="radio" id="trips_bike" name="layer__radio-options" autocomplete="off">
<label for="trips_bike">Bike trips</label><br>

<input type="radio" id="trips_walk" name="layer__radio-options" autocomplete="off">
<label for="trips_walk">Walking trips</label><br>

<input type="reset" value="Reset map settings" id="reset">
</form>
Expand Down
50 changes: 48 additions & 2 deletions map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ map.on('load', () => {
map.setLayoutProperty('mbta-routes', 'visibility', 'none');
map.setLayoutProperty('focus-area', 'visibility', 'none');
map.setLayoutProperty('focus-area-buffer', 'visibility', 'none');
map.setLayoutProperty('2040-blocks', 'visibility', 'none');
map.on('click', function(e) {
const selectedFeature = draw.getSelected();
if (selectedFeature.features.length > 0) {
Expand Down Expand Up @@ -69,7 +70,7 @@ map.on('load', () => {
} else {
const clickedData = map.queryRenderedFeatures(
[e.point.x, e.point.y],
{ layers: ['taz', 'mbta-stops', 'mbta-routes', 'massbuilds'] },
{ layers: ['taz', 'mbta-stops', 'mbta-routes', 'massbuilds', '2040-blocks'] },
);
if (clickedData.some(item => item.properties.layer != null)) {
const mbtaData = clickedData.find(item => item.properties.layer != undefined).properties;
Expand Down Expand Up @@ -120,7 +121,16 @@ map.on('load', () => {
`)
.setMaxWidth('300px')
.addTo(map);
} else {
} else if (clickedData.some(item => item.properties.blockID != null)) {
const projectedData = clickedData.find(item => item.properties.blockID != null).properties;
new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML(`
<p>LRTP 2040 Households: ${d3.format(',')(projectedData.lrtp_HH40)}</p>
`)
.setMaxWidth('300px')
.addTo(map);
}else {
const tazData = clickedData.find(item => item.properties['tabular_Total Population'] != null).properties;
new mapboxgl.Popup()
.setLngLat(e.lngLat)
Expand Down Expand Up @@ -160,6 +170,7 @@ document.querySelector('.layers').addEventListener('click', (e) => {
map.setLayoutProperty('taz', 'visibility', 'none');
map.setLayoutProperty('focus-area', 'visibility', 'none');
map.setLayoutProperty('focus-area-buffer', 'visibility', 'none');
map.setLayoutProperty('2040-blocks', 'visibility', 'none');
break;
case 'focus-area':
toggleLayer('focus-area');
Expand Down Expand Up @@ -364,6 +375,41 @@ document.querySelector('.layers').addEventListener('click', (e) => {
zeroColor
])
break;

case 'lrtp_hh':
choroplethLegend.style.display = "inline";
map.setLayoutProperty('2040-blocks', 'visibility', 'visible');
map.setPaintProperty('2040-blocks', 'fill-color', ["step",
['get', 'lrtp_HH40'],
zeroColor, 1, // 5
colors[0], 6, // 25
colors[1], 26, // 50
colors[2], 51, // 100
colors[3], 101,
colors[4]
]);
break;

case 'lrtp_emp':
choroplethLegend.style.display = "inline";
map.setLayoutProperty('2040-blocks', 'visibility', 'visible');
break;
case 'feir_hh':
choroplethLegend.style.display = "inline";
map.setLayoutProperty('2040-blocks', 'visibility', 'visible');
break;
case 'feir_emp':
choroplethLegend.style.display = "inline";
map.setLayoutProperty('2040-blocks', 'visibility', 'visible');
break;
case 'fmax_hh':
choroplethLegend.style.display = "inline";
map.setLayoutProperty('2040-blocks', 'visibility', 'visible');
break;
case 'fmax_emp':
choroplethLegend.style.display = "inline";
map.setLayoutProperty('2040-blocks', 'visibility', 'visible');
break;
}
});

Expand Down
1 change: 1 addition & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ p {
.sidebar {
background: rgba(255, 255, 255, .5);
width: 300px;
overflow-y: scroll;
}

.layers {
Expand Down

0 comments on commit 500bbfb

Please sign in to comment.