Bug rendering PMTiles layer in OpenLayers for React frontend

[manjitapandey]

Describe the bug
The base imagery is not rendered properly and shows multiple imageries when zoomed out while using custom drone imagery.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'any project and visualise the PM tile'
2. Zoom out the map to view multiple tiles
3. Go to other projects and see the base imagery
4. See error

Expected behavior
The base imagery should be visualized on its location only and shouldn't be duplicated. Also it should be rendered properly.

Screenshots

Additional context
If zoomed in on the actual location of tms tile, the drone imagery is not seen there and is shifted to different location.
If you open different project too, same base imagery is visualized until you refresh the page.

[spwoodcock]

Just two clarify, there are two issues right?

• Load PMTiles for a project --> change project --> PMTiles for previous project still visible

• As above, but the tiles are loaded in the wrong place on the map. Are they displayed in the correct place on the original project they were loaded for?

[manjitapandey]

Yes, there are multiple issues:

1. Load PMTiles for a project --> change project --> PMTiles for previous project still visible
2. the tiles are loaded on multiple areas. Among them, one is its correct position, all other locations where tiles are seen are incorrect.

[spwoodcock]

Yes, there are multiple issues:

1. Load PMTiles for a project --> change project --> PMTiles for previous project still visible
2. the tiles are loaded on multiple areas. Among them, one is its correct position, all other locations where tiles are seen are incorrect.

Tile generation issue (2)

The second issue will be because of the swapped xy edit that was done on the Tokha server.

As an alternative, we could swap out osm-fieldwork basemapper with go-tilepacks quite easily. Will give this some more thought.

@Sujanadh we could look at this tomorrow 👍

Offline PMTiles issue (1)

The first issue is a frontend bug. The PMTiles loading from OPFS should only load for the specified project id, if present in OPFS, else fallback to loading none.

@NSUWAL123 I know you have a lot of tasks, but it would be amazing if you get a chance to debug this one 🙏

[NSUWAL123]

Yeah sure, Sam! I was also looking at the issue related to multiple-tile rendering. There were some issues that I faced:

1. The TMS URL used from Open Aerial Map was throwing a CORS error (on local as well as dev)
   So I copied the TMS URL of the already created project on dev and replicated the issue of multiple tile rendering.
   Now I need to dig into that issue to find whether it's a frontend issue or not.
   Don't know why there's a CORS error on open aerial map tile.

2. On the offline PMTiles issue, I need to see how can I replicate the issue as I am not able to generate PMTile on my device for now

[manjitapandey]

I am still able to reproduce both behavior that is basemap not being rendered properly as well as basemap of one project visible on other projects as well until you refresh the page.

[spwoodcock]

• The generation has been fixed.

• I feel part of the issue is with rendering in MapLibre potentially, but uncertain (where random tiles sometimes appear at different zoom levels).

• One part that can be actioned is the loading of the offline OPFS file. It should only be loading the PMTiles from the current project, not the previously loaded one. Would you have a chance to look into that one @NSUWAL123 ? 🙏

[manjitapandey]

Rendering problem is only there when user visualise the custom tiles on project details page by clicking on eye button on after tiles are generated. Visualising directly by switching the baselayer doesn't show any such issue. One thing we can do can also be removing eye icon from tile generation pop-up.
The rendering problem visualising PM tiles on mapper view has been solved.

[spwoodcock]

Rendering problem is only there when user visualise the custom tiles on project details page by clicking on eye button on after tiles are generated. Visualising directly by switching the baselayer doesn't show any such issue. One thing we can do can also be removing eye icon from tile generation pop-up.
The rendering problem visualising PM tiles on mapper view has been solved.

Ah apologies, this is all the manager frontend then.

Possible OpenLayers issue 👍

Useful info, thanks!

[NSUWAL123]

Sure @spwoodcock I'll have a look at it

[NSUWAL123]

Blocked by this issue. The status shows the PMTile is generated successfully but the s3 URL throws an error.

CC: @spwoodcock @Sujanadh

[spwoodcock]

Blocked by this issue. The status shows the PMTile is generated successfully but the s3 URL throws an error.

CC: @spwoodcock @Sujanadh

Hmm thanks, will check this later.

Only an issue on local dev - for some reason the S3 URL is returning as https not http

[spwoodcock]

I can't reproduce this - are you sure it's not a configuration issue @NSUWAL123?

I think it's likely the result of not having S3_ENDPOINT=http://s3:9000 set during local development, as the S3 download url will default to https://s3.{FMTM_DOMAIN}

[spwoodcock]

Interestingly, the default config for this is already http://s3:9000 in FastAPI!

I was just testing it out. By any chance do you have this in your .env S3_ENDPOINT=https://s3:9000 (overriding to https)?

[spwoodcock]

@NSUWAL123 my vote is to remove the PMTiles visualisation and PMTiles library entirely from the manager frontend / openlayer map. (also the OPFS code too!)

We mostly need to visualise on the maplibre mapper frontend anyway.

Plus managers can still download and inspect the file manually 👍

[NSUWAL123]

Umm. But there might also be a case where a new imagery is uploaded and the validators may want to see if the new feature aligns with the building @manjitapandey ?

[NSUWAL123]

Interestingly, the default config for this is already http://s3:9000 in FastAPI!

I was just testing it out. By any chance do you have this in your .env S3_ENDPOINT=https://s3:9000 (overriding to https)?

It's S3_ENDPOINT='http://s3:9000/'

[spwoodcock]

I can't reproduce this. Can anybody else in the team? Can you provide any more debug info?
(perhaps send me your .env content on slack)

Everything is working well on dev / stage regardless - it's a local dev problem only 👍

[Sujanadh]

i was also having same rendering problem.

[Sujanadh]

i will provide you my env

[Sujanadh]

I tested on dev server just now (management frontend).

[spwoodcock]

I am also getting the same - its a frontend issue with OpenLayers 👍

But Nishit is having a different issue with not being able to download the PMTiles from S3, due to config (which is seems that you aren't having Sujan, so it suggests a config difference between you).

Also confirm which branch you are testing this on Nishit please 🙏 I assume its rebased to latest development

[NSUWAL123]

I'll have a look again on Monday and get back to you then

[spwoodcock]

Umm. But there might also be a case where a new imagery is uploaded and the validators may want to see if the new feature aligns with the building @manjitapandey ?

Definitely! I just realised I already removed the OPFS implementation 😁 So its just the direct PMTiles from S3 in OpenLayers that needs debugging

[NSUWAL123]

Can't get to the solution on this issue.
There useGeographic() is used in the PMTile example to change the coordinate system but whenever I use it the map goes blank. Also, there's a lack of resources on this thing.

[spwoodcock]

Don't worry about it 😃

Maybe just an upgrade to ol-pmtiles might fix it.

Otherwise, its not a big deal for now.
Eventually a migration to MapLibre would fix this.