Oleksandr Matsibora. Kinburn landscapes: web-GIS application with Leaflet.js and Vue.js (Quasar framework) deployed to Google Firebase

Author
Oleksandr Matsibora
Published

DOI

“Kinburn landscapes” is a web-GIS application, developed with Quasar.js framework and Leaflet.js library on client side and integrated with a few Google Firebase products on the backend. The main object of the scientific research is a landscape structure of the national park “Kinburn Spit” at the southern part of Ukraine, which is temporally occupied nowadays... Landscapes of “Kinburn Spit” were studied in 2007-2009 by analysis of topographic maps (1:10000) and personal field research. Based on received results the spatial layer “Landscapes” was created by scanning paper maps with further manual(!) digitizing in the environment of MapInfo Professional (v7). With such approach 3k polygons were digitized, which consist of 320k vertices... For me that was a time of CD-R and sometimes even of 3.5 inch floppy disks. Spatial layer “Photos” was created later but with a usage of original photos, made during field research in August of 2007.

Architecture of Kinburn landscapes: web-GIS application

Nowadays, the territory of the national park “Kinburn spit” is affected by war aggression, landscape structure, soils and plants are damaged by the building of military objects. Northern coast of the Kinburn peninsula was flooded after the explosion of Kakhovska hydropower station. That is why this spatial layer “Landscapes”, created in 2009, could be considered as a “snapshot” of the natural conditions of this territory and used for comparison of a landscape structure “before” and “after” the war.

The main features of “Kinburn landscapes” web-GIS:

  • integration of four products and services of Google Firebase on backend: Firestore, Storage, Hosting and AppCheck; spatial layer “Photos” is stored as a collection of documents in Firestore, which consist of links (public URL) to Storage, where all image files (.jpg) are saved; spatial layer “Landscapes” is stored in Storage as a single geoJSON file;

  • using of the geoJSON file “on the fly” conversion to vector tiles for “lightweight” rendering of 3k polygons on client side;

  • original approach for the layer management (Pinia Store <=> Leaflet Map) where switching between spatial layers happens without reloading the Leaflet map;

  • internationalization of the user interface: full support of two languages (English, Ukrainian)

Screenshot of Kinburn landscapes: web-GIS application

Useful tips:

  • two CLI tools are used for different purposes: “Firebase CLI” is for hosting, CI/CD configuration and “Google Cloud CLI” (gcloud) for CORS setting;

  • “Rules” configuration of Firebase services is a basic level of the app security but “AppCheck” is another layer of protection against unauthorized access to backend resources, which is highly recommended to use;

  • natively, Firestore does not support nested arrays like “[[...], [...], [...]]” that could be a problem for storing complex objects, such as “MultiPolygon” or “MultiLineString”, etc.

Useful links: