- I have used Vue standard library with a few components to achieve this.
- I have used Google Maps along with my own Google API Key as Google Maps implementation needs an API key to work with. I usually use
.env
file for environment variables for that but since you cannot have access to environment files via GitHub as they are ignored in.gitignore
files, I just pasted the key inmain.js
file for you to use. - I have pulled Axios to work with your API endpoint in AWS but because of CORS issue (Cross-Origin Resource Sharing) I downloaded the JSON file and placed it in
api
directory. However, the concept is the same. You can uncomment my comments inApp.vue
file and see how I would achieve this with Axios if there was no CORS issue. - I could have used Vuex, Nuxt-SSR, Jest and typescript but this test was builed with standard Vue library which can be installed with
@vue-cli
version 3. - I can build this with Vanilla Javascript and jQuery without any frameworks. Please let me know if you want me to do that.
- Web application must run in Google Chrome on desktop and Safari on mobile.
- Application loads the map data from an external endpoint.
- The app must display a map with a pin for each location in the remote JSON feed using latitude and longitude from the feed.
- Once a pin is tapped the popup should show the country name from the feed. (Displayed country name + capital)
- You are allowed to use any 3rd party libraries you prefer to help carry out the task - please look to follow best practices around any 3rd party libraries you utilise. (Used vue2-google-maps)
yarn install
yarn serve
yarn build
yarn lint