Display proposed features

MAPC · Jun 9, 2020 · 641ed3f · 641ed3f
1 parent 1a64e81
commit 641ed3f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -43,11 +43,14 @@ <h3 class="layers__subtitle">Map layers</h3>
         <input type="checkbox" id="envjustice" autocomplete="off">
         <label for="envjustice">Environmental justice communities</label><br>
 
-        <input type="checkbox" id="focus-area" autocomplete="off">
-        <label for="focus-area">Focus area and buffer</label><br>
-
         <input type="checkbox" id="openspace" autocomplete="off">
         <label for="openspace">Open spaces</label><br>
+
+        <input type="checkbox" id="proposed" autocomplete="off">
+        <label for="proposed">Proposed features</label><br>
+
+        <input type="checkbox" id="focus-area" autocomplete="off">
+        <label for="focus-area">Focus area and buffer</label><br>
 
         <h3 class="layers__subtitle">Basemaps</h3>
         <fieldset class="layers__set">
@@ -99,7 +102,7 @@ <h3 class="layers__subtitle">Basemaps</h3>
         <text x="30" y="94">Projected</text>
       </svg>
 
-      <svg width="200" height="60" class="legend legend__bikes">
+      <svg width="200" height="60" class="legend legend__proposed">
         <text x="0" y="16" class="legend__title">Bike lanes</text>
         <line x1="5" y1="30" x2="20" y2="30" stroke="#92C5DE" stroke-width="5"/>
         <text x="30" y="34">Unprotected bike lanes</text>

diff --git a/map.js b/map.js
@@ -144,10 +144,11 @@ map.on('load', () => {
     } else {
       const clickedData = map.queryRenderedFeatures(
         [e.point.x, e.point.y],
-        { layers: ['mbta-stops', 'massbuilds', 'environmental-justice', 'taz', 'avg-trips', 'transit-isochrone', 'bike-isochrone'] },
+        { layers: ['mbta-stops', 'west-station', 'massbuilds', 'environmental-justice', 'proposed-features', 'taz', 'avg-trips', 'transit-isochrone', 'bike-isochrone'] },
       );
 
-      if (clickedData[0] && (clickedData[0].layer.id === 'mbta-stops')) {
+      if (clickedData[0] && ((clickedData[0].layer.id === 'mbta-stops') || (clickedData[0].layer.id === 'west-station'))) {
+        console.log(clickedData[0])
         let lineData = '';
         if (clickedData[0].properties.LINE) {
           lineData = `<p>${clickedData[0].properties.LINE}</p>`
@@ -173,6 +174,16 @@ map.on('load', () => {
           `)
           .setMaxWidth('300px')
           .addTo(map);
+      } else if (clickedData[0] && clickedData[0].layer.id === 'proposed-features') {
+        const proposedData = clickedData[0].properties.usr__nt ? `<p>${clickedData[0].properties.usr__nt}</p>` : '';
+        new mapboxgl.Popup()
+        .setLngLat(e.lngLat)
+        .setHTML(`
+          <p>${clickedData[0].properties.usr__tt}</p>
+          ${proposedData}
+        `)
+        .setMaxWidth('300px')
+        .addTo(map);
       } else if (clickedData[0] && clickedData[0].layer.id === 'environmental-justice') {
         let criteriaList = '';
         if (clickedData[0].properties.ENGLISH) {
@@ -261,15 +272,14 @@ document.querySelector('.layers').addEventListener('click', (e) => {
       break;
     case 'focus-area':
       toggleFeatureLayer('focus-area');
-      toggleFeatureLayer('focus-area-buffer');
       break;
 
     case 'mbta-lines':
       toggleFeatureLayer('mbta-routes');
       break;
 
     case 'mbta-stops':
-      toggleMbtaStops();
+      toggleFeatureLayer('mbta-stops');
       break;
 
     case 'massbuilds':
@@ -294,6 +304,10 @@ document.querySelector('.layers').addEventListener('click', (e) => {
       toggleFeatureLayer('openspace')
       break;
 
+    case 'proposed':
+      toggleFeatureLayer('proposed-features')
+      break;
+
     case 'envjustice':
       toggleFeatureLayer('environmental-justice');
       break;
@@ -489,24 +503,6 @@ document.querySelector('.layers').addEventListener('click', (e) => {
 });
 
 saveGeojson();
-function toggleMbtaStops() {
-  if (document.querySelector("#mbta-stops").checked) {
-    map.setPaintProperty('mbta-stops', 'icon-opacity', 1)
-  } else {
-    map.setPaintProperty('mbta-stops', 'icon-opacity', [
-      "case",
-      [
-        "match",
-        ["get", "STOP"],
-        ["West Station (Proposed)"],
-        false,
-        true
-      ],
-      0,
-      1
-    ])
-  }
-}
 
 function toggleFeatureLayer(layerId) {
   const visibility = map.getLayoutProperty(layerId, 'visibility');
@@ -521,26 +517,15 @@ function resetMap() {
   map.setLayoutProperty('massbuilds', 'visibility', 'none');
   map.setLayoutProperty('mbta-routes', 'visibility', 'none');
   map.setLayoutProperty('focus-area', 'visibility', 'none');
-  map.setLayoutProperty('focus-area-buffer', 'visibility', 'none');
   map.setLayoutProperty('openspace', 'visibility', 'none');
+  map.setLayoutProperty('proposed-features', 'visibility', 'none');
   map.setLayoutProperty('taz', 'visibility', 'none');
   map.setLayoutProperty('avg-trips', 'visibility', 'none');
   map.setLayoutProperty('transit-isochrone', 'visibility', 'none');
   map.setLayoutProperty('bike-isochrone', 'visibility', 'none');
   map.setLayoutProperty('environmental-justice', 'visibility', 'none');
   map.setLayoutProperty('bike-lanes', 'visibility', 'none');
-  map.setPaintProperty('mbta-stops', 'icon-opacity', [
-    "case",
-    [
-      "match",
-      ["get", "STOP"],
-      ["West Station (Proposed)"],
-      false,
-      true
-    ],
-    0,
-    1
-  ])
+  map.setLayoutProperty('mbta-stops', 'visibility', 'none');
 }
 
 function toggleChoroplethLayer(selectedLayer) {