The Pavement Condition Index (PCI) is a numerical rating system used to assess the condition of road
surfaces based on their distress levels. This index helps city planners prioritize road maintenance and
improve transportation infrastructure. This map visualizes PCI scores across San Francisco, allowing users
to see areas requiring attention. Tap the markers for PCI scores and rating dates. Max results 2,000 of
20,000.
Excellent (85-100)
Good (70-84)
At Risk (50-69)
Poor (25-49)
Very Poor (0-24)
Blocks and Intersections:
Features
Tap the marker to see the block's PCI score and rating date.
Zoom in and then select a 'PCI Score' or cumulative score to see a neighborhood's street conditions.
Pan while zoomed, then tap 'Search Area' to refresh the street conditions in the zoomed area.
'Worst Streets' is the top 50 streets with the most blocks rated 'Poor' or 'Very Poor' (0-49), sorted by
the most blocks descending, listed next to the street name in the dropdown. This list is queried upon
page load.
Select 'All Worst Streets' from the 'Worst Streets' filter to see the streets most impacted.
Select 'Poor or Worse' from the 'PCI Score' filter to see all SF streets with a 'Poor' or 'Very Poor'
rating (0-49).
Select 'Poor' from the 'PCI Score' filter to see SF streets rated with a PCI of (25-49).
Select 'Very Poor' from the 'PCI Score' filter to see the worst-rated streets in SF with a PCI of
(0-24).
Enter a street name to see an entire street's ratings (0-100), and then filter by 'PCI Score' as
desired.
Select a street from the 'Top Streets' filter to see an entire street's ratings (0-100), and then filter
by 'PCI Score'.
'Top Streets', as chosen by Claude AI, includes the most traveled streets and neighborhood streets from
all 11 districts.
Max results of 2,000, so filter accordingly. There are 20,000 blocks and intersections.
State highways that run through San Francisco are not PCI rated or shown.
Hit 'Reset' to clear all filters and set the 'PCI Score' filter to 'Poor or Worse'.
Result count is listed under the map. If it hits 2,000, zoom or choose more filters.
Development
Purpose
Explore AI tooling for development.
Rapidly create a micro app through idea, development and deployment using AI tools.
Perform something useful for San Francisco.
AI Code Generation and Engineering Chat
ChatGPT (web and app) using variants GPT-4 Turbo, GPT-4o and GPT-4o mini.
Claude AI (web and app).
Ollama running open source Llama 3.1 locally both command line and via VSCode + CodeGPT.
Cursor AI based on the VSCode IDE with native integration for accessing Claude AI, GPT-4o, and GPT-4o
mini for inline code generation and refactoring while easily reviewing the code diffs to accept or
reject. Ability to challenge the model code changes inline to iterate to chosen functionality. Next
level AI tab completion. Ability to select a different model to compare competing code generations.
Once code base begins to grow, the web based chats become inferior to IDE AI integration making Cursor
the winning approach.
Code
The code was entirely produced by AI with slight manual modifications. This is a single page micro app using
HTML, CSS and client side JavaScript calling the DataSF API. The Bootstrap framework was chosen to help
rapidly develop a basic UI that was responsive and tested across 3 display sizes: iPhone, iPad, and desktop.
OpenStreetMap was used for the map with Leaflet for the markers and positioning. Searching within the bounds
of the map was instrumental, and although DataSF's API on Socrata SoQL offers the within_box() function, it
was unusable due to the data source not providing a location data type to search on. A simple query using
the data source's latitude and longitude fields was used instead to search within the bounds of the map.
Implementation of the colored pins and adjusting the map's zoom levels to snap to multiples of 0.25 while
fitting the bounds of the map to the results was key to making the map useful. For local network testing on
iPhone and iPad, a Python http server was used to serve the HTML on a MacBook Pro.
Deployment
AWS Route53 and EC2 Ubuntu t2.micro instance (free) running NGINX web server. AWS Q AI
chat was employed in technical discussions. It was completely deployed from domain registration to serving
in a few hours.
Data Source
San Francisco Department of Public Works via DataSF. DPW contracts a vehicle to drive
city streets and take photos of the streets and later manually rates these streets. Most PCI scores were
updated in October 2023. DPW states this is done yearly. PCI scores prior to 2018 are ignored and considered
inaccurate. The dropdown of 'Worst Streets' is dynamic, and any updates to PCI scores will be reflected in
this list.