/Flight-map-visualizer

Primary LanguageJavaScript

Flight map visualization

Technologies:

  1. Mapbox GL JS - Library to render map on browser using Web GL
  2. Turf.js - Library to calculate great-circles distance
  3. Arc.js - Library to calculate arc points using great-circles distance
  4. Jquery - JavaScript library to handle HTML interaction
  5. Jest - Unit test library
  6. Flask - Python server framework
  7. Heroku - Free cloud hosting
  8. Docker - Linux container for development

Demo:

Heroku demo: Click here

Functionality:

  1. The map is rendered using Mapbox GL JS.
  2. The map displays arc lines connecting every capital to Helsinki using greate-circle distance.
  3. The map with style highlights for better data visualization. Read Instructions.pdf for more details.
  4. The lines are colored based on distances.
  5. The popup with route's distance is shown when the line is hovered on.
  6. The feature "All flights lead to any city" is implemented by clicking into the air plane markers(representing capitals). All lines that connect to that clicked city.

General design:

  1. The capital data is stored in the file capitals.json from this source. It is served to the front-end by a simple Flask server in index.py.

  2. The front-end code is stored in ./src directory. Front-end code has 5 main parts:

    • Fetching and transform data to correct format is done in src/scripts/data-processor.js
    • Controlling mapbox GL is done in src/scripts/map-wrapper.js
    • Handling stylings, theme is done in src/scripts/stylings.js
    • Handling HTML DOM element is done in src/scripts/dom-handler
    • Gluing everything together is in src/scripts/index.js

  3. Docker and docker-compose is used for development. Running webpack-dev-server in one container and flask server in another.

Project structure:

mapbox/
└─── docker-files/          # Docker files for front-end and back-end
└─── static/                # Folder to store the built css, js to be served by Flask
└─── templates/             # Html served by Flask
└─── index.py               # Python server
└─── capitals.json          # JSON capital data
└─── .babelrc               # Config for JavaScript ES6 transpiler
└─── .eslintrc              # Config for JavaScript linter
└─── webpack.config.js      # Config for hot reload development server, package builder
└─── package.json           # Package manager config for Javascript project
└─── requirements.txt       # Package list for Python
└─── ProcFile               # Heroku scripts
└─── run                    # Script to execute unit test, lint inside Docker container
└─── Instructions.pdf       # INTRUCTION ON HOW TO USE THE PRODUCT
│
└─── src/scripts/           # Main scripts
    │
    └─── index.js           # Entry point of the app
    └─── data-processor.js  # Fetch data and transform data to GEOJSON format
    └─── map-wrapper.js     # Encapsulate mapbox-gl-js instance and controll the map
    │
    └─── stylings.js        # Handle styling, theme changes
    └─── dom-handler.js     # Handle HTML DOM events
    └─── constants.js       # Constants such as API key...
    └─── utils.js           # Helper functions
    └─── __tests__/         # Unit tests

Installations:

Choose either of the listed methods below(Preferably the first method)

  • USING docker and docker-compose: Running development servers (with hot reload)

    1. Installing docker (Linux, MacOs,Window)
    2. Start front-end and back-end development server by the command:
        docker-compose up
    1. Open browser with the address http://127.0.0.1:8080/ to see the result. Make sure that port 8080 is available
    2. Add execution permission for the script run:
        chmod +x run
    1. To run unit test, use the command:
        ./run test
    1. To run unit test, user the command:
        ./run lint
    1. To build package for production deployment, in which the built files main.js, runtime.js, vendor.js are built into /static directory.
        ./run build

  • Installing in your own machine

    1. Install node and npm. Check here.
    2. Install python and pip. Check here
    3. Install front-end dependencies:
        npm install
    1. Install back-end dependencies:
        pip install -r ./requirements.txt
    1. Run back-end development server:
        python index.py
    1. Run front-end development server on another terminal tab:
        npm run dev
    1. Open browser with the address http://127.0.0.1:8080/ to see the result. Make sure that port 8080 is available
    2. Run unit tests:
        npm test
    1. Run lint:
        npm run lint
    1. Build production:
        npm run build