Front-end Developer Test Task

Simulation of flying objects

Create an application using HTML and JavaScript (any JS framework, jQuery or vanilla JS is acceptable)

The application consists of

  1. Map layer
  2. Map navigation controls with zooming, moving and rotating the base map
  3. Interaction layer with following capabilities:
    1. Add object of type SQUARE
      * A SQUARE object starts its life in the territory of Estonia
      * It moves with a random speed between 50 and 80 km/h
      * It moves on a straight path on a Great Circle and, given sufficient time, returns to the starting position and keeps going
    2. Add object of type CIRCLE
      * A CIRCLE object starts its life in the territory of Estonia
      * It moves with a random speed between 110 and 300 km/h
      * It moves on a circular path with a radius of 10000 – 30000m and after it has returned to origin point, dissapears
    3. Add object of type TRIANGLE
      * A TRIANGLE object starts its life in the territory of Estonia
      * It moves with a random speed between 1700 and 2200 km/h
      * Its destination is a point randomly chosen anywere on Earth
      * It moves on a shortest path from origin to destination point. Bear in mind that the shortest path is not a straight line.
      * The element has a lifespan of one hour or ends its life upon arrival to destination
  4. Object control layer with capabilities to display and hide any of the object types of SQUARE, CIRCLE and TRIANGLE
  5. Each individeual object of type SQUARE, CIRCLE and TRIANGLE are clickable
    1. On activating, display:
      * speed
      * current location
      * time to expire
      * current trajectory
      * a tail of traveled trajectory in the last 60 seconds

Notes:
* The test task is extensive, you might not be able to finish in time, this is okay. See how far you can go in 20 hours
* As a map base, use Leaflet or Google
* Use as many libraries and/or AI help as you like. Do note, that a code review follows
* Number of active objects is not limited, but no more than 5000
* The height of the object is not important, this property can be used, but can also be omitted
* Using WebGL is a bonus (and probably a really good idea)
* A good UI design is a bonus
* Graphical design is a bonus, but not mandatory
* Deliver the code any way you like, but do provide instructions of running it

Solutions and questions about the task to marten@trackdeep.ai