· French guy trying its best

Custom map widget to select location with a diameter around a location

Hi everyone,

I am trying to create a service rental app between individuals for events.
For this I need to a location feature.

Both users can add their location, by selecting "Use my current position" or searching a place, or pressing a point on the map for a moment, just like google maps.

But the difficult part is the following : I want each user to be able to select a number of kilometers, which can be selected with a slider as a diameter for a circle around the location chosen.

The individuals providing their services should be filtered by this range.

From the user point of view it should look like the location picker page from too good to go, the screenshots that you can see.

Translation of the screenshots from top to bottom :

  • Choose a place to see food baskets to collect

  • Select the distance

  • Select the location

  • Use my current position

  • Choose this place

    As a beginner, all I know is that I can use an API to calculate the distances between 2 locations, I think that I will be using Distance calculator By Oleksii Neishchenko aivalable on rapidAPI. But I still need to use the distance data to filter, and I do not know how to display and interactive map the way I want it to be displayed.

    Thank you in advance

3
9 replies