Photos to Map Pins

Teaches: how GPS metadata is embedded in image files · what vibe coding looks like in practice · how to turn a personal collection into a public-facing dataset
You gain: extracting GPS metadata from image files · building a map visualization with AI-assisted coding · presenting geolocated data in a public-facing format
You'll need: GitHub Copilot, GitHub Pages
Format: less than 1 hour · any

The process described here produced the website Cats of Marrakech. It took less than an hour from downloading the images to a laptop to a live map with clickable pins. The workflow requires no prior coding knowledge and generalizes to any collection of geolocated images — field photographs, pilgrimage routes, urban documentation surveys.

The Workflow

During Spring Break, I traveled to Marrakech and photographed street cats throughout the medina. With location services enabled in the phone’s Camera app, GPS coordinates were embedded in the metadata of every image. By the end of the trip, I had over 200 photos — and 200 precise locations.

After copying the photos into an assets/images folder in a GitHub repository, I described the goal to GitHub Copilot in plain language. Copilot wrote all the necessary code: a YAML data file extracting GPS coordinates from each image’s metadata, and an updated map.html that reads that file and places a clickable pin for each photo. No manual data entry, no coordinate lookup, no JavaScript written by hand.

The Prompt

prompt to give to Copilot Please create a new YML file in the _data folder that lists each the images in assets/images. The YML file should include geographic location extracted from the metadata of each image. Then edit map.html so that the map uses the newly created YML file. The overall goal is to have a pin on the map for each of the photos, and when a user clicks on the pin, the image appears.

Why It Matters

Expanding understandings of human geography through dense, localized image collections.
Reconstruction of pilgrimage journeys or migration routes from photographic evidence.
Experimenting with point of view and perspective by mapping where documentation happens.
Quickly capturing histories of urban development, neighborhood change, or informal space.
Transferring research findings into a public-facing format accessible to non-specialist audiences.

What to Watch For

Geolocation data from phones is sometimes imprecise at the street level. Photos taken inside buildings may have pins placed across the street or several meters off. This is a limitation of phone GPS rather than the workflow itself — but it matters if spatial precision is central to the research question.