Self-host Maps with Protomaps and Supabase Storage

Protomaps[0] is an open source map of the world, deployable as a single static file on Supabase Storage[1].

CHAPTERS:
00:00 Intro to Protomaps
00:46 PMTiles file format
01:10 Protomaps PMTiles MapLibre example
01:24 Protomaps tooling Quickstart
02:01 Use the PMTiles CLI to cut out an area from Open Street Maps
03:32 Create a new Supabase Project
04:03 Create a new public Storage Bucket
04:51 Configure MapLibre GL to work with the Protomaps Protocol
06:20 Configure MapLibre GL to load vector tiles from Supabase Storage
06:54 Demo of HTTP Range Requests on Supabase Storage
08:48 Security consideration for Supabase Storage
09:09 Proxy through Supabase Edge Functions to restrict access
10:35 Access private bucket storage objects
11:07 Deploy the Supabase Edge Function
11:13 Link your local Supabase project
12:18 Create a private storage bucket
12:48 Load map through Edge Function on the client

💻 Videos to watch next:

👇 Learn more about Supabase 👇

📱 Connect with Us:

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 #DeveloperTools #maps #protomaps #MapLibre

[rembautimes]

Nice functionality. Good to see polygons defined on maps like the us state boundary and link that to a query on supabase. I used to be able to demo a dynamic google map query from a dashboard, but probably requires some geolocation encoding on the fly

[reni_christian]

How can we add custom markers like shop, hospitals and all, which we first store at Supabase database and then show them in maps? Is it possible with protomaps?

[monostorizsolt]

Hi, great news, i wonder is there a solution to utilise Supabase's postgis in flutter flow? Create polygin and save it to database, and simmilar 2 direction intersctivities

[hodev]

Can we statically host in on the Apache2 server or IIS ? Or does it have to be supabase for a specific reason? Thanks for the great tutorials

[ryujigtr]

Can you do a tutorial about using a CDN to serve our bucket from different region thank you

[szymdzum]

Hey, Im into maps as well. Cool tutorial you have a sub. What I would be interested in is building UIs for interacting with maps. Adding Markers with some data by the user, geolocating nearest markers, filtering etc.

[clementmmas]

Great video. You lost me at the Edge function though. If I can’t whitelist domain names or add CORS rules on the bucket then it feels like a half done solution.

[vdynmx]

*pronounces Utrecht like a Dutch person... "wonder why there is a box around a Dutch city"...