The Map

An interactive CARTO map allows users to discover Members and Districts, no matter which page of the site they're viewing. Clicking on the map or searching an address opens a popup with information about that District.

Map Scripts

The wp-nycc theme concatenates all of its JavaScript into scripts.js and scripts.min.js via Gulp. However, the map scripts are not included in this concatenation. Instead, the following PHP files add inline JavaScript in the footer:

• wp-nycc/map_scripts.php - loaded on every page of the site via footer.php
• wp-nycc-district/pb-map-scripts.php - loaded when viewing a District's Participatory Budgeting page

These files contain JavaScript that's generated dynamic via PHP. This is so that the JavaScript can loop through WordPress data to get popup info, PB info, etc.

Note: The "Map Toggler" function, which expands the height of the slim map on non-District pages, is located in wp-nycc/app.js.

How the scripts work

• If a Council Member or District page is currently being viewed, we set a $districtNumber variable.
• We define all the popup data in a popupData object by looping through all the District pages (via php) and setting properties in the object. Fallback properties are set for vacant Districts.
• The getPopupInfo() function fetches the right popup info from the popupData object
• The District boundaries are added to the map with a raster tile sublayer via CARTO SQL query.
• If we're on a District/Member page ($districtNumber variable is set), we add a feature layer for the current District via CARTO SQL query.
• When you click the map, we send an SQL query to Carto to determine in which District is the clicked latitude/longitude. Then we open the popups with the correct info from the popupData object.
• The address lookup is a custom Leaflet control. It uses the NYC Geoclient API to get Council District info. When the user submits the form, we get values in the form and request the latitude, longitude, and Council District from the API. We then use that to open the popups on the location with the correct info from the popupData object.