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
- Map layer
- Map navigation controls with zooming, moving and rotating the base map
- Interaction layer with following capabilities:
- 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
- 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
- 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
- Add object of type SQUARE
- Object control layer with capabilities to display and hide any of the object types of SQUARE, CIRCLE and TRIANGLE
- Each individeual object of type SQUARE, CIRCLE and TRIANGLE are clickable
- On activating, display:
* speed
* current location
* time to expire
* current trajectory
* a tail of traveled trajectory in the last 60 seconds
- On activating, display:
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