# Orca Challenge ⛵ 🌊
Below you can read the documentation for [this](https://jsfiddle.net/akowalska622/e5d3bzrg/305/) solution 💻

## 🎯 Goal
The user wants to view a marine chart and find a route between two points in the chart.
User should be able to:
1) Click on the map to set their starting point, and then click again at a different location to set the destination
2) Once two points have been selected in the map, we should request a route from the API and show the route on the map

> **Tech side note**
> We only care about the "success case", so there's no need to do any error handling, etc.

## 🃏 Stack

- HTML, CSS, Vanilla JS
- Mapbox library configured with the Orca Marine Map Source
- The Orca Routing API for finding the route from start to destination

## 🚶🏻‍♀️ Approach

I started from getting my way around Mapbox documentation and their small interactive examples, then I moved to experimenting with them in sandbox.
I set up my instance of map with Orca's style settings and started to explore API structure.

I started to play with Mapbox API, I managed to collect coordinates after clicking on the map, save them in array and resetting the array if we already have 2 points saved. I added visual markers, so an user can see exactly where they clicked.
With real coordinates, I tried to integrate my code with Orca API and since I got the correct response. I adjusted Mapbox syntax output to given API and then Orca's API response to Mapbox syntax to show the route.
I drew a line which connects two points and test various routes. I cleaned up my code, to separate helper functions and our "state" variables.

Then I focused on making the project more user friendly and visually pleasant - I added a loading spinner, to let user know that something is happening under the hood. Also I played a bit with animations, to attract user's attention and also give them visual hint about the route's flow.

## 🤔 Challenges

I've encountered a few challenges during this challenge:

- new external library, since I have never had an opportunity to work with any map's API
- refreshing vanilla JS, as since working with React and React Native it became a bit "rusty"
- getting in line two different APIs, because I wasn't very familiar with the structure of neither one and they differed a bit, but after a quick analysis it wasn't too cumbersome
- getting animation done and destroyed after we create second and next route, but this one was out of challenge's scope
- I wasn't able to have warning's free console, because of external Orca's styles

## 🔨 Potential improvements

- creating a file system, since the challenge was done in JS fiddle everything is in one file. In real life I would extract some things to different files and make it more modular
- when using React / React Native - using hooks for state
- extracting some things to variables, for example CSS colours
- types and tests
- adding waypoints to create more complex route
- when playing with animations, I wanted to add a small boat image and make it move along the line (according to [docs](https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/)), but I had the Orca's style implemented