Creating the “Map” page

Click here to see the map (you will stay on this page)

I've been making a lot of edits to this site recently – I'm trying to make it so that it's easier to see more data more quickly. The value of the site for me is being able to see large amounts of data at one time, which I can do because I have context of the site. Other people do not have this context. One of the solutions to this was to add popups. Another one that I've wanted to do for a while was adding an interactive map that shows my images sorted geographically. This is the map.

I knew I wanted to make the display a map because that's what I assume is the easiest and most familiar for the user. Map Libre is a really great open source tool that made it easy to style this component in my site's style.

Next I needed to find all the places I had been based on my tags. One thing that I had considered was just trying to add these all in manually, but I decided that was too error prone, so instead I wrote code to do it. First I downloaded a massive file of every city/ town/ village/ community in America with census data. Then I exported a list of every single image tag on my website, and I "merged" the two datasets by name to find all of the places that I could have possibly been. Of course this produced massive amounts of false positives. For example there is a street called "Ashland" in Chicago that I've taken pictures on. Ashland is a common name for towns, so the stupid merge assumed that I had been to Ashland Alabama, Ashland California, Ashland Illinois, etc. etc.

To resolve this I took this dumb data as input and vibe coded (in one command) a simple vanilla js/html application that took all of these "dumb" inputs and turned them into checkboxes on a page. It looks like this:

By default I have none of the checkboxes selected and I went through and in 10 minutes I was able to select all of the right cities that I had actually been to. I included an export button that exported only the checked cities and voila, I had a huge list of cities that I had been to all over America and their lat/long coords from the census data.

The export file is just a simple json file that contains information on the place, coords, and the corresponding tag name (which isn't always obvious. Tag "chicago" and place "Chicago" are easy enough to find together, but tag "sf" and place "San Francisco" isn't. In the past I've relied more heavily on sql to render data on the website, and I thought about doing this, but I dont like that in this case because the data doesn't really need to be updated that often to get an idea of the places that I've been. If I ever do a big road trip, after the roadtrip I can re-generate the json file and upload that. I also don't want to get into a situation where people are requesting this massive list of places every time they open the map component. I've also just generally become more averse to making api/sql calls lately. They're slow and especially for a blog probably too complicated. Something to think about for possibly refactoring the trends page as well which is slowwww.

So then the question is how will I update this json file after a big road trip? The solution I came up with was to create another vibe coded mini-app that takes that same exported file that came from the checkbox app, and run it into a map app that also imports the census data so that I can add and take out places. I have a little "add place" button in the top right of the screen that I can press which opens up a modal that allows me to input a place, have the place autosuggested, and allows me to add the tag name. This will add it to a buffer, and if I press "export" it will add this new city to the json file. Then I supply that new json file in my website, and a new lat/long point comes up on the map. This point corresponds to a tag, and if you click on that point, then we open up the images that correspond to that tag in one of our aforementioned popups. That app looks like this:

I'm considering adding in more detailed maps to cities like LA, Chicago, SF where I spent time in a bunch of different neighborhoods, and also adding a "time" slider so that you can see where I've been over time, but that's a lot more data intensive, and will take much more time than this took (1.5 afternoons).