How does PMTiles Viewer load local files?

[larsmaxfield]

I'd like to know more about PMTiles Viewer — namely, how does it load and view local files? This mechanic would be very useful for an app I'm working on.

I was not able to find the source code or documentation on the Viewer. I'm still learning web development and it would nice to learn from such a clean and straightforward site.

[bdon]

The source code is here: https://github.com/protomaps/PMTiles/tree/main/app

It uses react-dropzone to handle local files: https://github.com/protomaps/PMTiles/blob/main/app/src/Start.tsx#L113

It then constructs a FileSource from the drop event https://github.com/protomaps/PMTiles/blob/main/app/src/Start.tsx#L110

And passes it via code to the MapLibre protocol here (since you can only otherwise configure maplibre sources through style strings): https://github.com/protomaps/PMTiles/blob/main/app/src/MaplibreMap.tsx#L397

I am likely going to re-implement that app without React, here is another viewer I wrote that does something similar with more vanilla JS instead of react: https://github.com/protomaps/basemaps/blob/main/app/src/MapView.tsx#L529

[larsmaxfield]

Nice. I like the vanilla JS approach. Thank you!