This is a small creative project made by Jonathan Seyfried, a PhD candidate in History at the University of New Mexico. For Spring Break in March 2026, I traveled to Marrakech. As my travel buddy and I walked around the medina, I saw cats everywhere and couldn’t stop myself from taking pictures of them all.
This site also demonstrates the power of using Copilot with GitHub. I copied the photos into a new folder in assets/images and then Copilot was able to create all the code necessary for making the cat photos into pins on the map. I have one year of experience using GitHub Pages and I knew nothing about markdown in January 2025. Check out Xanthan to see more about how to do websites like this!
Below I have pasted my prompt and the summary from Copilot of its steps to create the map. Please note that I had made an assumption that cards would be the best way to arrange the data. Copilot focused on what I state as the overall goal and ended up choosing to create a separate YML file in the _data folder and this was a much better way to go. So, not only did Copilot succeed in generating what I wanted on its first try, but it knew that my idea of the process was not the most efficient way. If you are interested in creating a website like this using Xanthan, I would suggest that you do NOT copy-paste this exact prompt.
On this page, please create a card for each of the images in assets/images/marrakech-cats. The card should include geographic location extracted from the metadata of each image. Then edit map.html so that the map uses the newly created cards instead of getting geo location from YAML headers. The overall goal is to have a pin on the map for each of the photos, and when a user clicks on the pin, just the image appears.
There are about 200 images. I need to extract GPS coordinates from their EXIF metadata. Let me create a Python script to do this. All 208 images have GPS data extracted successfully. Let me verify the generated YAML file: Now I’ll update the map include to support image-only popups from the data file: Now I’ll make a comprehensive update to support the cat-images data source: Done! Here’s what I implemented:
The map now shows a pin for each of the 208 cat photos in Marrakech. When you click a pin, a simple popup appears showing just the cat image. The existing page-based map functionality is preserved for other uses via the data_source parameter.
This site was built with the Xanthan framework, a free, open-source toolkit for academic websites hosted on GitHub Pages.