Using the power of Postgres and Supabase Realtime[0] we can easily draw our live location onto the Map using MapLibre GL JS. In this example, we're using the live location shared from a Telegram bot to a Supabase Edge function to insert the location data into the database. Subsequently Supabase Realtime is broadcasting the location updates to any connected web JavaScript client via WebSockets.
- Read the blogpost: supabase.link/realtime-maps-blog
- Find the code: supabase.link/realtime-maps-gh
🎙️ Presented by Thor Schaeff (‪@thorwebdev‬ go.thor.bio/x)
CHAPTERS:
00:00 Intro to Supabase Realtime
00:40 Example project intro
01:01 Enable the PostGIS extension in Supabase
01:30 Creating the SQL Schema
02:22 Create a RPC to insert location data via supabase-js
03:41 Enable realtime replication on the database table
04:38 Insert Telegram live location via an Edge Function
05:39 Set up a client-side realtime listener with supabase-js
08:56 Live location sharing demo on localhost
💻 Videos to watch next:
▶ • Self-host Maps with Pr...
▶ • Open Source Google Map...
▶ • Getting started with P...
👇 Learn more about Supabase 👇
🕸 Website: supabase.com/
🏁 Get started: app.supabase.com/
📄 Docs: supabase.com/docs
🔔 Subscribe for more tutorials and feature updates from Supabase: / @supabase
📱 Connect with Us:
🐙 Github: www.github.com/supabase
💬 Discord: www.discord.supabase.com/
🐦 Twitter: / supabase
▶ Instagram (follow for memes): / supabasecom
ABOUT SUPABASE:
Supabase is the open source Firebase alternative. Supabase provides a full Postgres database for every project with pgvector, backups, realtime, and more. Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.
Build in a weekend, scale to millions.
#Supabase #AppDevelopment #RealtimeApps #DeveloperTools #maps #gis #postgis