diff --git a/content/data-features/rats-in-your-neighborhood/neighborhood-rats.js b/content/data-features/rats-in-your-neighborhood/neighborhood-rats.js
index 4fabd298b31..f91d5458228 100644
--- a/content/data-features/rats-in-your-neighborhood/neighborhood-rats.js
+++ b/content/data-features/rats-in-your-neighborhood/neighborhood-rats.js
@@ -34,29 +34,46 @@ REVISIONS, SCOPE:
 //----------------------------------------
 // INITIALIZE NYC-MAP LIBRARY 
 //---------------------------------------- 
+
 function initializeNYCLIB() {
+    
+    console.log("initialize");
+    
     nycMap = new nyc.ol.FrameworkMap({
         mapTarget: '#nycMap',
         searchTarget: '#map-search1',
-        geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=74DF5DB1D7320A9A2&app_id=nyc-lib-example'
+        geoclientUrl: 'https://api.nyc.gov/geoclient/v2/search?key=ab310d5ecfc14284ada7e32c980221c3'
     });
-
+    
+    console.log("nycMap [initializeNYCLIB]", nycMap);
+    
     document.addEventListener("DOMContentLoaded", function() {
+
         var searchButton = document.querySelector('.btn.btn-srch');
     
         // Check if the button exists to avoid errors
         if (searchButton) {
+
             searchButton.onclick = function() {
-                setTimeout(geocode,2500)
+
+                $("#map-search1").parent().trigger("submit")
+                // $("#map-search1").trigger("submit")
+                setTimeout(geocode, 2500)
+
             };
+
         }
 
         // add event listener to form
         document.querySelector('#map-search1').addEventListener('keypress', function (e) {
+
             if (e.key === 'Enter') {
+
                 console.log('***Form submitted')
-                setTimeout(geocode,2500)
+                setTimeout(geocode, 2500)
+
             }
+
         });
     });
 }
@@ -89,31 +106,31 @@ L.easyButton({
             resetZoom();
         }
     }]
-}).addTo(leafletMap);    
+}).addTo(leafletMap);
 
 // add and style RMZs
 fetch(RMZgeojson)
-  .then(response => response.json())
-  .then(data => {
-    L.geoJSON(data, {
-      style: {
-        color: "darkgray",  // Gray border
-        weight: 1,         // Thin outline
-        fillColor: "lightgray",
-        fillOpacity: 0.5   // Semi-opaque fill
-      },
-      onEachFeature: function (feature, layer) {
-        if (feature.properties && feature.properties.Label) {
-          layer.bindPopup(
-            '<strong>Rat Mitigation Zone:</strong><br>' + 
-            feature.properties.Label + 
-            '<hr><a href="../rat-mitigation-zones/" style="font-size: 12px">Get data on RMZs</a>.</p>'
-        );
-        }
-      }
-    }).addTo(leafletMap);
-  })
-  .catch(error => console.error("Error loading GeoJSON:", error));
+    .then(response => response.json())
+    .then(data => {
+        L.geoJSON(data, {
+            style: {
+                color: "darkgray",  // Gray border
+                weight: 1,         // Thin outline
+                fillColor: "lightgray",
+                fillOpacity: 0.5   // Semi-opaque fill
+            },
+            onEachFeature: function (feature, layer) {
+                if (feature.properties && feature.properties.Label) {
+                    layer.bindPopup(
+                        '<strong>Rat Mitigation Zone:</strong><br>' + 
+                        feature.properties.Label + 
+                        '<hr><a href="../rat-mitigation-zones/" style="font-size: 12px">Get data on RMZs</a>.</p>'
+                    );
+                }
+            }
+        }).addTo(leafletMap);
+    })
+    .catch(error => console.error("Error loading GeoJSON:", error));
 
 
 
