Tuesday, December 27, 2022

Map marker clusters and more user-friendly UI changes!

A big big thank you to open source developer Leigh Halladay, who published this useSupercluster hook for React:

use-supercluster npm package

use-supercluster Github page

I had been wanting to do map marker clustering using Mapbox and React, but hadn't found a solution until I stumbled on Leigh's library, described here.

This finally allowed me to cluster markers together, allowing me to publish sportsmap.world with a much friendlier interface for mobile users.  I've made additional changes to make the site more smartphone and mobile friendly, as that's the primary experience for most people browsing the web these days!

More UI upgrades since November:

- A better mobile calendar experience, including a dropdown calendar widget to allow you to select a date range, rather than relying on the double-date slider (which is still present for wider screen).

- A filter-by-sport widget, to remove specific sport pins from the map.

- Fast load times & optimized queries, plus a loading spinner while the initial query is in progress

Up next: I want to add way more events. My data source is sportradar; up until now, I've only been able to display events sportradar provides when they have venue information attached.  Many more events from sportradar, e.g. Japanese baseball (NPB) and minor soccer leagues around the world, do not have this venue information attached to their events; but, most of the time we can assume the event is taking place at the home team's stadium, which is discoverable via additional queries.  To make this change, I'll be doing some work on the backend to move to the Prisma ORM, redesigning and adding some tables in PostgreSQL, and writing the logic to try to retrieve and store this additional venue information.  With luck we will see some NPB games on the map next season!

Meanwhile, I'll be diving back into the search for a new full-time job next week.  If you like what you see from the site, check out my LinkedIn profile to contact me.