Hello 
I created and released my first Bubble plugin during an App build where I needed to create a popup showing a map and a circle radius on a fixed location, allowing the user to adjust the size of the circle on the map with a slider, then also allow the user to save this radius (number value) to database, hopefully it can save someone else some time, just drop it in your app, adjust all colors as needed, link your dynamic data things and move on to more important things!
Also can select map style from dropdown !
Plugin details
Mapbox Radius Finder Enhance your Bubble.io applications with the Mapbox Radius Finder plugin!
Dynamic Center Coordinates: Specify the center of your map with latitude and longitude properties.
Adjustable Zoom Level: Automatic zoom level for an optimal viewing experience.
Customizable Circle Overlay: Define the border color, infill color, and radius of the circle overlay to match your application’s theme.
Interactive Radius Slider: Users can adjust the radius of the circle in real-time using a slider, with the value being saved dynamically.
Responsive Design: Ensure a great user experience on all devices with a fully responsive map and slider layout.
Leverage the power of Mapbox and Turf.js to create interactive maps that cater to your application’s unique needs. Whether you’re building a location-based service, a delivery app, or a geographic analysis tool, Mapbox Radius Finder provides the flexibility and functionality you need.
Instructions
Step 1: Configure API Key Obtain a Mapbox API key by signing up on Mapbox.
To generate a Mapbox API key follow these steps
- Create a Mapbox account
- Go to account page
- Scroll down till you see “Access tokens”
- Copy the “Default public token”
Once you have your API key, go to the plugin settings in Bubble.io.
Enter your Mapbox API key in the MapBoxKey field under the plugin settings.
Step 2: Place the Mapbox Radius Finder Element
Go to the Design tab in your Bubble.io editor.
Drag and drop the “Mapbox Radius Finder” element onto your page.
Resize the element as needed to fit your design.
Step 3: Configure Element Properties
Select the Mapbox Radius Finder element on your page.
Set the following properties in the Property Editor:
Center Latitude and Longitude: Set the coordinates for the center of the map and the marker.
Initial Radius: Define the initial radius of the circle in kilometers. (this can be a database value as well)
Circle Border Color: Choose a color for the circle’s border.
Circle Infill Color: Choose a color for the circle’s infill.
Slider Color: Choose a color for the slider
Slider Minimum and Maximum Values: Define the range for the radius slider.
Step 4: Add Dynamic Functionality
Use the exposed state result_number to capture the radius value selected by the user.
To save the radius value to your database, create a workflow that triggers on slider change and use the result_number state.
UPDATED 
New Update!
Also you can now select the Slider Step value, to move by 0.1 etc to 1.0 - smaller numbers makes for smoother circle resizing experience !
