This application generates an animated SVG world map with locations of active users of Roombelt. The map is embedded into https://roombelt.com in the "social proof" section to prove that the product has real world usage.
You can easily create similar map for your product by following the steps below.
- Star this repository 😜
- Create a Vercel account.
- Get a Redis instance. I use Upstash but any modern Redis server would do.
- Create a new Vercel project with the following environment variables:
REDIS_URL,REDIS_PASSWORDandREDIS_PORTthat define connection to the Redis database.TOKENis a secret that you will use to report users' activity to the map.
- Clone this repository.
- Deploy this repository to Vercel with Vercel CLI or git.
Single server can serve multiple separate maps. I use only https://maps.roombelt.com/roombelt.svg but other addresses like https://maps.roombelt.com/example.svg or https://maps.roombelt.com/subscribers.svg could be used as well.
The map contains up to 100 locations of clients active in the last 30 minutes. To change the limits modify this line.
Reporting user activity from your back-end is as simple as sending a POST request with a valid authorization header and the reported ip address in the payload. This is how I do it in the Roombelt backend:
await axios.post(
"https://maps.roombelt.com/roombelt.svg",
{ ip: clientIp },
{ headers: { Authorization: `Bearer ${process.env["TOKEN"]}` } }
);The idea was inspired by Clever Cloud dashboard activity map. The map generation code is based on https://github.com/NTag/dotted-map.
I am looking for teammates in my daily job. If you're really strong in React and live in CEST +/- 3h let me know at mateusz.zielinski@spartez-software.com.
If you use the activity map on your site let me know at mateusz@roombelt.com and I will add a link here.