Hey all, let's talk about maps!
TL;DR If you don't want to read the story behind our new maps, simply check out the new maps here!
As you probably know, Pinside has various pages where we use maps to visualize things like Pinsider locations, "where to play" locations, classified ads, and business locations etc. Especially our pinball "where to play" map is very popular amongst traveling Pinsiders.
To display these maps, we've been using Google Maps since, well, forever. Their API allowed us to embed those cool Google Maps on Pinside, essentially at no cost (well, there were usage limits, but we managed to stay below them).
Until two months ago, when I received an e-mail from Google announcing some big changes to their Maps API products. And by big, I mean shocking. They were introducing a new pricing structure and at the same time reducing the number of free map loads I could perform from around 25,000 daily to 28,000 *monthly*. Yes, that's monthly! I used their calculator to get an estimate of my monthly costs, entering our current usage numbers (see screenshot) .... Ouch!
Now, don't get me wrong, I think Google Maps is an amazing product. But these are prices that Pinside simply doesn't have the budget for. And to make matters worse, the new pricing was to go into effect in a month, on June 16th. Which left me one month to find an alternative maps provider AND and rewrite all of our mapping code (luckily, this period was later extended by another month as even Google realized that a month was fairly unreasonable).
So I went looking for alternatives. Plenty of other companies offering maps products, but I quickly learned that a) they all cost serious money with the pageviews were generating and b) none of them were exactly what I was looking for. Plus I would have to rewrite all my maps code again - and for how long until that company would increase their prices? Change their APIs? Disappear?
It dawned on me that the only good solution would be to build my own
I found this cool open source project called Mapbox-gl, which uses WebGL to display vectorized map data. I then set up a beefy web server and set up a map tiles generator (thanks to https://switch2osm.org/), powered by data from the OpenStreetMap project. Then I started designing a base map and implemented the Pinside API to get locations to display as blue and purple dots on that map:
Look at those dots! When fully zoomed out, the map currently displays 12,685 Pinsiders and 8,120 locations (totaling 97,813 pinball machines). Yup, Mapbox-gl is pretty awesome. After several weeks (long days, lots of coffee) I got everything working fairly smoothly(*) and I even managed to implement our game search filter. Cool!
(*) I say "fairly smoothly" because WebGL is fairly heavy on the CPU, so some older computers may not play so nicely. An alternative in the form of raster maps is something I'm looking into as well as it will play nicer with older/slower computers and phones.
The result is now ready for you all to enjoy. It's still in beta but since the Google maps will stop working in 3 days from now (July 16th), it's better than nothing
Some final points:
- due to the time constraints, this was all not tested extremely well. Hence the "beta" tag!
- first map load might be kind of slow as a lot of the main data (base map, scripts, styling) will need to be cached by your browser
- if you experience slow/sluggish scrolling or zooming, bear with me as I'm still optimizing stuff (plus our CDN still needs to cache the map tiles for you locally).
- the plan is to add Biz and Classified Ads to the map too.
- I will be replacing all instances of Google Maps with our own Pinside maps within the next days.
Check it out: https://pinside.com/pinball/map/mapbox
I hope you like the update! Got ideas or suggestions for improvement? Things to add to the map filter? Spotted a bug? Let me know!