PermitMap Component

​

Component Structure

export default function PermitMap(): JSX.Element

​

State Management

​

Map State

​

Filter State

​

Data State

​

Map Configuration

​

MAP_STYLE

const MAP_STYLE = {
  version: 8 as const,
  glyphs: 'https://fonts.openmaptiles.org/{fontstack}/{range}.pbf',
  sources: {
    carto: {
      type: 'raster' as const,
      tiles: ['https://a.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}@2x.png'],
      tileSize: 256,
      attribution: '© OpenStreetMap © CartoDB',
    },
    carto_labels: {
      type: 'raster' as const,
      tiles: ['https://a.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}@2x.png'],
      tileSize: 256,
    },
  },
  layers: [
    { id: 'carto-base', type: 'raster' as const, source: 'carto', paint: { 'raster-opacity': 1 } },
    { id: 'carto-labels', type: 'raster' as const, source: 'carto_labels', paint: { 'raster-opacity': 0.6 } },
  ],
};

​

Map Initialization

const map = new maplibregl.Map({
  container: mapContainerRef.current,
  style: MAP_STYLE,
  center: [-73.98, 40.73],        // Manhattan
  zoom: 11,
  maxBounds: [[-74.6, 40.2], [-73.1, 41.2]],  // NYC bounds
});

​

Key Functions

​

loadPermits

const loadPermits = useCallback(async () => Promise<void>, [dateFrom, dateTo])

1. Sets loading to true
2. Calls fetchPermits(dateFrom, dateTo, RESULT_LIMIT) where RESULT_LIMIT = 2500
3. Updates allPermits state on success
4. Sets error state on failure
5. Sets loading to false

​

updateMapDots

const updateMapDots = useCallback((permits: Permit[]) => void, [])

1. Filters permits to those with valid latitude and longitude
2. Converts to GeoJSON Feature collection with Point geometries
3. Attaches properties:
   • color: Job type color from getJobColor()
   • type: Job type code
   • address: Formatted address
   • date: Issued date
   • _raw: JSON-stringified permit object (for click handler)
4. Updates the permits GeoJSON source

​

selectPermit

const selectPermit = useCallback((permit: Permit, map?: maplibregl.Map) => void, [])

1. Updates selectedPermit state
2. Closes sidebar on mobile
3. Flies to permit location with map.flyTo() (zoom to level 15+)
4. Creates a MapLibre Popup with permit details HTML
5. Scrolls the permit list to bring the selected row into view

​

toggleType

const toggleType = (type: string) => void

​

toggleBorough

const toggleBorough = (b: string) => void

​

buildPopupHTML

function buildPopupHTML(p: Permit): string

• Job type label (color-coded with glow effect)
• Formatted address (bold)
• Issue date (gray, uppercase)
• Job description (truncated to 120 chars)
• Estimated cost (if available)

​

Effect Lifecycle

​

Map Initialization Effect

1. Creates MapLibre GL map instance
2. Adds navigation control (zoom buttons)
3. Registers ‘load’ handler that:
   • Adds GeoJSON source: permits
   • Adds circle layer: permit-dots with dynamic radius based on zoom
   • Registers click handler on permit-dots that calls selectPermit()
   • Changes cursor to pointer on marker hover
4. Cleanup function removes map on unmount

​

Data Fetching Effect

1. Calls loadPermits() to fetch new data

​

Client-Side Filtering Effect

1. Type filter: If not all types selected, filter by job_type
2. Borough filter: If not all boroughs selected, filter by borough
3. Search filter: If search query exists, filter by:
   • Address (case-insensitive)
   • Job description (case-insensitive)
   • Owner business name (case-insensitive)
   • Applicant business name (case-insensitive)
4. Sort: Sort by selected field and direction:
   • date: Compare issued_date strings
   • cost: Parse estimated_job_costs as float and compare numerically
   • address: Compare formatted addresses lexicographically
5. Updates filtered state
6. Calls updateMapDots(result) to refresh map layer

​

Sub-Components

​

DetailRow

function DetailRow({ 
  label, 
  value, 
  mono 
}: { 
  label: string; 
  value?: string; 
  mono?: boolean 
}): JSX.Element | null

​

Permit Layer Styling

map.addLayer({
  id: 'permit-dots',
  type: 'circle',
  source: 'permits',
  paint: {
    'circle-radius': ['interpolate', ['linear'], ['zoom'], 10, 3, 14, 6, 17, 10],
    'circle-color': ['get', 'color'],
    'circle-opacity': 0.85,
    'circle-stroke-width': 0.5,
    'circle-stroke-color': 'rgba(0,0,0,0.3)',
  },
});

• Zoom 10: 3px
• Zoom 14: 6px
• Zoom 17: 10px

​

UI Components

​

Sidebar

1. Header: Title + view switcher link to isometric view
2. Date range picker: From/to inputs + quick select buttons (1d, 7d, 30d, 90d)
3. Type filter: Chip grid with color-coded job type buttons
4. Borough filter: Chip row with abbreviated borough names (MN, BK, QN, BX, SI)
5. Search input: Full-text search across address, description, and owner
6. Result count bar: Shows filtered count + warning if capped at 2,500
7. Sort bar: Buttons to sort by date, cost, or address (with asc/desc indicator)
8. Permit list: Scrollable list showing first 500 results (with overflow message)

​

Detail Panel

• Job type header (color-coded)
• Close button
• Address and issue date
• Borough
• Block/Lot
• BIN
• Status
• Description
• Estimated cost
• Owner
• Applicant
• Expiration date
• Filing number (monospace)

​

Map Legend

• NB (New Building)
• DM (Demolition)
• GC (General Construction)
• PL (Plumbing)
• ME (Mechanical)
• Other (gray)

​

Usage Example

import PermitMap from './PermitMap';
import 'maplibre-gl/dist/maplibre-gl.css';
import './PermitMap.css';

function MapView() {
  return <PermitMap />;
}

export default MapView;

​

Performance Considerations

1. Result limit: Caps API results at 2,500 permits to avoid performance issues
2. Client-side filtering: All filters (type, borough, search, sort) run in the browser after data fetch
3. List truncation: Only renders first 500 permits in the sidebar list (with overflow message)
4. GeoJSON source: Uses MapLibre’s native GeoJSON rendering for efficient marker display
5. Dynamic circle radius: Uses MapLibre expressions to scale markers with zoom level
6. Memoized callbacks: Uses useCallback for loadPermits, updateMapDots, and selectPermit

​

Differences from Isometric View

​

Dependencies

• react - Core React library
• maplibre-gl - Open-source map rendering library
• Custom utilities: fetchPermits, getJobColor, getJobLabel, formatAddress, formatDate
• Permit type data: ALL_JOB_TYPES, ALL_BOROUGHS, WORK_TYPE_LABELS, WORK_TYPE_COLORS

​

See Also

• App Component - OpenSeadragon isometric map view
• Permit Data - Data fetching and formatting functions