Create a web app that allows a person to mark places on an interactive map by typing the cords OR place/location to mark. Each marker added to the map creates a connection with the other markers by drawing a line between them that will create a polygon.
Even though in the mock google maps is displayed, all of the functionalities are also supported in Bing maps It's not mandatory to provide the same UI representation exactly, use this as a general guideline to what is expected.
Exercise Instructions Create a one-page app that displays a map with user’s markers which are connected by lines that creates a polygon and a form.
Use React and Bing maps & location APIs. Create a git repository to document your work process. Feel free to use any code structure(as many files & folders you need). structure and clean code are helping us understand your way of thinking and improves your code Readability. Use libraries, don’t go and “invent the wheel”, for example you can use Bootstrap for styling your app.
The form's purpose is to allow the end-user to add new markers on the map, every mark that is being added will re-render the map with all the markers and a polygon connecting them.
There are 2 functionalities to add a marker, choose one and implement it:
** 1. Add marker by entering specific coordinates(lat, lng) ** 2. Add a marker by entering a place, show the user suggestions that match his input. (For example, inputting “Time Square” should give me auto complete with the options and adding the marker will place a marker on “Time Square”).
The map will display all the user’s markers with lines attaching them to each other which creates a polygon. The order of the lines doesn’t matter, what matters is that for each marker there will be at most 2 lines from him.
The exercise will be submitted only with Github/Gitlab/etc.
- Moran Helman (@send2moran)