Creating maps to share the coffee shops I have visited
Published on under the IndieWeb category.
Maps were a dominant topic at yesterday’s Homebrew Website Club London / Europe online meetup. I am not knowledgeable on maps so I sat back for a lot of the discussion and listened to others share their thoughts. In the meeting, we discussed everything from using maps on one’s personal website to the inaccuracies of some country paths in the UK on open maps.
On the Homebrew Website Club call, I learned about Leaflet. Leaflet is JavaScript tool that works with OpenStreetMap to let you create a map with custom plots. OpenStreetMap is an open source map to which anyone can contribute. It has an extensive set of data. For instance, OpenStreetMap documents the location of businesses. This is a key use for me because I wanted to be able to map coffee shops.
Learning about Leaflet answered one of the questions I have had in the back of my mind for a while: how do I make a custom OpenStreetMap layer with my own data points? After the meetup, I perused the documentation and began work on a map of coffee shops I have visited.
Such a map of coffee shops has three goals:
- To let me see and reflect on all of the shops I have visited to and enjoyed.
- To make it easy for me to share recommendations with others that they can save for later.
- To allow me to advance my knowledge of maps.
I started by experimenting with Leaflet. To get started, one needs to:
- Import the project JavaScript library.
- Set up a custom CSS rule for showing the map.
- Initialise a map with a set of starting coordinates and a Zoom level.
I found this starter template useful as I made my first map. I would recommend reviewing that page and trying it out for yourself. You’ll need to copy the code in the “leaflet-providers.js” file in the root of the project repository for the code to work. Otherwise, you will receive an error. Also, I recommend reading the official Leaflet Quick Start guide. I found the official documentation easy to understand and immediately actionable for creating my first map and data points.
I got started by creating a map and by adding a datapoint. Then, I made a list of coffee shops I had visited in the UK. Each coffee shop has four values:
- Latitude
- Longitude
- Coffee shop name
- City in which the coffee shop is based
I wrote all of these datapoints in a CSV file where I can collect all of the locations of coffee shops. I use the “coffee shop name” value as a custom label on top of the map. The “city” value to allows me to only show coffee shops in a certain city on a map. To collect this data, I spent a lot of time in OpenStreetMap. I used their search feature to find each cafe I had visited in the cities I had been in during 2021 and 2022. This took a bit of trial and error. Some cafes were not listed (and so I will need to figure out how to add them). Some cafes with the word “and” would not register unless I used a “+” sign.
While I built the CSV file, I wrote a Python script to convert the CSV file into KML data. This is because I wanted to provide a standard, downloadable data source for each of my maps. This would be useful if someone wanted to extend a map I had already built. Also, KML files can be imported into maps tools like Google Maps, allowing someone to take the map on my website and import it into a map tool they already use.
After writing the KML conversion script, I added some integration with my static site generator. This integration lets me take data on each city and plot it on a map. My generator takes a dictionary of cities and cafes and adds the dictionary to a global variable that can be read on any page. I then manipulate this data in my site templates so that I can show maps for each city. I also created an aggregate “UK” map that collates data on all of the cafes in the other maps.
Thus far, I have created guides for Manchester, York, Edinburgh (and surrounding areas I have visited), Glasgow, and London. These maps are all listed on my “Coffee Shop Maps” web page.
The maps are not “complete”. If I visit a new coffee shop in a city that I think is worth recommending, I will add to the map. Some coffee shops are not on the map because they are not yet in OpenStreetMap. I want to contribute to OpenStreetMap so I can add the cafes to my custom maps. Also, I cannot remember the name of some cafes I have visited. I see the maps as organic and open to change over time.
If you find yourself in any of the aforementioned cities, check out my coffee recommendation maps! Each map comes with the name and location of the coffee shop. There is also a handy QR code on each page so that you can easily open the map on a mobile device if you are viewing the site on desktop.