This interactive map visualizes administrative divisions of the United States, including all states and their respective counties. The application is built using modern JavaScript mapping libraries and integrates external datasets to enhance interactivity and data display.

Technologies Used:

  • Mapbox GL JS – For rendering the interactive map with vector tiles and supporting 3D effects.
  • Turf.js – For spatial operations like bounding box calculation and centroid extraction.
  • Google Sheets API – Used as a simple backend for dynamic county-level data.
  • jQuery – For compatibility and simplified data handling.

Key Functionality:

  • Vector Tile Sources: The map loads separate Mapbox vector tile sources for states, counties, and label points.
  • Zoom & Rotate Interaction: Users can click on a state to zoom in, tilt, and rotate the view for a more immersive experience.
  • Hover Effects: When hovering over states or counties, the map highlights them dynamically using setPaintProperty.
  • Popup with Data: A Popup displays county-level data fetched from a connected Google Sheet based on FIPS code matching.
  • Responsive Navigation: The map automatically adjusts its viewport using fitBounds and calculates padding dynamically based on container width.

Data Content:

The map displays the U.S. states and counties, sourced from custom Mapbox vector tilesets. Supplementary data for each county is retrieved in real-time from a public Google Sheets document, which acts as a lightweight, cloud-hosted database. This allows for flexible updates without modifying the core code.

If you are interested in collaborating or have any questions, you can contact me on this page – Contact me