SettingsStateMap

SettingsStateMap Component

Overview

The SettingsStateMap component provides an interactive map interface for state selection in the settings panel, featuring zoom, pan, and click-based selection capabilities.

Technical Details

Component State

interface MapState {
    dimensions: {
        width: number;
        height: number;
    };
    zoomLevel: number;
    initialTransform: d3.ZoomTransform | null;
}

Props Interface

interface SettingsStateMapProps {
    containerRef: React.RefObject<HTMLDivElement>;
    svgRef: React.RefObject<SVGSVGElement>;
    gRef: React.RefObject<SVGGElement>;
}

Key Functions

Map Initialization

const initializeZoom = useCallback(() => {
    // Zoom behavior configuration
    zoomBehaviorRef.current = zoom<SVGSVGElement, unknown>()
        .scaleExtent([1, 8])
        .on("zoom", (event) => {
            g.attr("transform", event.transform);
        });
});

Map Rendering

const renderMap = useCallback(() => {
    // Map projection setup
    const projection = d3.geoAlbersUsa()
        .fitSize([dimensions.width, dimensions.height], 
                {type: "Sphere"});
    
    // Path generator
    const path = d3.geoPath().projection(projection);
    
    // State rendering
    states.selectAll("path")
        .data(topojson.feature(us, us.objects.states).features)
        .join("path")
        .attr("fill", "#252a33")
        .attr("stroke", "#5c636b");
});

Event Handlers

interface MapEventHandlers {
    handleClick: (event: any, d: any, path: any) => void;
    handleReset: () => void;
    updateDimensions: () => void;
    detectZoomLevel: () => void;
}

Features

Zoom and Pan

• Smooth zoom transitions
• Pan constraints
• Zoom level limits
• Auto-reset functionality

State Selection

• Click to zoom
• Visual feedback
• Auto-zoom out
• State highlighting

Responsive Design

• Dynamic sizing
• Window resize handling
• Device pixel ratio detection
• Viewport adaptation

Styling

Map Elements

.state-path {
    transition: fill 0.3s ease;
    cursor: pointer;
}

.selected-state {
    fill: white;
}

Container Styling

const containerStyles = {
    minHeight: '240px',
    maxHeight: '360px',
    position: 'relative'
};

Usage Example

function StateSelector() {
  return (
    <div className="state-selector-container">
      <SettingsStateMap />
      <button className="reset-button">
        Reset View
      </button>
    </div>
  );
}

Performance Optimization

• Memoized callbacks
• Efficient zoom handling
• Optimized state updates
• Controlled re-renders