Gmaps-React Component for address input and area selection
Street Area Mode
Street area mode is designed to replace all address input components in our application. It counts with features such as:
- Google Autocomplete focused on ROOFTOP addresses. (An address 2 field should be provided to deal with additional information such as apartments)
- Google Autocomplete address beautification on second enter after input.
- Using browser’s navigator to ask for current location, in case location request is denied, Kendall, FL, our hometown, is defaulted.
- Dragging and dropping the marker will set the selected address on the input.
Area Selection Mode
Area mode is designed to operate in two variants. The first one is boundary free and should be used by the users that define areas (we call them vendors) to enable others to select within a fitted rectangle of a specific area. The second one counts with the possibility that area bounds have been previously set and will only allow the selection of an area within the provided boundaries. Amongst its features and behavior we can find:
- Areas are preset by vendors and appear ready to select whenever a relation comes preset from backend between the user and a vendor.
- The option of “Add a new area…” appears for both variants and while vendors do not have any bounds, regular users will see an unclickable cluster of translucent green areas which its vertices are undraggable symbolizing the ones given by the vendors, forcing them to add areas only within limits.
- The browser will request location permission on opening the map and on clicking “Add a new area…”
- A skeleton has been configured to reduce load-time frustration between dialog and Google API response.
- While selecting an area center for adding a new service area, you can do so by using the input field or by dragging and dropping the marker. On drag and drop, the marker will set the options, displayed as chips, to select an area enclosing the current marker position in levels increasing in area expansion, such as: administrative_area_1, administrative_area_2 and sublocality_level_1.
- A fab button allows for editing the address selected after the options appear, and another fab allows for cancelling the operation to go back to the area selection list.
- In order to remove or edit the areas added the current users (editable areas) a right click on the vertex will remove it, any vertex removed after the polygon is a triangle will take out the whole polygon. In order to increase the precision of the polygon area. A mid point in every side allows to drag a new added point to the polygon.