ฝัง
- เผยแพร่เมื่อ 27 ก.ค. 2024
- Protomaps[0] is an open source map of the world, deployable as a single static file on Supabase Storage[1].
- Read the blogpost: supabase.link/protomaps-stora...
- Find the code: supabase.link/protomaps-stora...
Presented by Thor Schaeff (@thorwebdev go.thor.bio/x)
[0] protomaps.com/
[1] supabase.com/storage
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:
▶ • Getting started with P...
▶ • Make your queries 43,2...
▶ • Faster queries with in...
👇 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 #DeveloperTools #maps #protomaps #MapLibre - วิทยาศาสตร์และเทคโนโลยี
Thanks for tuning in! Make sure to check out the blogpost: supabase.link/protomaps-storage-blog and the example code: supabase.link/protomaps-storage-gh !
this was very useful ... thank you!
Yay, glad to hear that. Thanks for the kind words \o/
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
awesome stuff.
Thanks for the kind words :)
@@Supabase yeh these are good practical examples. i have a side project this is perfect for. this helps so much.
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.
Yay, nice, stay tuned for next week! You’ll be in for a treat 🙌
In case you haven't see, this is out now: th-cam.com/video/EdIkmp5Yj7I/w-d-xo.htmlsi=fHWnVF3gvnG4fQVt
@@Supabase Nice, that's exactly what I'm interested in. Well played guys, well played. Let me test it out. Thanks!
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
Yes, for more complex insertions like this you'd set up an RPC, similar to this here: supabase.com/docs/guides/database/extensions/postgis?queryGroups=database-method&database-method=sql&queryGroups=language&language=dart#finding-all-data-points-within-a-bounding-box
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
You can host it anywhere that can fulfil these requirements: docs.protomaps.com/pmtiles/cloud-storage#concepts
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?
You can do this with PostGIS in Supabase. See an example here: th-cam.com/video/EdIkmp5Yj7I/w-d-xo.htmlsi=AxcC3t2L3hKuuUNp
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.
Yes, that's fair feedback, currently you can either make the bucket fully public or fully locked down. We'll be adding more granular CORS settings for Storage in the future. For the time being you can proxy through Edge Functions to get the highest flexibility of managing access but it comes at the cost of the additional complexity.
*pronounces Utrecht like a Dutch person... "wonder why there is a box around a Dutch city"...
Nah, I’m butchering the name. Apologies to all Dutch. It’s been a while since I’ve lived in your beautiful country! 😅