Building an NYC Sandwich Map with AI: Scraping, Geocoding, and Web Publishing

In the bustling streets of New York City, finding the perfect sandwich can be a daunting task. When The New York Times released their “57 Sandwiches That Define New York City” feature, one data scientist saw an opportunity to make these culinary treasures more accessible through technology.

The Challenge: From List to Interactive Map

The beautiful New York Times feature showcased 57 iconic NYC sandwiches with stunning photography, but navigating this collection on the go proved cumbersome. Scrolling through the entire list while walking the streets of Manhattan isn’t practical, especially when trying to determine if any great sandwich spots are nearby.

The vision was clear: transform this curated list into an interactive map where sandwich locations appear as markers, making it easy to find nearby options while exploring the city.

Web Scraping: Extracting the Data

The first step was extracting structured data from the New York Times website. While large language models like ChatGPT can help with code, they can’t directly scrape websites behind paywalls. Instead, a manual inspection of the page source revealed consistently named HTML classes for key elements:

• Class “sandwich-name” for sandwich names (57 occurrences)
• Class “restaurant-name” for restaurant names (57 occurrences)
• Class “metadata” for address information (56 occurrences, with “Your Nearest Bodega” lacking a specific address)
• Image classes for the sandwich photos

With these class identifiers, ChatGPT could provide the appropriate Beautiful Soup code to extract the data. The extraction process involved:

1. Using Beautiful Soup to parse the HTML
2. Finding all elements with the identified classes
3. Extracting text content from each element
4. Special handling for images (selecting only the larger versions)

The structured data was then organized into a pandas DataFrame with columns for sandwich names, restaurant names, descriptions, and images.

Data Cleaning and Processing

The extracted data required some cleaning, particularly the “metadata” column which contained address, price, and website information combined in one string. This was addressed by:

1. Splitting the metadata on commas to separate address, price, and website
2. Using regular expressions to extract price values
3. Creating new columns for each piece of information

This resulted in a tidy dataset with each variable in its own column and each row representing a single sandwich.

Geocoding: Putting Sandwiches on the Map

To create a map, latitude and longitude coordinates were needed for each sandwich location. The Google Maps API provided this geocoding functionality:

1. For standard addresses, the API directly converted addresses to coordinates
2. For entries with multiple locations (like chain restaurants), a secondary approach was used, searching by restaurant name
3. The results were validated to ensure accuracy

This two-step process successfully geocoded all 57 sandwiches, even handling the special case of “Your Nearest Bodega.”

Creating the Map Interface

The map interface was built using HTML, Bootstrap, and the Google Maps JavaScript API. Key features included:

• A full-screen mobile-responsive map
• Custom sandwich markers using the sandwich images
• Bootstrap modals that appear when markers are clicked, displaying sandwich details
• Links for directions and restaurant websites

To improve the visual appeal, background removal was applied to the sandwich images using the Image Pig API, creating more distinctive markers that stand out on the map.

Publishing the Map

The finished map was published using GitHub Pages with a custom domain (www.iconicsandwiches.com). This process involved:

1. Setting up a GitHub repository with the HTML, CSS, and JavaScript files
2. Configuring GitHub Pages
3. Creating the necessary CNAME file and workflow configurations
4. Setting up domain DNS records

The result is a publicly accessible, mobile-friendly map that makes finding iconic NYC sandwiches much more convenient.

Reflections on AI as a Coding Partner

Throughout this project, AI tools like ChatGPT served as a pair programming partner. The experience revealed several insights:

• AI excels at generating boilerplate code and handling syntax details
• For specific tasks like regular expressions, AI can provide elegant solutions
• AI works best when given clear, specific instructions based on domain research
• Human oversight remains essential for quality control and problem-solving

While AI couldn’t autonomously build the entire sandwich map (it can’t create new knowledge from scratch), it significantly accelerated development by handling routine coding tasks and offering solutions to specific challenges.

Next Steps

Future improvements for the sandwich map could include:

• Optimizing image sizes for faster loading
• Adding filters to identify vegan and vegetarian options
• Improving the quality assurance for locations
• Adding user contribution features

This project demonstrates how combining web scraping, geocoding, and interactive maps can transform a simple list into a practical tool for exploring New York City’s diverse sandwich landscape—with AI serving as a helpful assistant throughout the development process.