@@ -127,31 +144,33 @@ function resetZoom() {
 // GEOCODE THROUGH NYC-MAP 
 //---------------------------------------- 
 function geocode() {
+    
+    console.log("nycMap [geocode]", nycMap);
     console.log('***Geocoding')
     document.getElementById('status').innerHTML = 'Getting data...'
     if (nycMap.location.type === 'geocoded') {
         console.log('- location found. Details:') // get data...
         locationDetails = nycMap.location
         console.log(locationDetails)
-
+        
         /*
-            Data to use:
-                nycMap.location.name                    sentence name
-                nycMap.location.data.latitude           to put into Leaflet
-                nycMap.location.data.longitude          to put into Leaflet
-                nycMap.location.data.bbl                BBL for passing into open data api?
-                nycMap.location.data.communityDistrict  Community District
+        Data to use:
+        nycMap.location.name                    sentence name
+        nycMap.location.data.latitude           to put into Leaflet
+        nycMap.location.data.longitude          to put into Leaflet
+        nycMap.location.data.bbl                BBL for passing into open data api?
+        nycMap.location.data.communityDistrict  Community District
         */
-
+        
         thisCD  = nycMap.location.data.communityDistrict
         thisBBL = nycMap.location.data.bbl
-
+        
         // place marker on leaflet map
         addMarker(nycMap.location.data.latitude,nycMap.location.data.longitude,nycMap.location.name)
-
+        
         // get property data
         getPropertyData(thisBBL)
-
+        
     } else {
         console.log('***Location not found :( ')
     }
@@ -163,9 +182,9 @@ function geocode() {
 function addMarker(lat,long,locationName) {
     // Remove prior markers
     mapMarkers.forEach(marker => map.removeLayer(marker))
-
+    
     console.log('- adding marker...')
-
+    
     // set icon
     let this_icon = L.colorIcon({
         iconSize : [30, 30],
@@ -173,18 +192,18 @@ function addMarker(lat,long,locationName) {
         iconUrl: "images/map-marker.svg",
         color: 'darkgray'
     });
-
+    
     // add marker
     var marker = L.marker([lat,long],{icon: this_icon}).addTo(leafletMap);
     marker.bindPopup(locationName)
     .openPopup();
     mapMarkers.push(marker)
-
+    
     leafletMap.setView([lat, long], 13);
-
+    
     // check if this point is in RMZs
     checkPointInRMZ(lat,long)
-
+    
 }
 
 
@@ -194,12 +213,12 @@ function addMarker(lat,long,locationName) {
 async function checkPointInRMZ(lat,long) {
     console.log('***Checking if location is in RMZ')
     await getGeoJSON(RMZgeojson)
-
+    
     inputLatLong = [lat,long]
-
+    
     for (let i = 0; i < geojsonData.features.length; i++) {
         // console.log(i)
-
+        
         // Loop through all the nested multipolygons
         if (geojsonData.features[i].geometry.type === "MultiPolygon") {
             for (let j = 0; j < geojsonData.features[i].geometry.coordinates.length; j++) {
@@ -239,13 +258,13 @@ async function checkPointInRMZ(lat,long) {
             }
         }
     }
-
+    
     if (isRMZ === false) {
         console.log('- not in an RMZ.')
     }
-
+    
     showParentCD(lat,long)
-
+    
 }
 
 //----------------------------------------
@@ -254,16 +273,16 @@ async function checkPointInRMZ(lat,long) {
 async function showParentCD(lat,long) {
     // get CD geojson
     await getGeoJSON(CDgeojson)
-
+    
     // filter for geocoded CD
     const thisCDArea = {
         type: "FeatureCollection",
         features: geojsonData.features.filter(feature => feature.properties.boro_cd === thisCD),
-      };
+    };
     
     // Add to map
     const CDlayer = L.geoJSON(thisCDArea).addTo(leafletMap)
-
+    
     // get data for CD
     getCDIndicatorData(thisCD)
 }
@@ -284,46 +303,46 @@ function showRMZCard(x) {
 var CDIndicatorData;
 function getCDIndicatorData(x) {
     console.log('***Getting CD Indicator data for ', x)
-
+    
     const URL = 'https://raw.githubusercontent.com/nychealth/EHDP-data/refs/heads/production/indicators/data/2434.json';
-        // passes geoID into function
-
-        return new Promise((resolve, reject) => {
-            fetch(URL)
-                .then(response => {
-                    if (!response.ok) {
-                        throw new Error('Network response was not ok');
-                    }
-                    return response.json(); // Parse data
-                })
-                .then(data => {
-                    // Get the keys and length of data
-                    const keys = Object.keys(data);
-                    const dataLength = data[keys[0]].length;
-
-                    // Restructure the data
-                    const restructuredData = [];
-                    for (let i = 0; i < dataLength; i++) {
-                        const record = {};
-                        keys.forEach(key => {
-                            record[key] = data[key][i];
-                        });
-                        restructuredData.push(record);
-                    }
+    // passes geoID into function
     
-                    // FILTER FOR COMMUINTY DISTRICTS, and THIS CD
-                    CDIndicatorData = restructuredData.filter(item => item.GeoType === 'CD') 
-                    CDIndicatorData = CDIndicatorData.filter(item => item.GeoID == x)
-
-                    console.log('- CDIndicatorData:',CDIndicatorData);
-                    printCDData(CDIndicatorData);
-                    resolve(); // Resolve promise 
-                })
-                .catch(error => {
-                    console.error('Error fetching the Indicator data:', error);
-                    reject(error); // Reject the promise if there’s an error
+    return new Promise((resolve, reject) => {
+        fetch(URL)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json(); // Parse data
+        })
+        .then(data => {
+            // Get the keys and length of data
+            const keys = Object.keys(data);
+            const dataLength = data[keys[0]].length;
+            
+            // Restructure the data
+            const restructuredData = [];
+            for (let i = 0; i < dataLength; i++) {
+                const record = {};
+                keys.forEach(key => {
+                    record[key] = data[key][i];
                 });
+                restructuredData.push(record);
+            }
+            
+            // FILTER FOR COMMUINTY DISTRICTS, and THIS CD
+            CDIndicatorData = restructuredData.filter(item => item.GeoType === 'CD') 
+            CDIndicatorData = CDIndicatorData.filter(item => item.GeoID == x)
+            
+            console.log('- CDIndicatorData:',CDIndicatorData);
+            printCDData(CDIndicatorData);
+            resolve(); // Resolve promise 
+        })
+        .catch(error => {
+            console.error('Error fetching the Indicator data:', error);
+            reject(error); // Reject the promise if there’s an error
         });
+    });
 }
 
 //----------------------------------------
@@ -332,9 +351,9 @@ function getCDIndicatorData(x) {
 
 var propertyData;
 async function getPropertyData(x) {
-
+    
     var openDataSource = 'https://data.cityofnewyork.us/resource/a2h9-9z38.json?bbl=' + x
-
+    
     return new Promise((resolve, reject) => {
         // Fetch the GeoJSON data
         fetch(openDataSource)
@@ -356,7 +375,7 @@ async function getPropertyData(x) {
             reject(error); // Reject the promise if there’s an error
         });
     });
-
+    
 }
 
 
@@ -371,47 +390,47 @@ async function getPropertyData(x) {
 
 function printCDData(data) {
     console.log('- Printing CD data to page.')
-
+    
     document.getElementById('cdOutput').classList.remove('hide')
-
+    
     document.getElementById('cdID').innerHTML = 'Community District ' + thisCD;
-
+    
     // get Time Periods to match to TimePeriod ID
     fetch('https://raw.githubusercontent.com/nychealth/EHDP-data/refs/heads/production/indicators/metadata/TimePeriods.json')
     .then(response => response.json())
     .then(timePeriods => {
         // Create a lookup map
         const timePeriodMap = new Map(timePeriods.map(tp => [tp.TimePeriodID, tp.TimePeriod]));
-
+        
         // Add TimePeriod to each object in data
         data = data.map(item => ({
             ...item,
             TimePeriod: timePeriodMap.get(item.TimePeriodID) || "Unknown" // Add TimePeriod without removing TimePeriodID
         }));
-
+        
         // Find the max TimePeriodID, and filter for it (this works for this indicator)
         const maxTimePeriodID = Math.max(...data.map(item => item.TimePeriodID));
         const mostRecentData = data.filter(item => item.TimePeriodID === maxTimePeriodID);
-
+        
         // Print year to page
         document.getElementById('yearPrint').innerHTML = mostRecentData
-            .filter(item => item.MeasureID === 1381)
-            .map(item => item.TimePeriod);
-
+        .filter(item => item.MeasureID === 1381)
+        .map(item => item.TimePeriod);
+        
         // Print inspected percent to page
         const inspected = mostRecentData
-            .filter(item => item.MeasureID === 1381)
-            .map(item => item.DisplayValue);
-
-            document.getElementById('cdProp').innerHTML = inspected + '%'
-    
+        .filter(item => item.MeasureID === 1381)
+        .map(item => item.DisplayValue);
+        
+        document.getElementById('cdProp').innerHTML = inspected + '%'
+        
         // Print failed to page
         const failed = mostRecentData
-            .filter(item => item.MeasureID === 1383)
-            .map(item => item.DisplayValue);
-    
-            document.getElementById('cdFail').innerHTML = failed + '%'
-    
+        .filter(item => item.MeasureID === 1383)
+        .map(item => item.DisplayValue);
+        
+        document.getElementById('cdFail').innerHTML = failed + '%'
+        
         // Label rat activity high, low, or moderate, and print to page
         var ratActivity;
         if (failed > 20) {
@@ -421,14 +440,14 @@ function printCDData(data) {
         } else {
             ratActivity = 'moderate'
         }
-    
+        
         document.getElementById('activityValue').innerHTML = ratActivity
         const ratClass = ratActivity + '-activity'
         document.getElementById('activityValue').classList.add(ratClass)
-
+        
     })
     .catch(error => console.error("Error fetching time periods:", error));
-
+    
     /* Metadata
     "MeasureID": 1381,
     "MeasureName": "Rat inspections, Percent of properties inspected",
@@ -447,20 +466,20 @@ function printPropertyData(data) {
     console.log("- printing property data")
     document.getElementById('propertyOutput').classList.remove('hide')
     document.getElementById('noOutput').classList.add('hide')
-
+    
     // convert date
     data.forEach(property => {
         property.approved_date = new Date(property.approved_date);
     });
-
+    
     // filter for last 5 years
     const fiveYearsAgo = new Date();
     fiveYearsAgo.setFullYear(fiveYearsAgo.getFullYear() - 5);
     const recentInspections = propertyData.filter(property => property.approved_date >= fiveYearsAgo);
     console.log(recentInspections);
-
+    
     document.getElementById('numOfInspections').innerHTML = recentInspections.length + ' time' + (recentInspections.length != 1 ? 's' : '')
-
+    
     // Get most recent inspection
     const mostRecentInspection = propertyData.reduce((latest, property) => {
         return property.approved_date > latest.approved_date ? property : latest;
@@ -470,7 +489,7 @@ function printPropertyData(data) {
     const options = { year: 'numeric', month: 'long', day: 'numeric' };
     const mostRecentDate = mostRecentInspection.approved_date.toLocaleDateString('en-US', options)
     document.getElementById('mostRecentInspection').innerHTML = mostRecentDate
-
+    
     // Print result
     const resultClass = (mostRecentInspection.result === 'Passed' ? 'passed-fill' : 'failed-fill')
     document.getElementById('result').classList.add(resultClass)
@@ -513,11 +532,11 @@ function getGeoJSON(x) {
 function swapFirstAndSecond(arrays) {
     // Iterate over each sub-array
     return arrays.map(subArray => {
-      // Swap the first and second elements
-      return [subArray[1], subArray[0]];
+        // Swap the first and second elements
+        return [subArray[1], subArray[0]];
     });
-  }
-  
+}
+
 
 
 
diff --git a/themes/dohmh/layouts/components.html b/themes/dohmh/layouts/components.html
index b720310712d..b2d3c207c55 100644
--- a/themes/dohmh/layouts/components.html
+++ b/themes/dohmh/layouts/components.html
@@ -128,7 +128,7 @@ <h3 class="card-title"><a class="text-black" href="{{ .RelPermalink }}" class="t
     <li><a href="pdf/Appendix1.pdf">Appendix 1 (PDF)</a>: Sampling Methodology and Data Sources for Emissions Indicators.</li>
     <li><a href="pdf/Appendix2.pdf">Appendix 2 (PDF)</a>: Seasonal Average Pollutant Maps.</li>
     <li><a href="pdf/Appendix3.pdf">Appendix 3 (PDF)</a>: Community District Average Pollution Levels.</li>
-    <li><a href="../../data-stories/traffic-and-air-pollution">The Public Health Impacts of PM<sub>2.5</sub> from Traffic Air Pollution data story</a>.</li>
+    <li><a href={{ relURL "data-stories/traffic-and-air-pollution" }}>The Public Health Impacts of PM<sub>2.5</sub> from Traffic Air Pollution data story</a>.</li>
     <li><a href="https://data.cityofnewyork.us/Environment/NYCCAS-Air-Pollution-Rasters/q68s-8qxv">NYC OpenData: NYCCAS Air Pollution Rasters</a>.</li>
     <li><a href="https://www.nyc.gov/site/doh/data/data-sets/air-quality-nyc-community-air-survey.page">New York Community Air Survey: past reports</a></li>
     </ul>
diff --git a/themes/dohmh/layouts/data-explorer/single.html b/themes/dohmh/layouts/data-explorer/single.html
index 497917190ad..36f8f49652c 100644
--- a/themes/dohmh/layouts/data-explorer/single.html
+++ b/themes/dohmh/layouts/data-explorer/single.html
@@ -779,7 +779,7 @@ <h1 class="h2 mt-2">
                             <!-- Data sources -->
                             <div class="col-md-10 col-sm-12">
                                     <div class="visFooterBox">
-                                        <span class="fs-xs font-weight-bold">Source: <a href="../../about/data-sources"><i class="fa-solid fa-circle-question"></i></a></span> <p class="fs-xs indicator-sources"></p>
+                                        <span class="fs-xs font-weight-bold">Source: <a href={{ relURL "about/data-sources" }}><i class="fa-solid fa-circle-question"></i></a></span> <p class="fs-xs indicator-sources"></p>
                                     </div>
                             </div>
                         </div>
@@ -906,7 +906,7 @@ <h5 class="modal-title" id="geoModalLabel"><i  class="fas fa-question-circle mr-
                             <li>Neighborhood Tabulation Areas (NTA)</li>
                         </ul>
                     </p> 
-                    <p>We try to make data available at as fine a geographic resolution as we can. <a href="../../data-stories/geographies/">Read more about different geographies at this data story</a>.</p>
+                    <p>We try to make data available at as fine a geographic resolution as we can. <a href={{ relURL "data-stories/geographies" }}>Read more about different geographies at this data story</a>.</p>
                     <p>It would be convenient if each dataset could be made available at the same geography, but this is not always possible. The neighborhood boundaries available depend on the specifics of the underlying dataset.</p>
 
                 </div>
@@ -997,7 +997,7 @@ <h5 class="modal-title" id="linksModalLabel"><i  class="fas fa-question-circle m
                 <div class="modal-body">
                     <p>On this site, we try to show how environmental factors might be connected to health outcomes. One way we do this is with <strong>Correlates</strong>. We choose potentially-related datasets and display them on a scatterplot so you can see how these two datasets are correlated.</p>
                     <p>The <strong>Disparities view</strong> displays neighborhoods by poverty category to show underlying disparities in the data.</p>
-                    <p><a href="../../data-stories/povasthma">Read more about correlation here</a>.</p>
+                    <p><a href={{ relURL "data-stories/povasthma" }}>Read more about correlation here</a>.</p>
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
diff --git a/themes/dohmh/layouts/data-features/rats-in-your-neighborhood.html b/themes/dohmh/layouts/data-features/rats-in-your-neighborhood.html
index 17996a41f9f..a2772f241e5 100644
--- a/themes/dohmh/layouts/data-features/rats-in-your-neighborhood.html
+++ b/themes/dohmh/layouts/data-features/rats-in-your-neighborhood.html
@@ -63,7 +63,7 @@ <h3 class="h5">Enter your address</h3>
                                     </ul>
                                 </div>
                                 <div class="d-flex justify-content-end border-top link fs-sm pt-1">
-                                    <p class="fs-sm"><a href="../../data-explorer/mice-and-rats/?id=2434#display=map"><i class="fas fa-chart-line mr-1" aria-hidden="true"></i>Get data on rat inspections by neighborhood</a>.</p>
+                                    <p class="fs-sm"><a href={{ relURL "data-explorer/mice-and-rats/?id=2434#display=map" }}><i class="fas fa-chart-line mr-1" aria-hidden="true"></i>Get data on rat inspections by neighborhood</a>.</p>
 
                                 </div>
 
@@ -218,8 +218,8 @@ <h4>See a problem with rats or trash?</h4>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
 <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/babel-polyfill.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/nyc-ol-lib.js"></script>
+<script src="https://maps.nyc.gov/nyc-lib/v1.4.78/js/babel-polyfill.js"></script>
+<script src="https://maps.nyc.gov/nyc-lib/v1.4.78/js/nyc-ol-lib.js"></script>
 
 <!--bring in rmz JS -->
 <script type="text/javascript" src="neighborhood-rats.js"></script>
diff --git a/themes/dohmh/layouts/data-features/restaurant-grades.html b/themes/dohmh/layouts/data-features/restaurant-grades.html
index 90a2be4c5fd..05ff3e73cf3 100644
--- a/themes/dohmh/layouts/data-features/restaurant-grades.html
+++ b/themes/dohmh/layouts/data-features/restaurant-grades.html
@@ -61,7 +61,7 @@ <h2 class="home-label border-bottom">Select a year</h2><br>
 
                           <hr class="my-2">
 
-                          <a href="../../../data-explorer/restaurant-food-safety/" class="button btn btn-md btn-block btn-outline-primary"><i class="fas fa-chart-line mr-1" aria-hidden="true"></i>Full dataset</a>
+                          <a href={{ relURL "data-explorer/restaurant-food-safety" }} class="button btn btn-md btn-block btn-outline-primary"><i class="fas fa-chart-line mr-1" aria-hidden="true"></i>Full dataset</a>
 
                           <a href="https://a816-health.nyc.gov/ABCEatsRestaurants/#!/Search" class="button btn btn-md btn-block btn-outline-primary" target="_blank" rel="noopener noreferrer"><i class="fas fa-external-link mr-1"></i>Restaurant inspection results</a>
 
diff --git a/themes/dohmh/layouts/data-stories/single.html b/themes/dohmh/layouts/data-stories/single.html
index 9117c9c6cd1..4c24548ed9e 100644
--- a/themes/dohmh/layouts/data-stories/single.html
+++ b/themes/dohmh/layouts/data-stories/single.html
@@ -62,7 +62,7 @@ <h1 class="h2 data-stories mb-3"><i class="fas fa-passport" aria-hidden="true" s
                     <ul class="extensible-list text-muted mt-3">
                         <li>
                             <p class="text-muted" >
-                                <span class="fa fa-envelope"></span> Like this story? <a href="../../about/subscribe" class="subscribe-link"> Sign up to find out when we post something new.</a></p> 
+                                <span class="fa fa-envelope"></span> Like this story? <a href={{ relURL "about/subscribe" }} class="subscribe-link"> Sign up to find out when we post something new.</a></p> 
                         </li>
                     </ul>
                 </div>
diff --git a/themes/dohmh/layouts/data-stories/uhi.html b/themes/dohmh/layouts/data-stories/uhi.html
index c6fde8a98bd..54a2f923b57 100644
--- a/themes/dohmh/layouts/data-stories/uhi.html
+++ b/themes/dohmh/layouts/data-stories/uhi.html
@@ -506,7 +506,7 @@ <h1 class="h2 data-stories mb-3"><i class="fas fa-passport" aria-hidden="true" s
             <br><br><br><br>
             <div class="asidebox">
                 <span style="font-weight: bold; color: #5e5e5e;">More about NYC's greening efforts</span>
-                <p>There are numerous efforts to increase tree canopy and green space overall in NYC. The City plants and cares for <a href="https://www.nycgovparks.org/trees/street-tree-planting">street trees</a> along the right-of-way; forbs, shrubs, and trees in parkland; <a href="https://www1.nyc.gov/site/dep/water/rain-gardens.page">rain gardens</a> and <a href="https://www1.nyc.gov/site/dep/water/green-infrastructure.page">other green infrastructure</a> to capture stormwater; and more. Many tree plantings have been concentrated in areas with <a href="https://www.milliontreesnyc.org/html/million_trees/neighborhoods.shtml">higher than average rates of asthma</a> and <a href="../../key-topics/climatehealth/hvi/">heat-vulnerable neighborhoods</a>.</p>
+                <p>There are numerous efforts to increase tree canopy and green space overall in NYC. The City plants and cares for <a href="https://www.nycgovparks.org/trees/street-tree-planting">street trees</a> along the right-of-way; forbs, shrubs, and trees in parkland; <a href="https://www1.nyc.gov/site/dep/water/rain-gardens.page">rain gardens</a> and <a href="https://www1.nyc.gov/site/dep/water/green-infrastructure.page">other green infrastructure</a> to capture stormwater; and more. Many tree plantings have been concentrated in areas with <a href="https://www.milliontreesnyc.org/html/million_trees/neighborhoods.shtml">higher than average rates of asthma</a> and <a href={{ relURL "key-topics/climatehealth/hvi" }}>heat-vulnerable neighborhoods</a>.</p>
                 <p>Trust for Public Land’s <a href="https://www.tpl.org/our-work/new-york-city-playgrounds">New York City Playgrounds program</a> has transformed over 200 playgrounds from using asphalt to using cooler, greener materials. There are also <a href="https://naturalareasnyc.org/map">forests in all five boroughs</a>, and the Department of Parks and Recreation and the Natural Areas Conservancy have developed the <a href="https://naturalareasnyc.org/forests">Forest Management Framework for New York City</a>, a 25-year plan that lays out the process, costs, best practices, and goals for caring for forests in the city.  </p>
                 <p>You can get involved, too:</p>
                 <ul>
diff --git a/themes/dohmh/layouts/partials/head.html b/themes/dohmh/layouts/partials/head.html
index edf87e569e5..3480f623d7e 100644
--- a/themes/dohmh/layouts/partials/head.html
+++ b/themes/dohmh/layouts/partials/head.html
@@ -86,7 +86,7 @@
 
 {{- if .Params.mapLib }}
     <!-- nyc-lib css (for maps in the core framework)-->
-    <link href="https://maps.nyc.gov/nyc-lib/v1.2.79/css/nyc-basic-lib.css" rel="stylesheet">
+    <link href="https://maps.nyc.gov/nyc-lib/v1.4.78/css/nyc-basic-lib.css" rel="stylesheet">
 {{- end }}
 
 
@@ -123,7 +123,7 @@
 {{- end }}
 
 <!-- nyc-lib css -->
-<link href="https://maps.nyc.gov/nyc-lib/v1.2.79/css/nyc-basic-lib.css" rel="stylesheet">
+<link href="https://maps.nyc.gov/nyc-lib/v1.4.78/css/nyc-basic-lib.css" rel="stylesheet">
 
 
 
diff --git a/themes/dohmh/layouts/partials/nr-report-footer-sm.html b/themes/dohmh/layouts/partials/nr-report-footer-sm.html
index db9c43c46a9..a4524635dc3 100644
--- a/themes/dohmh/layouts/partials/nr-report-footer-sm.html
+++ b/themes/dohmh/layouts/partials/nr-report-footer-sm.html
@@ -54,7 +54,7 @@ <h4>More about</h4>
                   </div>
                   <div class="fs-lg">
                     {{- range $content.keytopic -}}
-                     <a href="../../../key-topics/{{ .link }}">{{ .text }}</a>
+                     <a href={{ urls.JoinPath ( relURL "key-topics" ) .link }}>{{ .text }}</a>
                     <hr class="my-2">
                     {{- end -}}
                 </div>
diff --git a/themes/dohmh/layouts/partials/related-footer.html b/themes/dohmh/layouts/partials/related-footer.html
index ecc18364136..f3e71f62a4a 100644
--- a/themes/dohmh/layouts/partials/related-footer.html
+++ b/themes/dohmh/layouts/partials/related-footer.html
@@ -39,7 +39,7 @@ <h4 class="h3">You might also be interested in:</h4>
 
                       {{ end }}
 
-                        <a class="text-black" href="../../{{ .url }}">
+                        <a class="text-black" href={{ relURL .url }}>
                           <span class='text-primary {{ $accent }} mr-2'>{{ safe.HTML $icon }}</span>{{ .title }}
                         </a>
                         <hr class="my-2">
diff --git a/themes/dohmh/layouts/partials/take-action-email.html b/themes/dohmh/layouts/partials/take-action-email.html
deleted file mode 100644
index 5c0ecfe293c..00000000000
--- a/themes/dohmh/layouts/partials/take-action-email.html
+++ /dev/null
@@ -1,429 +0,0 @@
-<button class="btn btn-primary btn-block" data-toggle="modal" data-target="#emailModal">
-Take action! Send elected officials an email.
-</button>
-
-<!--D3-->
-<script src="https://d3js.org/d3.v5.min.js"></script>
-
-<style>
-    /*
-    .ol-overlaycontainer-stopevent {
-        position: absolute;
-        left: -9999px;
-    }
-        */
-
-    .dia-container {
-        position: absolute;
-        left: -9999px;
-    }
-
-
-
-</style>
-
-<div class="modal" tabindex="-1" role="dialog" id="emailModal">
-    <div class='modal-dialog modal-lg modal-dialog-centered' role='document'>
-        <div class='modal-content'>
-            <div class='modal-body'>
-                <div class="row pt-2">
-                    <div class="col-12">
-            
-                      <!-- Search/input -->
-                      <div class="srch input-group" role="search">
-                        <input class="rad-all form-control form-control-lg" placeholder="Search Address" id="map-search">
-                      </div>
-            
-                      <!-- Map gets drawn here -->
-                      <div id='mapLocator' style="height: 300px"></div>
-            
-            
-                   
-                    </div>
-            
-                    <div class="col-12" id="cmInfo">
-                    <!-- entry button -->
-                    <button class="btn btn-primary btn-block" id="outputButton" onclick="dataChange()">Get Council Member for this address:</button> 
-                    <div class="row mt-2">
-                      <div class="col-sm-5">
-                        <span class="home-label">Your City Council Member:</span>
-                      </div>
-                      <div class="col-sm-7">
-                        <span id="CCM" class="font-weight-bold"></span>
-                      </div>
-                    </div> 
-            
-                    <div class="row border-top">
-                      <div class="col-sm-5">
-                        <span class="home-label">Your City Council District:</span>
-                      </div>
-                      <div class="col-sm-7">
-                        <span id="CCD" class="font-weight-bold"></span>
-                      </div>
-                    </div> 
-            
-                    <div class="row border-top mb-2">
-                      <div class="col-sm-5">
-                        <span class="home-label">Your Neighborhood:</span>
-                      </div>
-                      <div class="col-sm-7">
-                        <span id="neighb" class="font-weight-bold fs-sm"></span>
-                      </div>
-                    </div> 
-            
-                      <button type="button" id="sendEmailBtn" class="btn btn-block btn-primary hide" onclick="email1()"><i class="fas fa-envelope-square mr-1"></i>Send my Council Member an email</button>
-            
-            
-                    </div>
-                  </div>
-            
-            
-            
-                  <script>
-                    function email1() {
-                      document.getElementById('email').style.display = "block"
-                      document.getElementById('email').scrollIntoView({  behavior: 'smooth', // smooth scroll
-                      block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
-                    });
-            
-                    document.getElementById('sendEmailBtn').classList.remove('btn-primary')
-                    document.getElementById('sendEmailBtn').classList.add('btn-outline-primary')
-            
-                    document.getElementById('yourCM').innerHTML = districtInfo.CouncilMember;
-                    }
-                  </script>
-
-                  <div id="email" style="display:none">
-                    <div class="row mt-2 border-top pt-2">
-                      <div class="col-12">
-                        <p class="fs-xl font-weight-bold">OK, let's send Council Member <span id="yourCM" class="text-primary"></span> an email.</p>
-                        <p>This page will help you draft and send the email. If you want to, you'll be able to edit the text before you send it. Read the prompts on the left and select buttons on the right.</p>
-            
-                      </div>
-                    </div>
-            
-                    <div class="row mt-2 pt-2">
-                      <div class="col-12">
-                        <p class="home-label">First, what issues are you concerned about?</p>
-                        <div id="concernContainer">
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="airquality">Air quality</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="climatehealth">Climate</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="housing">Housing</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="social">Environmental justice</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="transportation">Active design</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="childhealth">Children's health</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="pests">Pests and pesticides</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="foodanddrink">Food and drink issues</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1" id="healthoutcomes">Environmental health</button>
-
-                          </div>
-                      </div>
-                    </div> <!-- end of row -->
-            
-                    <div class="row mt-2 border-top pt-2">
-                      <div class="col-12">
-                        <p class="home-label">Next, why are you concerned?</p>
-                        <div id="reasonsContainer">
-                            <button type="button" class="btn btn-outline-secondary mb-1">This issue is worse in my neighborhood</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1">It affects my life</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1">The whole city could be doing better</button>
-                          </div>
-            
-                      </div>
-                    </div>
-            
-                    <div class="row mt-2 border-top pt-2">
-                      <div class="col-12">
-                        <p class="home-label">Last, what do you want?</p>
-                        <div id="needsContainer">
-                            <button type="button" class="btn btn-outline-secondary mb-1">What services or resources are available to me</button>
-                            <button type="button" class="btn btn-outline-secondary mb-1">What you're doing to address these issues</button>
-                          </div>
-            
-                      </div>
-                    </div>
-            
-                    <div class="row mt-2 border-top pt-2">
-                      <div class="col-12">
-                        <button type="button" class="btn btn-primary mb-1 btn-block" onclick="writeEmail()">Write my email!</button>
-                      </div>
-                    </div>
-            
-            
-            
-            
-                  </div> <!-- close email bucket-->
-            
-                  <div style="display:none" id="emailText">
-                    <div class="row mt-6 border-top p-2">
-                      <div class="col-md-6" id="yourEmail">
-                        <p class="fs-xl font-weight-bold">Here's your email:</p>
-                        <div id="textDestination">
-                          <p>Dear Council Member <span id="councilMemberLastName"></span>,</p>
-                          <p>I am one of your constituents, a resident of district <span id="districtNum">XX</span>. I was browsing data on {{ .Title }} on the Health Department's websites, the Environment and Health Data Portal ({{ .Permalink }}).</p>
-                          
-                          <p>Based on what I read, I am concerned about the following issues: <span id="concerns"></span>
-              
-                          <p>I'm concerned because <span id="reasons"></span>
-                            
-                          <p>I'm writing to ask you <span id="needs"></span>
-              
-                          <p>I look forward to your reply. Thank you.</p>
-              
-                        </div>
-                      </div>
-                      <div class="col-md-6">
-                        <p class="fs-xl font-weight-bold">Your email is below.</p>
-                
-                        <span class="home-label" id="emailLabel">You can edit the text in the box before you send it.</span>
-                        <form>
-                          <textarea id="textEntry" name="textEntry" style="width:100%;height:300px">
-                            Dear [Council Member],
-                            I am one of your constituents, a resident of [MY NEIGHBORHOOD]. I was reading about neighborhood issues on one of the Health Department's websites, the Environment and Health Data Portal (on.nyc.gov/dataportal). I am concerned about [ISSUES YOU ARE CONCERNED ABOUT].
-              
-                            These concern me because [WHY YOU ARE CONCERNED].
-              
-                            I'm writing to know [WHAT YOU WANT YOUR COUNCIL MEMBER TO DO].
-              
-                            Thank you for your attention, and I look forward to your reply.
-              
-                            Sincerely,
-                            [YOUR NAME]
-                          </textarea>
-                          <br>
-                          <a href="" id="sendButton" target="_blank" class="btn btn-primary btn-block">
-                            Send email!
-                          </a>
-                          <em class="fs-sm">This will open the email in your email client for you to send from your address.</em>
-                        </form>      
-                      </div>
-              
-                    </div>
-                  </div>
-
-
-
-
-
-            </div> <!-- end modal body -->
-            <hr>
-            <button type="button" class="btn btn-outline-primary close-dialog" data-dismiss="modal">Close</button>
-        </div>
-    </div>
-</div>
-
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
-<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/babel-polyfill.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/nyc-ol-lib.js"></script>
-
-<script>
-// This initializes and draws the locator map
-  var map = new nyc.ol.FrameworkMap({
-  mapTarget: '#mapLocator',
-  searchTarget: '#map-search',
-  startAt: '125 Worth Street',
-  geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=74DF5DB1D7320A9A2&app_id=nyc-lib-example'
-  // Developer portal app_key and id don't work, though the nycLib example works
-  //geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=cfed478bf47829a2951bc5a3bbc26422&app_id=2d2a1b38'
-  });
-
-// Loads our City Council list
-var councilTable = [];
-var district;
-d3.csv(sitepath+'/take-action/council.csv').then(function(data) {
-  councilTable = data;
-  // console.log('All City Council members:')
-  // console.table(councilTable)
-
-})
-
-// gets your initial info:
-var yourDistrict; 
-var districtInfo;
-var lastname;
-// runs on button click 
-function dataChange() {
-  document.getElementById('outputButton').classList.remove('btn-primary')
-  document.getElementById('outputButton').classList.add('btn-outline-primary')
-
-
-  yourDistrict = map.location.data.cityCouncilDistrict
-  document.getElementById('CCD').innerHTML = yourDistrict;
-  // console.log('Map geolocator produces the following data from map.location.data')
-  // console.table(map.location.data)
-  document.getElementById('sendEmailBtn').style.display = "block"
-
-  // get info from councilTable
-  for (let i = 0; i < councilTable.length; i ++) {
-    if (Number(councilTable[i].District) === Number(yourDistrict)) {
-      districtInfo = councilTable[i]
-      // console.log('your district:')
-      console.table(districtInfo)
-    } else {}
-  }
-
-  // send info to page
-  document.getElementById('CCM').innerHTML = districtInfo.CouncilMember
-  document.getElementById('neighb').innerHTML = districtInfo.Neighborhoods
-
-  // reveal email button
-  document.getElementById('sendEmailBtn').classList.remove('hide')
-
-  // get last name
-  lastname = districtInfo.CouncilMember
-  lastname = lastname.substring(lastname.indexOf(" ") +1);
-
-
-}
-
-// Create CONCERNS
-var concerns = [];
-var concernsText = [];
-
-// set page's relevant cat buttons to active
-{{ range .Params.categories}}
-document.getElementById('{{ . }}').classList.add('active')
-{{ end }}
-
-// get concern buttons
-var concernContainer = document.getElementById('concernContainer') 
-var concernBtns = concernContainer.getElementsByClassName("btn");
-
-// toggle active state on click
-for (var i = 0; i < concernBtns.length; i++) {
-  concernBtns[i].addEventListener("click", function() {
-    this.classList.toggle('active');
-    concernsText = []; // empty concerns array
-
-    concerns = document.querySelectorAll("#concernContainer .active") // get active buttons
-
-    for (var x = 0; x < concerns.length; x ++) {
-      concernsText.push(concerns[x].innerHTML) // for active buttons, send their innerHTML to concernsText array
-    }
-
-  });
-}
-
-
-// Next, create REASONS.
-var reasons = [];
-var reasonsText = [];
-
-var reasonsContainer = document.getElementById('reasonsContainer')
-var reasonBtns = reasonsContainer.getElementsByClassName("btn");
-for (var i = 0 ; i < reasonBtns.length; i++) {
-  reasonBtns[i].addEventListener("click", function() {
-    this.classList.toggle('active');
-    reasonsText = [];
-    reasons = document.querySelectorAll("#reasonsContainer .active")
-    for (var x = 0; x < reasons.length; x++) {
-      reasonsText.push(reasons[x].innerHTML)
-    }
-  });
-}
-
-// Lastly, create NEEDS. 
-var needs;
-var needsText;
-
-var needsContainer = document.getElementById('needsContainer')
-var needsBtns = needsContainer.getElementsByClassName('btn');
-for (var i = 0 ; i < needsBtns.length; i++) {
-  needsBtns[i].addEventListener("click", function() {
-    this.classList.toggle('active');
-    needsText = [];
-    needs = document.querySelectorAll("#needsContainer .active")
-    for (var x = 0 ; x < needs.length; x++) {
-      needsText.push(needs[x].innerHTML)
-    }
-  })
-}
-
-// and create other info
-var councilMemberLastName;
-var neighborhoodName;
-
-
-// now, create EMAIL
-function writeEmail() {
-   document.getElementById('emailText').style.display = "block" // reveal text
-   document.getElementById('districtNum').innerHTML = map.location.data.cityCouncilDistrict 
-   document.getElementById('councilMemberLastName').innerHTML = lastname;
-
-   // send Concerns to text
-    var str = '';
-
-    for (i = 0 ; i < concernsText.length; i++) {
-      if (i === concernsText.length - 1) {
-        str += 'and ' + concernsText[i].toLowerCase() + '.' // end sentence
-      } else {
-        str += concernsText[i].toLowerCase() + ', ' // use commas in between
-      }
-    }
-
-    document.getElementById("concerns").innerHTML = str;
-
-    // send Reasons to text
-    var str2 = ''
-    for (i = 0 ; i < reasonsText.length; i++) {
-      if (i === reasonsText.length - 1) {
-        str2 += '' + reasonsText[i].toLowerCase() + '.' // end sentence
-      } else {
-        str2 += reasonsText[i].toLowerCase() + ', ' // use commas in between
-      }
-    }
-  
-      document.getElementById("reasons").innerHTML = str2;
-
-    // send Needs to text
-    var str3 = ''
-    needsText
-
-    for (i = 0 ; i < needsText.length; i++) {
-      if (i === needsText.length - 1) {
-        str3 += '' + needsText[i].toLowerCase() + '.' // end sentence
-      } else {
-        str3 += needsText[i].toLowerCase() + ', ' // use commas in between
-      }
-    }
-  
-      document.getElementById("needs").innerHTML = str3;
-
-    // send text to form
-    document.getElementById('textEntry').textContent = document.getElementById('textDestination').innerText
-
-    sendButton()
-
-    document.getElementById('yourEmail').scrollIntoView({  behavior: 'smooth', // smooth scroll
-    block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
-  });
-
-}
-
-function illWrite() {
-  document.getElementById('emailText').style.display = "block" // reveal text
-  document.getElementById('emailLabel').innerHTML = `Write your email below. We've written up a template - delete the parts in [BRACKETS] and add whatever you'd like.`
-
-  sendButton()
-}
-
-function sendButton() {
-  // var address = districtInfo.Email
-  var address = 'trackingportal@health.nyc.gov'
-
-  var subject = 'Health concerns in district ' + map.location.data.cityCouncilDistrict
-  var body = document.getElementById('textEntry').textContent
-
-  document.getElementById('sendButton').href = `mailto:`+ address + `?subject=` + `${subject}` + `&body=` + `${body}`
-}
-
-function sendEmail() {
-
-
-}
-
-
-</script>
\ No newline at end of file
diff --git a/themes/dohmh/layouts/partials/takeaction.html b/themes/dohmh/layouts/partials/takeaction.html
index e31effbd622..a89940347f2 100644
--- a/themes/dohmh/layouts/partials/takeaction.html
+++ b/themes/dohmh/layouts/partials/takeaction.html
@@ -1,6 +1,6 @@
 <!-- Take Action link --> 
 <div class="fs-md">
-<p><i class="fas fa-envelope-open-text mr-1"></i>Concerned about this? <a href="../../take-action/email-electeds" class="">Email your elected officials</a>.</p>
+<p><i class="fas fa-envelope-open-text mr-1"></i>Concerned about this? <a href={{ relURL "take-action/email-electeds" }} class="">Email your elected officials</a>.</p>
 <p><span id="311label" class=""></span> <span id="311" class="destination311"></span></p> 
 </div>
 
diff --git a/themes/dohmh/layouts/take-action/email-electeds.html b/themes/dohmh/layouts/take-action/email-electeds.html
index 4dcebe18264..9b50504ade1 100644
--- a/themes/dohmh/layouts/take-action/email-electeds.html
+++ b/themes/dohmh/layouts/take-action/email-electeds.html
@@ -3,428 +3,439 @@
 <script src="https://d3js.org/d3.v5.min.js"></script>
 
 <article class="container-fluid overflow-hidden" id="primary-content">
-
-  <div class="row mb-4">
-    <div class="col-md-9 mx-auto">
-      <!--start main column-->
-
-      <nav aria-label="breadcrumb" class="my-2">
-        <ul class="breadcrumb mr-auto">
-            <li class="breadcrumb-item"><a href={{ relURL "" }}>Home</a></li>
-            <li class="breadcrumb-item"><a href="..">
-              {{- with .Parent -}} {{ .Title }} </a></li>{{- end -}}
-            <li class="breadcrumb-item active">{{ .Title }}</li>
-        </ul>
-    </nav>
-
-      <div class="row py-2">
-        <div class="col-12">
-          <h1>{{- .Title -}}</h1>
-          {{- .Content -}}
-        </div>
-      </div>
-
-
-      <!-- INTERACTIVE VERSION -->
-      <div class="row my-2 border-top pt-2">
-        <div class="col-12">
-          <h2 class="h4">First, enter your address.</h2>
-          <p>We'll look up your elected officials and get their contact information.</p>
-
-          <!-- Search/input -->
-          <div class="srch input-group" role="search" autocomplete="off" id="searchHolder">
-            <input class="rad-all form-control form-control-lg" placeholder="Search Address" id="map-search">
-          </div>
-
-          <!-- Map gets drawn here -->
-          <div id='mapLocator' style="height:350px;"></div>
-          <em>This page works for NYC addresses only. We won't store any information you enter on this page.</em>
-
-        </div>
-      </div>
-
-      <div class="row hide my-4" id="outputRow">
-        <div class="col-12">
-          <h2 class="h4">Next, get your elected officials' contact info:</h2>
-          <table id="newTable" class="table table-striped mb-2">
-            <thead class="thead-light">
-              <tr>
-                <th>Office</th>
-                <th><i class="fas fa-globe mr-1" aria-hidden="true"></i>Name & website</th>
-                <th><i class="fas fa-phone-square mr-1" aria-hidden="true"></i>Office phone</th>
-                <th><i class="fas fa-envelope mr-1" aria-hidden="true"></i>Email address</th>
-              </tr>
-            </thead>
-            <tbody id="newTableBody">
-  
-            </tbody>
-          </table>
-
-          <div class="mt-2 asidebox">
-          <a href="https://www.mygovnyc.org/" id="link">Get a full list of all your elected officials from Who Reps Me? NYC</a>.
-          </div>
-        </div>
-      </div>
-
-
-    <div class="row my-2 hide" id="contactContainer" data-pagefind-ignore="all">
-      <div class="col-12">
-        <h2 class="h4">Then, write them an email.</h2>
-        <h3 class="h5" id="tips"><i class="fas fa-envelope-open-text mr-1"></i>Email tips</h3>
-        <p>Elected officials serve the people - and want to know how their constituents feel. Here are some tips for writing an effective email, or script for a phone call.</p>
-        <p><strong>Identify yourself as a constituent:</strong> tell them where you live and that they are your elected representative. For example: <em>"I live on Hunts Point Ave in the Bronx, in your district."</em></p>
-        <p><strong>State your concerns.</strong> For example: <em>"Our neighborhood's rates of childhood asthma are among the highest in the city."</em></p>
-
-        <p><strong>Tell your story:</strong> Offer some brief detail on how you see this environmental health issue affecting you and the people you know. For example: <em>"Last year, my daughter was diagnosed with asthma, and this issue is a challenge for our whole family."</em></p>
-
-        <p><strong>Cite data:</strong> For example: <em>"According to data on housing conditions, 75% of renters' households in our neighborhood have maintenance problems that threaten health. (NYC Environment and Health Data Portal: https://a816-dohbesp.nyc.gov/IndicatorPublic/data-explorer/housing-maintenance/?id=2399#display=map)" </em></p>
-
-        <p><strong>Make a request:</strong> You can ask them where they stand on the issue, what they're doing to improve it, or what services are available to help their constituents.</p>
-
-      </div>
-
-        <div class="col-md-6">
-          <div class="p-3 my-2 asidebox">
-            <p><i class="fas fa-vote-yea mr-1"></i>You can contact elected officials whether or not you are registered to vote. If you're not, 
-              <a class="" href="https://voterreg.dmv.ny.gov/motorvoter/" target="_blank" rel="noreferrer noopener"><i class="fas fa-external-link-alt mr-1"></i>register to vote here</a>.</p>
-          </div>
-
-        </div>
-
-        <div class="col-md-6">
-          <div class="p-3 my-2 asidebox">
-            <p><i class="fas fa-phone-square mr-1"></i><em>Some officials don't have email addresses, but you can always call their offices and use your email as a script.</em></p>
+    
+    <div class="row mb-4">
+        <div class="col-md-9 mx-auto">
+            <!--start main column-->
+            
+            <nav aria-label="breadcrumb" class="my-2">
+                <ul class="breadcrumb mr-auto">
+                    <li class="breadcrumb-item"><a href={{ relURL "" }}>Home</a></li>
+                    <li class="breadcrumb-item"><a href="..">
+                        {{- with .Parent -}} {{ .Title }} </a></li>{{- end -}}
+                        <li class="breadcrumb-item active">{{ .Title }}</li>
+                    </ul>
+                </nav>
+                
+                <div class="row py-2">
+                    <div class="col-12">
+                        <h1>{{- .Title -}}</h1>
+                        {{- .Content -}}
+                    </div>
+                </div>
+                
+                
+                <!-- INTERACTIVE VERSION -->
+                <div class="row my-2 border-top pt-2">
+                    <div class="col-12">
+                        <h2 class="h4">First, enter your address.</h2>
+                        <p>We'll look up your elected officials and get their contact information.</p>
+                        
+                        <!-- Search/input -->
+                        <div class="srch input-group" role="search" autocomplete="off" id="searchHolder">
+                            <input class="rad-all form-control form-control-lg" placeholder="Search Address" id="map-search">
+                        </div>
+                        
+                        <!-- Map gets drawn here -->
+                        <div id='mapLocator' style="height:350px;"></div>
+                        <em>This page works for NYC addresses only. We won't store any information you enter on this page.</em>
+                        
+                    </div>
+                </div>
+                
+                <div class="row hide my-4" id="outputRow">
+                    <div class="col-12">
+                        <h2 class="h4">Next, get your elected officials' contact info:</h2>
+                        <table id="newTable" class="table table-striped mb-2">
+                            <thead class="thead-light">
+                                <tr>
+                                    <th>Office</th>
+                                    <th><i class="fas fa-globe mr-1" aria-hidden="true"></i>Name & website</th>
+                                    <th><i class="fas fa-phone-square mr-1" aria-hidden="true"></i>Office phone</th>
+                                    <th><i class="fas fa-envelope mr-1" aria-hidden="true"></i>Email address</th>
+                                </tr>
+                            </thead>
+                            <tbody id="newTableBody">
+                                
+                            </tbody>
+                        </table>
+                        
+                        <div class="mt-2 asidebox">
+                            <a href="https://www.mygovnyc.org/" id="link">Get a full list of all your elected officials from Who Reps Me? NYC</a>.
+                        </div>
+                    </div>
+                </div>
+                
+                
+                <div class="row my-2 hide" id="contactContainer" data-pagefind-ignore="all">
+                    <div class="col-12">
+                        <h2 class="h4">Then, write them an email.</h2>
+                        <h3 class="h5" id="tips"><i class="fas fa-envelope-open-text mr-1"></i>Email tips</h3>
+                        <p>Elected officials serve the people - and want to know how their constituents feel. Here are some tips for writing an effective email, or script for a phone call.</p>
+                        <p><strong>Identify yourself as a constituent:</strong> tell them where you live and that they are your elected representative. For example: <em>"I live on Hunts Point Ave in the Bronx, in your district."</em></p>
+                        <p><strong>State your concerns.</strong> For example: <em>"Our neighborhood's rates of childhood asthma are among the highest in the city."</em></p>
+                        
+                        <p><strong>Tell your story:</strong> Offer some brief detail on how you see this environmental health issue affecting you and the people you know. For example: <em>"Last year, my daughter was diagnosed with asthma, and this issue is a challenge for our whole family."</em></p>
+                        
+                        <p><strong>Cite data:</strong> For example: <em>"According to data on housing conditions, 75% of renters' households in our neighborhood have maintenance problems that threaten health. (NYC Environment and Health Data Portal: https://a816-dohbesp.nyc.gov/IndicatorPublic/data-explorer/housing-maintenance/?id=2399#display=map)" </em></p>
+                        
+                        <p><strong>Make a request:</strong> You can ask them where they stand on the issue, what they're doing to improve it, or what services are available to help their constituents.</p>
+                        
+                    </div>
+                    
+                    <div class="col-md-6">
+                        <div class="p-3 my-2 asidebox">
+                            <p><i class="fas fa-vote-yea mr-1"></i>You can contact elected officials whether or not you are registered to vote. If you're not, 
+                                <a class="" href="https://voterreg.dmv.ny.gov/motorvoter/" target="_blank" rel="noreferrer noopener"><i class="fas fa-external-link-alt mr-1"></i>register to vote here</a>.</p>
+                            </div>
+                            
+                        </div>
+                        
+                        <div class="col-md-6">
+                            <div class="p-3 my-2 asidebox">
+                                <p><i class="fas fa-phone-square mr-1"></i><em>Some officials don't have email addresses, but you can always call their offices and use your email as a script.</em></p>
+                            </div>
+                            
+                        </div>
+                    </div>
+                    
+                    <style>
+                        .glow {
+                            animation: glow 1s infinite alternate;
+                        }
+                        
+                        @keyframes glow {
+                            from {
+                                box-shadow: 0 0 5px -5px #008939;
+                            }
+                            to {
+                                box-shadow: 0 0 5px 5px #008939;
+                            }
+                        }
+                    </style>
+                    
+                    
+                    
+                    <div class="row my-4 hide" id="register">
+                        <div class="col p-3 mx-4 sr-only" style="background-color: #f1f1f1; border-left: 2px solid darkgray;">
+                            <p>You can contact these elected officials whether you are registered to vote, or not. If you're not, <a href="https://voterreg.dmv.ny.gov/motorvoter/">click here to register to vote</a>.</a></p>
+                        </div>
+                    </div>
+                    
+                </div>
+                <!--end main column-->
             </div>
-
-        </div>
-    </div>
-
-    <style>
-      .glow {
-        animation: glow 1s infinite alternate;
-      }
-
-      @keyframes glow {
-        from {
-          box-shadow: 0 0 5px -5px #008939;
-        }
-        to {
-          box-shadow: 0 0 5px 5px #008939;
-        }
-      }
-    </style>
-
-
-
-    <div class="row my-4 hide" id="register">
-      <div class="col p-3 mx-4 sr-only" style="background-color: #f1f1f1; border-left: 2px solid darkgray;">
-        <p>You can contact these elected officials whether you are registered to vote, or not. If you're not, <a href="https://voterreg.dmv.ny.gov/motorvoter/">click here to register to vote</a>.</a></p>
-      </div>
-    </div>
-
-    </div>
-    <!--end main column-->
-  </div>
-
-</article>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
-<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/babel-polyfill.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/nyc-ol-lib.js"></script>
-
-<script>
-
-// ------------------------------------------------------- // 
-// ********** Load map and ingest initial data: ********** //
-// ------------------------------------------------------- // 
-
-var map;
-function drawMap() {
-  document.getElementById('mapLocator').innerHTML = ''
-  document.getElementById('searchHolder').innerHTML = `<input class="rad-all form-control form-control-lg" placeholder="Search Address" id="map-search">`
-  
-  map = new nyc.ol.FrameworkMap({
-    mapTarget: '#mapLocator',
-    searchTarget: '#map-search',
-    // searchTarget: true,
-    // startAt: '125 Worth Street',
-    geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=74DF5DB1D7320A9A2&app_id=nyc-lib-example'
-    // Developer portal app_key and id don't work, though the nycLib example works
-    //geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=cfed478bf47829a2951bc5a3bbc26422&app_id=2d2a1b38'
-    });
-
-    console.log("*** draw map");
-
-}
-
-drawMap()
-
-// Add event listener on entry form
-document.getElementById('map-search').addEventListener("change", getData)
-
-// Check hash for an existing address
-
-
-// ----------------------------------------------------------------------  //
-// ********** Runs data fetching if there's a url hash: ****************** //
-// ----------------------------------------------------------------------  //
-/*
-var hash = window.location.hash
-if (hash.length > 5) {
-  console.log('we have a hash, folks:')
-  hash = hash.replace(/%20/g, " ");
-  hash = hash.substring(1);
-  console.log(hash)
-  document.getElementById('map-search').value = hash
-  setTimeout(getDataFromHash, 1000)
-} else {}
-
-function getDataFromHash() {
-  console.log('enter click')
-  document.getElementById('map-search').dispatchEvent(enterEvent)
-  let button = document.querySelector('#searchHolder button');
-
-  button.dispatchEvent(enterEvent)
-  // getData()
-}
-*/
-
-// ----------------------------------------------------------------------  //
-// ********** Gets data when event listener detects map change: ********** //
-// ----------------------------------------------------------------------  //
-
-async function getData() {
-  console.log('*** Getting data:')
-  waitForGlobal("map.location.name", function() {
-    console.log("map.location [post]", map.location);
-
-    // Get data
-    getDataFor(map.location)
-
-    // Next, set up reset
-    document.getElementById('map-search').disabled = true
-    let button = document.querySelector('#searchHolder button');
-
-    // Turn search button into Start Over button
-    if (button) {
-        button.innerHTML = 'Start over'
-        button.onclick = function() {
-          location.reload(); // Reload the page
-        };
-      }
-  })
-}
-
-// ----------------------------------------------------------------------  //
-// ********** Get data function - retrieving from API: ******************* //
-// ----------------------------------------------------------------------  //
-
-function getDataFor(x) {
-  console.log('**** Getting data for:')
-  console.log(map.location.name)
-
-  // add hash
-  window.location.hash = map.location.name
-
-  // add location to link to mygovnyc
-  var linkURL = `https://www.mygovnyc.org/?addr=${map.location.name}`
-  document.getElementById('link').setAttribute("href",linkURL)
-
-  let loc   = map.location
-  let data  = map.location.data
-
-  // First, un-hide elements
-  document.getElementById('outputRow').classList.remove('hide')
-  document.getElementById('contactContainer').classList.remove('hide')
-
-  // Passing in the name (must match LWV API), the district, and the LWV Api url string. And, order.
-  retrieveAPIData('Mayor',null,null);
-  retrieveAPIData('NYC Public Advocate',null,null);
-  retrieveAPIData('NYC Comptroller',null,null)
-  
-  retrieveAPIData('City Council',removeLeadingZero(data.cityCouncilDistrict),'lwvnyc_council')
-  retrieveAPIData('Community Board',removeLeadingZero(data.communityDistrict),'nyccommboard')
-  retrieveAPIData('Borough President',removeLeadingZero(data.bblBoroughCode),'lwvnyc_borough')
-  retrieveAPIData('State Assembly Member',removeLeadingZero(data.assemblyDistrict),'lwvnyc_nyassembly')
-  retrieveAPIData('State Senator', removeLeadingZero(data.stateSenatorialDistrict),'lwvnyc_nysenate')
-  retrieveAPIData('US Representative', removeLeadingZero(data.congressionalDistrict),'lwvnyc_congress')
-  retrieveAPIData('US Senator',null,null)
-}
-
-async function retrieveAPIData(x,y,z) {
-  let xEncode = encodeURIComponent(x)
-  let url;
-
-  if (y === null) {
-    url = `https://www.mygovnyc.org/api/v1/query/lwvnyc_other?columns=*&filter=districttitle%3D'${xEncode}'`;
-  } else {
-    url = `https://www.mygovnyc.org/api/v1/query/${z}?columns=*&filter=district%3D'${y}'`;
-  }
-  
-    try {
-        const response = await fetch(url);
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
+            
+        </article>
         
-        const data = await response.json();
-
-        // console.log('Data for ' + x)
-        // console.log(data); // Log the data to the console
-        printData(data,x)    // Send to print function 
-
-    } catch (error) {
-        console.error("Error fetching data:", error);
-    }
-
-}
-
-function removeLeadingZero(str) {
-  if (str.startsWith('0')) {
-      return str.slice(1);
-  }
-  return str;
-}
-
-// ----------------------------------------------------------------------  //
-// ********** Print data to page from API: ******************************* //
-// ----------------------------------------------------------------------  //
-
-function printData(data, office) {
-  console.log('*** printing data');
-
-  let sort;
-  if (office.includes('US ')) {
-    sort = 10;
-  } else if (office.includes('State')) {
-    sort = 9;
-  } else if (office.includes('Borough')) {
-    sort = 6;
-  }  else if (office.includes('Community')) {
-    sort = 5
-  } else if (office.includes ('Council')) {
-    sort = 4
-  } else if (office.includes('NYC')) {
-    sort = 3
-  } else if (office.includes('Mayor')) {
-    sort = 1
-  }
-  
-  let tableBody = document.getElementById('newTableBody');
-
-  for (let i = 0; i < data.length; i++) {
-    // Create table row
-    let row = document.createElement('tr');
-
-    let cell_office = document.createElement('td');
-
-      if (office.includes('Council')) {
-        cell_office.innerHTML = office + ' District ' + data[i].district
-      } else if (office.includes('Community')) {
-        cell_office.innerHTML = office + ' ' + data[i].district
-      } else if (office.includes('Borough')) {
-        cell_office.innerHTML = data[i].districttitle
-      } else {
-        cell_office.innerHTML = office
-      }
-
-
-    let cell_name = document.createElement('td');
-    let url = data[i].website ? data[i].website : '';
-    let name = data[i].firstname ? data[i].firstname + ' ' + data[i].lastname : 'Chairperson ' + data[i].chairperso;
-    cell_name.innerHTML = `<a href="${url}" target="_blank">${name}</a>`;
-
-    let cell_phone = document.createElement('td');
-    let phone = data[i].phone_capital ? data[i].phone_capital + '<br>' + data[i].phone_dist1 : data[i].phone;
-    cell_phone.innerHTML = office === 'Mayor' ? 'Not available' : phone; 
-
-    let cell_email = document.createElement('td');
-    let email = data[i].email;
-      if (isValidEmail(email) === true) {
-        cell_email.innerHTML =  `<strong><a href="mailto:${email}">${email}</a></strong>`
-      } else {
-        cell_email.innerHTML =  `<strong><a href="${email}" target="_blank"><i class="fas fa-external-link-alt mr-1" aria-hidden="true"></i>Contact page</a></strong>`
-      }
-
-    // Append cells to row
-    row.appendChild(cell_office);
-    row.appendChild(cell_name);
-    row.appendChild(cell_phone);
-    row.appendChild(cell_email);
-
-    // Insert row at the correct sorted position
-    let inserted = false;
-    let rows = tableBody.getElementsByTagName("tr");
-    
-    for (let j = 0; j < rows.length; j++) {
-      let existingSort = rows[j].getAttribute("data-sort"); // Get existing sort value
-      if (existingSort && parseInt(existingSort) > sort) {
-        tableBody.insertBefore(row, rows[j]); // Insert before the first row with a higher sort value
-        inserted = true;
-        break;
-      }
-    }
-
-    if (!inserted) {
-      tableBody.appendChild(row); // Append if no row had a higher sort value
-    }
-
-    row.setAttribute("data-sort", sort); // Store the sort value for future comparisons
-  }
-}
-
-// ----------------------------------------------------------------------  //
-// ********** Misc supportive functions: ********************************* //
-// ----------------------------------------------------------------------  //
-
-// window.checkNested = function(obj, args) {
-const checkNested = function(obj, args) {
-  for (var i = 0; i < args.length; i++) {
-    if (!obj || !obj.hasOwnProperty(args[i])) {
-      return false;
-    }
-    obj = obj[args[i]];
-  }
-  return true;
-}
-  
-const waitForGlobal = function(keyPath, callback) {
-  var args = keyPath.split('.');
-  if (checkNested(window, args)) {
-    callback();
-  } else {
-    setTimeout(function() {
-      // window.waitForGlobal(keyPath, callback);
-      waitForGlobal(keyPath, callback);
-    }, 100);
-  }
-}
-  
-function startOver() {
-  location.reload()
-}
-
-function isValidEmail(email) {
-  return (email.match(/@/g) || []).length === 1;
-}
-
-function isValidPhoneNumber(phone) {
-  const phoneRegex = /^\d{3}[- ]\d{3}[- ]\d{4}$/;
-  return phoneRegex.test(phone);
-}
-
-// Create a new keyboard event
-const enterEvent = new KeyboardEvent('keydown', {
-  key: 'Enter',
-  keyCode: 13, // Deprecated but still sometimes needed
-  which: 13,   // Deprecated but still sometimes needed
-  code: 'Enter',
-  bubbles: true
-});
-
-</script>
-
-
-{{- end -}}
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
+        <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
+        <script src="https://maps.nyc.gov/nyc-lib/v1.4.78/js/babel-polyfill.js"></script>
+        <script src="https://maps.nyc.gov/nyc-lib/v1.4.78/js/nyc-ol-lib.js"></script>
+        
+        <script>
+            
+            // ------------------------------------------------------- // 
+            // ********** Load map and ingest initial data: ********** //
+            // ------------------------------------------------------- // 
+            
+            var map;
+            function drawMap() {
+                document.getElementById('mapLocator').innerHTML = ''
+                document.getElementById('searchHolder').innerHTML = `<input class="rad-all form-control form-control-lg" placeholder="Search Address" id="map-search">`
+                
+                map = new nyc.ol.FrameworkMap({
+                    mapTarget: '#mapLocator',
+                    searchTarget: '#map-search',
+                    // searchTarget: true,
+                    // startAt: '125 Worth Street',
+                    geoclientUrl: 'https://api.nyc.gov/geoclient/v2/search?key=ab310d5ecfc14284ada7e32c980221c3'
+                });
+                
+                console.log("*** draw map");
+                
+            }
+            
+            drawMap()
+            
+            // Add event listener on entry form
+            document.getElementById('map-search').addEventListener("change", getData)
+            
+            let searchButton = document.querySelector('.btn.btn-srch');
+            
+            // Check if the button exists to avoid errors
+            if (searchButton) {
+                
+                searchButton.onclick = function() {
+                    
+                    $("#map-search").parent().trigger("submit")
+                    
+                };
+                
+            }
+            
+            // Check hash for an existing address
+            
+            
+            // ----------------------------------------------------------------------  //
+            // ********** Runs data fetching if there's a url hash: ****************** //
+            // ----------------------------------------------------------------------  //
+            /*
+            var hash = window.location.hash
+            if (hash.length > 5) {
+                console.log('we have a hash, folks:')
+                hash = hash.replace(/%20/g, " ");
+                hash = hash.substring(1);
+                console.log(hash)
+                document.getElementById('map-search').value = hash
+                setTimeout(getDataFromHash, 1000)
+            } else {}
+            
+            function getDataFromHash() {
+                console.log('enter click')
+                document.getElementById('map-search').dispatchEvent(enterEvent)
+                let button = document.querySelector('#searchHolder button');
+                
+                button.dispatchEvent(enterEvent)
+                // getData()
+            }
+            */
+            
+            // ----------------------------------------------------------------------  //
+            // ********** Gets data when event listener detects map change: ********** //
+            // ----------------------------------------------------------------------  //
+            
+            async function getData() {
+                console.log('*** Getting data:')
+                waitForGlobal("map.location.name", function() {
+                    console.log("map.location [post]", map.location);
+                    
+                    // Get data
+                    getDataFor(map.location)
+                    
+                    // Next, set up reset
+                    document.getElementById('map-search').disabled = true
+                    let button = document.querySelector('#searchHolder button');
+                    
+                    // Turn search button into Start Over button
+                    if (button) {
+                        button.innerHTML = 'Start over'
+                        button.onclick = function() {
+                            location.reload(); // Reload the page
+                        };
+                    }
+                })
+            }
+            
+            // ----------------------------------------------------------------------  //
+            // ********** Get data function - retrieving from API: ******************* //
+            // ----------------------------------------------------------------------  //
+            
+            function getDataFor(x) {
+                console.log('**** Getting data for:')
+                console.log(map.location.name)
+                
+                // add hash
+                window.location.hash = map.location.name
+                
+                // add location to link to mygovnyc
+                var linkURL = `https://www.mygovnyc.org/?addr=${map.location.name}`
+                document.getElementById('link').setAttribute("href",linkURL)
+                
+                let loc   = map.location
+                let data  = map.location.data
+                
+                // First, un-hide elements
+                document.getElementById('outputRow').classList.remove('hide')
+                document.getElementById('contactContainer').classList.remove('hide')
+                
+                // Passing in the name (must match LWV API), the district, and the LWV Api url string. And, order.
+                retrieveAPIData('Mayor',null,null);
+                retrieveAPIData('NYC Public Advocate',null,null);
+                retrieveAPIData('NYC Comptroller',null,null)
+                
+                retrieveAPIData('City Council',removeLeadingZero(data.cityCouncilDistrict),'lwvnyc_council')
+                retrieveAPIData('Community Board',removeLeadingZero(data.communityDistrict),'nyccommboard')
+                retrieveAPIData('Borough President',removeLeadingZero(data.bblBoroughCode),'lwvnyc_borough')
+                retrieveAPIData('State Assembly Member',removeLeadingZero(data.assemblyDistrict),'lwvnyc_nyassembly')
+                retrieveAPIData('State Senator', removeLeadingZero(data.stateSenatorialDistrict),'lwvnyc_nysenate')
+                retrieveAPIData('US Representative', removeLeadingZero(data.congressionalDistrict),'lwvnyc_congress')
+                retrieveAPIData('US Senator',null,null)
+            }
+            
+            async function retrieveAPIData(x,y,z) {
+                let xEncode = encodeURIComponent(x)
+                let url;
+                
+                if (y === null) {
+                    url = `https://www.mygovnyc.org/api/v1/query/lwvnyc_other?columns=*&filter=districttitle%3D'${xEncode}'`;
+                } else {
+                    url = `https://www.mygovnyc.org/api/v1/query/${z}?columns=*&filter=district%3D'${y}'`;
+                }
+                
+                try {
+                    const response = await fetch(url);
+                    if (!response.ok) {
+                        throw new Error(`HTTP error! Status: ${response.status}`);
+                    }
+                    
+                    const data = await response.json();
+                    
+                    // console.log('Data for ' + x)
+                    // console.log(data); // Log the data to the console
+                    printData(data,x)    // Send to print function 
+                    
+                } catch (error) {
+                    console.error("Error fetching data:", error);
+                }
+                
+            }
+            
+            function removeLeadingZero(str) {
+                if (str.startsWith('0')) {
+                    return str.slice(1);
+                }
+                return str;
+            }
+            
+            // ----------------------------------------------------------------------  //
+            // ********** Print data to page from API: ******************************* //
+            // ----------------------------------------------------------------------  //
+            
+            function printData(data, office) {
+                console.log('*** printing data');
+                
+                let sort;
+                if (office.includes('US ')) {
+                    sort = 10;
+                } else if (office.includes('State')) {
+                    sort = 9;
+                } else if (office.includes('Borough')) {
+                    sort = 6;
+                }  else if (office.includes('Community')) {
+                    sort = 5
+                } else if (office.includes ('Council')) {
+                    sort = 4
+                } else if (office.includes('NYC')) {
+                    sort = 3
+                } else if (office.includes('Mayor')) {
+                    sort = 1
+                }
+                
+                let tableBody = document.getElementById('newTableBody');
+                
+                for (let i = 0; i < data.length; i++) {
+                    // Create table row
+                    let row = document.createElement('tr');
+                    
+                    let cell_office = document.createElement('td');
+                    
+                    if (office.includes('Council')) {
+                        cell_office.innerHTML = office + ' District ' + data[i].district
+                    } else if (office.includes('Community')) {
+                        cell_office.innerHTML = office + ' ' + data[i].district
+                    } else if (office.includes('Borough')) {
+                        cell_office.innerHTML = data[i].districttitle
+                    } else {
+                        cell_office.innerHTML = office
+                    }
+                    
+                    
+                    let cell_name = document.createElement('td');
+                    let url = data[i].website ? data[i].website : '';
+                    let name = data[i].firstname ? data[i].firstname + ' ' + data[i].lastname : 'Chairperson ' + data[i].chairperso;
+                    cell_name.innerHTML = `<a href="${url}" target="_blank">${name}</a>`;
+                    
+                    let cell_phone = document.createElement('td');
+                    let phone = data[i].phone_capital ? data[i].phone_capital + '<br>' + data[i].phone_dist1 : data[i].phone;
+                    cell_phone.innerHTML = office === 'Mayor' ? 'Not available' : phone; 
+                    
+                    let cell_email = document.createElement('td');
+                    let email = data[i].email;
+                    if (isValidEmail(email) === true) {
+                        cell_email.innerHTML =  `<strong><a href="mailto:${email}">${email}</a></strong>`
+                    } else {
+                        cell_email.innerHTML =  `<strong><a href="${email}" target="_blank"><i class="fas fa-external-link-alt mr-1" aria-hidden="true"></i>Contact page</a></strong>`
+                    }
+                    
+                    // Append cells to row
+                    row.appendChild(cell_office);
+                    row.appendChild(cell_name);
+                    row.appendChild(cell_phone);
+                    row.appendChild(cell_email);
+                    
+                    // Insert row at the correct sorted position
+                    let inserted = false;
+                    let rows = tableBody.getElementsByTagName("tr");
+                    
+                    for (let j = 0; j < rows.length; j++) {
+                        let existingSort = rows[j].getAttribute("data-sort"); // Get existing sort value
+                        if (existingSort && parseInt(existingSort) > sort) {
+                            tableBody.insertBefore(row, rows[j]); // Insert before the first row with a higher sort value
+                            inserted = true;
+                            break;
+                        }
+                    }
+                    
+                    if (!inserted) {
+                        tableBody.appendChild(row); // Append if no row had a higher sort value
+                    }
+                    
+                    row.setAttribute("data-sort", sort); // Store the sort value for future comparisons
+                }
+            }
+            
+            // ----------------------------------------------------------------------  //
+            // ********** Misc supportive functions: ********************************* //
+            // ----------------------------------------------------------------------  //
+            
+            // window.checkNested = function(obj, args) {
+                const checkNested = function(obj, args) {
+                    for (var i = 0; i < args.length; i++) {
+                        if (!obj || !obj.hasOwnProperty(args[i])) {
+                            return false;
+                        }
+                        obj = obj[args[i]];
+                    }
+                    return true;
+                }
+                
+                const waitForGlobal = function(keyPath, callback) {
+                    var args = keyPath.split('.');
+                    if (checkNested(window, args)) {
+                        callback();
+                    } else {
+                        setTimeout(function() {
+                            // window.waitForGlobal(keyPath, callback);
+                            waitForGlobal(keyPath, callback);
+                        }, 100);
+                    }
+                }
+                
+                function startOver() {
+                    location.reload()
+                }
+                
+                function isValidEmail(email) {
+                    return (email.match(/@/g) || []).length === 1;
+                }
+                
+                function isValidPhoneNumber(phone) {
+                    const phoneRegex = /^\d{3}[- ]\d{3}[- ]\d{4}$/;
+                    return phoneRegex.test(phone);
+                }
+                
+                // Create a new keyboard event
+                const enterEvent = new KeyboardEvent('keydown', {
+                    key: 'Enter',
+                    keyCode: 13, // Deprecated but still sometimes needed
+                    which: 13,   // Deprecated but still sometimes needed
+                    code: 'Enter',
+                    bubbles: true
+                });
+                
+            </script>
+            
+            
+            {{- end -}}
diff --git a/themes/dohmh/layouts/take-action/email.html b/themes/dohmh/layouts/take-action/email.html
deleted file mode 100644
index 1cc52be07a5..00000000000
--- a/themes/dohmh/layouts/take-action/email.html
+++ /dev/null
@@ -1,436 +0,0 @@
-{{- define "main" -}}
-    <!--D3-->
-    <script src="https://d3js.org/d3.v5.min.js"></script>
-
-<article class="container-fluid overflow-hidden" id="primary-content">
-
-  <div class="row mb-4">
-    <div class="col-md-11 col-sm-12 mx-auto">
-      <!--start main column-->
-
-      <nav aria-label="breadcrumb" class="my-2">
-        <ul class="breadcrumb mr-auto">
-            <li class="breadcrumb-item"><a href={{ relURL "" }}>Home</a></li>
-            <li class="breadcrumb-item"><a href="..">
-              {{- with .Parent -}} {{ .Title }} </a></li>{{- end -}}
-            <li class="breadcrumb-item active">{{ .Title }}</li>
-        </ul>
-    </nav>
-
-      <h1>{{- .Title -}}</h1>
-        {{- .Content -}}
-
-      <div class="row border-top pt-2">
-        <div class="col-12">
-          <p class="fs-xl font-weight-bold">First, enter your address.</p>
-          <p>Enter your address below. We'll use your address to tell you who your elected City Council Member is.</p>
-
-        </div>
-      </div>
-
-      <div class="row pt-2">
-        <div class="col-md-6 col-sm-12">
-
-          <!-- Search/input -->
-          <div class="srch input-group" role="search">
-            <input class="rad-all form-control form-control-lg" placeholder="Search Address" id="map-search">
-          </div>
-
-          <!-- Map gets drawn here -->
-          <div id='mapLocator'></div>
-
-
-
-        </div>
-
-        <div class="col-md-6 col-sm-12" id="cmInfo">
-        <!-- entry button -->
-        <button class="btn btn-primary btn-block" id="outputButton" onclick="dataChange()">Get Council Member for this address:</button>
-        <div class="row mt-2">
-          <div class="col-sm-5">
-            <span class="home-label">Your City Council Member:</span>
-          </div>
-          <div class="col-sm-7">
-            <span id="CCM" class="font-weight-bold"></span>
-          </div>
-        </div>
-
-        <div class="row border-top">
-          <div class="col-sm-5">
-            <span class="home-label">Your City Council District:</span>
-          </div>
-          <div class="col-sm-7">
-            <span id="CCD" class="font-weight-bold"></span>
-          </div>
-        </div>
-
-        <div class="row border-top mb-2">
-          <div class="col-sm-5">
-            <span class="home-label">Your Neighborhood:</span>
-          </div>
-          <div class="col-sm-7">
-            <span id="neighb" class="font-weight-bold fs-sm"></span>
-          </div>
-        </div>
-
-          <button type="button" id="sendEmailBtn" class="btn btn-block btn-primary hide" onclick="email1()"><i class="fas fa-envelope-square mr-1"></i>Send my Council Member an email</button>
-
-
-        </div>
-      </div>
-
-
-
-      <script>
-        function email1() {
-          document.getElementById('email').style.display = "block"
-          document.getElementById('email').scrollIntoView({  behavior: 'smooth', // smooth scroll
-          block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
-        });
-
-        document.getElementById('sendEmailBtn').classList.remove('btn-primary')
-        document.getElementById('sendEmailBtn').classList.add('btn-outline-primary')
-
-        document.getElementById('yourCM').innerHTML = districtInfo.CouncilMember;
-        }
-      </script>
-
-      <div id="email" style="display:none">
-        <div class="row mt-2 border-top pt-2">
-          <div class="col-12">
-            <p class="fs-xl font-weight-bold">OK, let's send Council Member <span id="yourCM" class="text-primary"></span> an email.</p>
-            <p>This page will help you draft and send the email. If you want to, you'll be able to edit the text before you send it. Read the prompts on the left and select buttons on the right.</p>
-
-          </div>
-        </div>
-
-        <div class="row mt-2 pt-2">
-          <div class="col-md-6 col-sm-12">
-            <p class="home-label">First, what issues are you concerned about?</p>
-
-          </div>
-          <div class="col-md-6 col-sm-12">
-            <div id="concernContainer">
-              <button type="button" class="btn btn-outline-secondary mb-1">Air quality</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Climate</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Housing</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Environmental justice</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Asthma</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Active design</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Children's health</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Pests and pesticides</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">Food and drink issues</button>
-            </div>
-          </div>
-        </div> <!-- end of row -->
-
-        <div class="row mt-2 border-top pt-2">
-          <div class="col-md-6 col-sm-12">
-            <p class="home-label">Next, why are you concerned?</p>
-
-          </div>
-          <div class="col-md-6 col-sm-12">
-            <div id="reasonsContainer">
-              <button type="button" class="btn btn-outline-secondary mb-1">This issue is worse in my neighborhood</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">It affects my life</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">The whole city could be doing better</button>
-            </div>
-          </div>
-        </div>
-
-        <div class="row mt-2 border-top pt-2">
-          <div class="col-md-6 col-sm-12">
-            <p class="home-label">Last, what do you want?</p>
-
-          </div>
-          <div class="col-md-6 col-sm-12">
-            <div id="needsContainer">
-              <button type="button" class="btn btn-outline-secondary mb-1">What services or resources are available to me</button>
-              <button type="button" class="btn btn-outline-secondary mb-1">What you're doing to address these issues</button>
-            </div>
-          </div>
-        </div>
-
-        <div class="row mt-2 border-top pt-2">
-          <div class="col-md-6 ml-auto col-sm-12">
-            <button type="button" class="btn btn-primary mb-1 btn-block" onclick="writeEmail()">Write my email!</button>
-          </div>
-        </div>
-
-
-
-
-      </div> <!-- close email bucket-->
-
-      <div style="display:none" id="emailText">
-        <div class="row mt-6 border-top p-2">
-          <div class="col-md-6" id="yourEmail">
-            <p class="fs-xl font-weight-bold">Here's your email:</p>
-            <div id="textDestination">
-              <p>Dear Council Member <span id="councilMemberLastName"></span>,</p>
-              <p>I am one of your constituents, a resident of district <span id="districtNum">XX</span>. I was reading about neighborhood issues on one of the Health Department's websites, the Environment and Health Data Portal (on.nyc.gov/dataportal). I am concerned about the following issues: <span id="concerns"></span>
-
-              <p>I'm concerned because <span id="reasons"></span>
-
-              <p>I'm writing to ask you <span id="needs"></span>
-
-              <p>I look forward to your reply. Thank you.</p>
-
-            </div>
-          </div>
-          <div class="col-md-6">
-            <p class="fs-xl font-weight-bold">Your email is below.</p>
-
-            <span class="home-label" id="emailLabel">You can edit the text in the box before you send it.</span>
-            <form>
-              <textarea id="textEntry" name="textEntry" style="width:100%;height:300px">
-                Dear [Council Member],
-                I am one of your constituents, a resident of [MY NEIGHBORHOOD]. I was reading about neighborhood issues on one of the Health Department's websites, the Environment and Health Data Portal (on.nyc.gov/dataportal). I am concerned about [ISSUES YOU ARE CONCERNED ABOUT].
-
-                These concern me because [WHY YOU ARE CONCERNED].
-
-                I'm writing to know [WHAT YOU WANT YOUR COUNCIL MEMBER TO DO].
-
-                Thank you for your attention, and I look forward to your reply.
-
-                Sincerely,
-                [YOUR NAME]
-              </textarea>
-              <br>
-              <a href="" id="sendButton" target="_blank" class="btn btn-primary btn-block">
-                Send email!
-              </a>
-              <em class="fs-sm">This will open the email in your email client for you to send from your address.</em>
-            </form>
-          </div>
-
-        </div>
-      </div>
-
-
-
-
-
-
-
-
-
-
-    </div>
-    <!--end main column-->
-  </div>
-
-</article>
-
-<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4.js"></script>
-<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.4.0/papaparse.min.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/babel-polyfill.js"></script>
-<script src="https://maps.nyc.gov/nyc-lib/v1.2.79/js/nyc-ol-lib.js"></script>
-
-<script>
-// This initializes and draws the locator map
-  var map = new nyc.ol.FrameworkMap({
-  mapTarget: '#mapLocator',
-  searchTarget: '#map-search',
-  startAt: '125 Worth Street',
-  geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=74DF5DB1D7320A9A2&app_id=nyc-lib-example'
-  // Developer portal app_key and id don't work, though the nycLib example works
-  //geoclientUrl: 'https://maps.nyc.gov/geoclient/v1/search.json?app_key=cfed478bf47829a2951bc5a3bbc26422&app_id=2d2a1b38'
-  });
-
-// Loads our City Council list
-var councilTable = [];
-var district;
-d3.csv(sitepath+'/take-action/council.csv').then(function(data) {
-  councilTable = data;
-  // console.log('All City Council members:')
-  // console.table(councilTable)
-
-})
-
-// gets your initial info:
-var yourDistrict;
-var districtInfo;
-var lastname;
-// runs on button click
-function dataChange() {
-  document.getElementById('outputButton').classList.remove('btn-primary')
-  document.getElementById('outputButton').classList.add('btn-outline-primary')
-
-
-  yourDistrict = map.location.data.cityCouncilDistrict
-  document.getElementById('CCD').innerHTML = yourDistrict;
-  // console.log('Map geolocator produces the following data from map.location.data')
-  // console.table(map.location.data)
-  document.getElementById('sendEmailBtn').style.display = "block"
-
-  // get info from councilTable
-  for (let i = 0; i < councilTable.length; i ++) {
-    if (Number(councilTable[i].District) === Number(yourDistrict)) {
-      districtInfo = councilTable[i]
-      console.log('your district:')
-      console.table(districtInfo)
-    } else {}
-  }
-
-  // send info to page
-  document.getElementById('CCM').innerHTML = districtInfo.CouncilMember
-  document.getElementById('neighb').innerHTML = districtInfo.Neighborhoods
-
-  // reveal email button
-  document.getElementById('sendEmailBtn').classList.remove('hide')
-
-  // get last name
-  lastname = districtInfo.CouncilMember
-  lastname = lastname.substring(lastname.indexOf(" ") +1);
-
-
-}
-
-// Create CONCERNS
-var concerns = [];
-var concernsText = [];
-
-// get concern buttons
-var concernContainer = document.getElementById('concernContainer')
-var concernBtns = concernContainer.getElementsByClassName("btn");
-
-// toggle active state on click
-for (var i = 0; i < concernBtns.length; i++) {
-  concernBtns[i].addEventListener("click", function() {
-    this.classList.toggle('active');
-    concernsText = []; // empty concerns array
-
-    concerns = document.querySelectorAll("#concernContainer .active") // get active buttons
-
-    for (var x = 0; x < concerns.length; x ++) {
-      concernsText.push(concerns[x].innerHTML) // for active buttons, send their innerHTML to concernsText array
-    }
-
-  });
-}
-
-
-// Next, create REASONS.
-var reasons = [];
-var reasonsText = [];
-
-var reasonsContainer = document.getElementById('reasonsContainer')
-var reasonBtns = reasonsContainer.getElementsByClassName("btn");
-for (var i = 0 ; i < reasonBtns.length; i++) {
-  reasonBtns[i].addEventListener("click", function() {
-    this.classList.toggle('active');
-    reasonsText = [];
-    reasons = document.querySelectorAll("#reasonsContainer .active")
-    for (var x = 0; x < reasons.length; x++) {
-      reasonsText.push(reasons[x].innerHTML)
-    }
-  });
-}
-
-// Lastly, create NEEDS.
-var needs;
-var needsText;
-
-var needsContainer = document.getElementById('needsContainer')
-var needsBtns = needsContainer.getElementsByClassName('btn');
-for (var i = 0 ; i < needsBtns.length; i++) {
-  needsBtns[i].addEventListener("click", function() {
-    this.classList.toggle('active');
-    needsText = [];
-    needs = document.querySelectorAll("#needsContainer .active")
-    for (var x = 0 ; x < needs.length; x++) {
-      needsText.push(needs[x].innerHTML)
-    }
-  })
-}
-
-// and create other info
-var councilMemberLastName;
-var neighborhoodName;
-
-
-// now, create EMAIL
-function writeEmail() {
-   document.getElementById('emailText').style.display = "block" // reveal text
-   document.getElementById('districtNum').innerHTML = map.location.data.cityCouncilDistrict
-   document.getElementById('councilMemberLastName').innerHTML = lastname;
-
-   // send Concerns to text
-    var str = '';
-
-    for (i = 0 ; i < concernsText.length; i++) {
-      if (i === concernsText.length - 1) {
-        str += 'and ' + concernsText[i].toLowerCase() + '.' // end sentence
-      } else {
-        str += concernsText[i].toLowerCase() + ', ' // use commas in between
-      }
-    }
-
-    document.getElementById("concerns").innerHTML = str;
-
-    // send Reasons to text
-    var str2 = ''
-    for (i = 0 ; i < reasonsText.length; i++) {
-      if (i === reasonsText.length - 1) {
-        str2 += '' + reasonsText[i].toLowerCase() + '.' // end sentence
-      } else {
-        str2 += reasonsText[i].toLowerCase() + ', ' // use commas in between
-      }
-    }
-
-      document.getElementById("reasons").innerHTML = str2;
-
-    // send Needs to text
-    var str3 = ''
-    needsText
-
-    for (i = 0 ; i < needsText.length; i++) {
-      if (i === needsText.length - 1) {
-        str3 += '' + needsText[i].toLowerCase() + '.' // end sentence
-      } else {
-        str3 += needsText[i].toLowerCase() + ', ' // use commas in between
-      }
-    }
-
-      document.getElementById("needs").innerHTML = str3;
-
-    // send text to form
-    document.getElementById('textEntry').textContent = document.getElementById('textDestination').innerText
-
-    sendButton()
-
-    document.getElementById('yourEmail').scrollIntoView({  behavior: 'smooth', // smooth scroll
-    block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
-  });
-
-}
-
-function illWrite() {
-  document.getElementById('emailText').style.display = "block" // reveal text
-  document.getElementById('emailLabel').innerHTML = `Write your email below. We've written up a template - delete the parts in [BRACKETS] and add whatever you'd like.`
-
-  sendButton()
-}
-
-function sendButton() {
-  // var address = districtInfo.Email
-  var address = 'trackingportal@health.nyc.gov'
-
-  var subject = 'Health concerns in district ' + map.location.data.cityCouncilDistrict
-  var body = document.getElementById('textEntry').textContent
-
-  document.getElementById('sendButton').href = `mailto:`+ address + `?subject=` + `${subject}` + `&body=` + `${body}`
-}
-
-function sendEmail() {
-
-
-}
-
-
-</script>
-
-
-{{- end -}}