search

radical-data / queering-the-map

Queering the Map is a community-based platform where individuals anonymously pin their queer experiences and stories on a global map.
https://queeringthemap.com
18 stars 6 forks source link

Set up Protomaps tile server #10

Closed jokroese closed 5 months ago

jokroese commented 7 months ago

We want to use Protomaps to serve the tiles (#7). Given that our demand will be pretty high, we'll be beyond protomaps.com's free and by-donation tier. This means we need to set up our own server for this.

What is the cheapest and most performative way to set up a server for Protomaps? There are some details at https://docs.protomaps.com/deploy/.

Currently, @nielsbom is leading on the research and implementation of this.

Costs

Lucas said:

the average is 150 000 individual sessions per month, but sometimes balloons up to 750 000 when it goes viral and/or during pride month

Putting the high-end number into Protomaps cost calculator:

  • 750,000 monthly map viewer sessions
  • 12MM monthly tile requests (16 tiles per session)
  • 1,200GB egress
  • Cloudflare costs: 14.30 USD per month

Update (2024-03-26 14:50:25): It's possible we'd also need to use the "Pro" plan to use Cloudflare which is 20 USD per month (on top of the costs above).

nielsbom commented 7 months ago

Update:

I've been learning how to use the various Cloudflare products and the tooling around it

jokroese commented 7 months ago

It's possible we'd also need to use the "Pro" plan to use Cloudflare which is 20 USD per month (on top of the costs above).

@queeringthemap, does QtM's relationship with Cloudflare cover any of this?

queeringthemap commented 7 months ago

Yes! QtM is part of Project Galileo with Cloudflare, which gives it a free Business Plan, which is one level higher than the Pro Plan.

jokroese commented 7 months ago

@narcode mentioned Supabase Storage as an option for this to reduce the number of platforms we use https://github.com/radical-data/queering-the-map/issues/16#issuecomment-2025963585. I think it's supported (based on this https://github.com/mapbasedev/mapbasedev?tab=readme-ov-file#storage and this fix https://github.com/supabase/storage/issues/322). However, I'm not sure how expensive it would be for our use case.

So, how is it progressing with Cloudflare R2 @nielsbom? If it's still a bit of a journey, we could look into the cost of doing this through Supabase Storage.

nielsbom commented 6 months ago

To serve files from Cloudflare's R2 we need Cloudflare Workers.

I've got a minimal example of a Worker reading R2 files working. But not using Range Requests (which we need for PMTiles).

Protomaps has some example code that should just work but doesn't.

Because I need to debug that code I've been investigating Cloudflare Workers and getting a local dev environment setup for them and R2 (using Wrangler).

The Protomaps example code is bundled JavaScript. To be able to debug I need to use the TypeScript that produces that bundled JavaScript. I'm in the process of getting that working now.

nielsbom commented 6 months ago

I discovered that most, but not all example code that Protomaps provides uses a different setup than a "serverless" one. That was kind of confusing.

But I (finally!) got my local dev setup working, so now I can debug my locally running Cloudflare Worker with local R2. For some reason the Worker can't access the PMTiles file that R2 has/should have. But there might be a local/remote problem. Still debugging that.

nielsbom commented 6 months ago

As is often the case: it was a small problem, but I'm now serving the contents of a PMTiles file via Cloudflare workers:

I got stuck for a long time because I was asking for a URL ending in /0/0/0.mvt and the PMTiles JavaScript library is not very clear in its error messages.

Next steps:

  1. Writing down what I learned and make a repo that can rebuild my working local setup.
  2. Getting a proof-of-concept of Maplibre GL JS using these URLs to get tile images. We can't and don't want to reference the PMTiles file directly (because $$$).
  3. Getting access to the QTM Cloudflare account.
  4. Connecting that to the QTM domain (if it's not yet).
  5. Uploading a full basemap (100+GB) to the R2 Storage of that account.
  6. Getting a Cloudflare worker correctly serving that full basemap.
  7. Reproducing the Maplibre GL JS proof-of-concept into the new Svelte version of the frontend so we can use the tiles the Cloudflare workers serve.
queeringthemap commented 6 months ago

Yahoo! Thank you so much for figuring this out!

I have added you both as Admin's in the QTM Cloudflare account, you should receive emails to join shortly.

nielsbom commented 6 months ago

I want to add Workers and R2 to the QTM CloudFlare account, but I don't have access to those. See attached screenshots below.

I think I'd need the roles:

The docs for managing members' roles are here: https://developers.cloudflare.com/fundamentals/setup/manage-members/manage/

@queeringthemap can you assign me those roles? Thanks!

Image Image

queeringthemap commented 6 months ago

Hiya! I have just changed the permissions to make you a full account Admin. Let me know if this works!

nielsbom commented 6 months ago

Ah, next hurdle: "You do not have permission to purchase R2 on this account. Contact your Super Administrator or Billing Administrator."

https://dash.cloudflare.com/316bd8bc9db62493abfc73555426587b/r2/plans

I think the "class B operations" plan is enough, because we're not going to let users write any data into R2 from the web (except for us putting files in there).

nielsbom commented 6 months ago

Did a few things this morning. Will continue a little later today. Up- and downloading 110GB is a bit of a bottleneck, who knew 🤪

nielsbom commented 5 months ago

I've created PR #33 which makes this repo use the tiles at https://tiles.queeringthemap.com.

Closing this issue.