Adventures in self-hosted mapping
Suppose you wanted to plot a few markers on an interactive world map and display them on your website. How would you go about it? That was a question I asked myself recently as I was thinking about the implementation of my snowboarding travel page. I wanted something like Google Maps, but definitely not Google Maps; something meaningfully self-hosted, but also not too complicated or brittle; something that looks and feels natural to visitors of my site, but was also relatively easy to implement. Since these are all pretty sketchy requirements, they naturally led me down an interesting and insightful rabbithole of web-based mapping. So relax, sit back, grab a beer, and let's look at some code.
Obviously, the first thing you get when you put "embed a map on your website" into Google is a link to the Google Maps Embed API. I'm sure that this is very useful, but I don't want to be beholden to Google and I don't want to add an external dependency to my website. If Google decides to change the API, I will have to change all of my code, and maybe this happens during an inconvenient time or I forget to migrate all of my code in time and then I have a broken website. Not great. So Google is out. What else is out there?
I found Leaflet, which looks awesome. "An open-source JavaScript library for mobile-friendly interactive maps". Perfect! I sorta like JavaScript (now that I dipped my toes into it while building my Emoji reaction button feature) and the screenshot looks exactly like what I imagine when I think "embed a map on my website:"
