[Frontend] Implementing the component for rectangular area search

[berkaydoner]

We have to implement a map for search functionality where users can select a rectangular area to filter the events in the given area. Similar to the location functionality in the create event page, we can use leaflet library for this task.

[berkaydoner]

I tried implementing this task with two draggable markers representing the bottom left and top right corners. I put event listener on the marker movements to draw the rectangle with the correct boundary. This works; however, it does not look that good because markers and rectangle corners do not overlap on the display properly, due to the icon design of the leaflet library.

Also, dragging two markers does not lead to a good user experience since when user try to choose another rectangle, they have to drag two markers all the way from the previous location. To fix this, I tried adding a center marker, which user can move to drag the corners together. However, this did not work properly because the changes in the corners are not read when the center is dragged. It resets the width and the height to the initial state when the center is dragged since it does not have access to the current position of corners, which are set using the asycn method setState.

I could not solve this async issue and I think dragging the rectangle without dragging two corners is crucial. So, I will check if I can use any libraries for drawing the rectangle.

[berkaydoner]

I decided to use the leaflet-draw and react-leaflet-draw libraries for this task since they allow drawing many shapes with simple UI. I enabled only the rectangle drawing option and integrated this to the map:

Users can select the rectangle from the right to start drawing.

Pull request of this task is #227

[berkaydoner]

Pull request of this issue is merged and closed.