Dynamic Webmap Created With QGIS

View the web map here: https://airportwebmap.aidantech.xyz

About

Mini-Project for dipping my toes into QGIS/GIS web mapping basics. I decided to turn it into a CI/CD exercise on top of learning web mapping.

Map Features

• Dynamic web map using Google Maps baselayer
• Pan/Zoom within map extent
• Searchable via class/city/country
• Displays coordinates and links Wikipedia page to selected airport

CI/CD Workflow

Upon merge/push on the main branch:

• A new Image is created from html/css/js files that make up the map
• DigitalOcean API access via doctl to push new image to DigitalOcean Registry, it purges any old images in the process.
• New container is built from registry image
• SSH into DigitalOcean droplet using Keypairs
• Script is run to remove old containers and images on the droplet
• New container is built on the droplet

Data

• Created with QGIS2Web plugin
• Airport data from Natural Earth Data

Local Development

Clone the repo. You will be able to view the map by opening index.html

Run with Docker

• Ensure you are in the project directory
• run docker build -t 'imagename' . to build the image
• run docker run -it --rm -d -p 8080:80 --name 'containername' 'imagename' to run container from image