Oleksandr Matsibora. Web atlas prototype developed with Vue.js (Quasar.js), Leaflet.js and Tippecanoe vector tiles .pbf, deployed to decentralized cloud storage Storj

Author
Oleksandr Matsibora
Published

DOI

Speaking about single page web-GIS applications there is always a question about the “flexibility of such architecture”. In other words: can we use the same logic and component structure of the client-side web-GIS application, but with other spatial data sources? Or can we replace a folder of geoJSON files with REST API endpoints or vector tile storage?

The short answer is: “Yes, for sure”. To prove that, another version of the “Web Atlas of Demography” was created, where the same client-side web-GIS application received data from another source. To make the experiment more complex, a major decision was made to replace all geoJSON files with vector tile layers. But a question appeared: where to store all datasets with a huge number of .pbf files?

Storj – S3-compatible object storage built on the distributed cloud. And it was a good chance to implement decentralized cloud storage into “serverless” web-GIS application architecture.

Web atlas prototype developed with Vue.js (Quasar.js), Leaflet.js and Tippecanoe vector tiles .pbf, deployment to decentralized cloud storage Storj

Web Atlas of Demography is a web-based geographic information system, which is developed with only open-source technologies and free public data. The main idea behind this application is a “serverless architecture”, meaning that all configuration and programming logic is stored on client-side.

According to this approach, web-GIS application and all spatial data (.pbf vector tiles) are deployed to Storj – object storage built on the distributed cloud (AWS S3-compatible). Creating two separate buckets (for web hosting and for spatial data) inside of the Storj project allows to work independently with data sources and the web-GIS application.

The main stages of the Storj decentralized cloud storage implementation:

  1. Registering a free account at Storj

  2. Creating 2 buckets within the Project:
    - Bucket#1 (web hosting) – where client-side web-GIS application will be deployed
    - Bucket#2 (vector tiles storage) – where folders with .pbf files will be stored

  3. Conversion of geoJSON files into vector tiles (.pbf) with Tippecanoe CLI

  4. Uploading the final build of the client-side web-GIS application to Bucket#1 with Uplink CLI

  5. Uploading folders with more than 6000 .pbf files to Bucket#2 with Uplink CLI

  6. Registering a new subdomain in DNS-provider (CloudFlare) and creating additional records CNAME, TXT, TXT, which point out to Bucket#1, where web-GIS application was deployed.

Conclusion

  • Storj offers a “Free plan” with 25Gb of cloud storage and 25Gb of egress per month, which is totally enough to become familiar with the cloud infrastructure and even run a scientific project like the web-atlas prototype

  • Uplink Command Line Interface – is a reliable and easy to use tool for cloud storage management and file transfer (even recursively)

  • Storj – is fully compatible with AWS S3 storage, so “AWS SDK for JavaScript” could be used by web-developers directly in the browser or at server-side (Node.js)

  • web-GIS app became faster and more lightweight for web browser because “client” is only responsible for rendering the tiles;

  • everybody can try the new version of the “serverless” web-GIS application and estimate the increase in performance: https://atlas-prototype.web.app/