Link to the plugin page: https://zeroqode.com/plugin/mapbox-maps-plugin-for-bubble--1528977923342x484968448273940500
Demo to preview the plugin:
Introduction
The Mapbox Maps plugin for Bubble provides integration with Mapbox for advanced map functionalities. It allows users to display and customize maps with various features such as markers, polygons, and custom styles. The plugin supports functions like geolocation, route drawing, and address search, enhancing user interaction with maps. It also includes dynamic capabilities like updating map data in real-time and customizing the appearance of map elements. The plugin is designed for easy configuration and offers a range of settings to tailor maps according to project requirements.
Usage Features:
- Customizable map styles and themes.
- Display multiple markers with custom icons.
- Geocoding and reverse geocoding capabilities.
- Route drawing and direction services.
- Support for user interaction and click events on the map.
- Dynamic data layers for dynamic data visualization.
- Clustering of map markers for better visual management.
- Map initialization with custom center and zoom level.
- Integration with Mapbox's vector tiles for high-quality visuals.
- Support for 3D terrain and building visualization.
Tutorial
🔔 The most risk-free way to try out this plugin is to subscribe to it. If you unsubscribe a few days later you will be charged on pro-rata basis, so for example if the plugin monthly price is $5 then you’d pay only 17¢ per day ($5/30 days)!
How to setup
- Add the MapBox Map element to your page
- In the Bubble Editor, go to Design > Visual Elements.
- Look for MapBox Map and drag it onto your page.
- Customize the map appearance and behavior
- UI Position: Position of default map controls (top-left, bottom-right, etc.)
- Enable UI Map Inputs: Toggle built-in controls like zoom, directions, etc.
- UI Map Default Tab: Choose the default view (e.g., driving-traffic).
- Enable UI Route Instructions: Show step-by-step route directions.
- Enable Navigation Controls: Show/Hide zoom/navigation buttons.
- Nav Controls Position: Position of those navigation buttons.
- Language / Navigation Language: Set the interface and directions language.
- Theme: Choose between “Streets”, “Satellite”, etc.
- Zoom on Scrolling: Enable zoom with mouse scroll.
- Default Zoom, Initial Longitude, Initial Latitude: Define starting view.
In the Appearance tab of the MapBox Map element, you can control:
Plugin Element Properties
MapBox Map
Fields:
Title | Description | Type |
Controls | Add map controls | Checkbox (yes/no) |
Center | Where is map centered initially | Geographic Address (optional) |
Zoom | Initial map zoom | Number (optional) |
Style | Map style Available options: streets-v12, outdoors-v12, light-v11, dark-v11, satellite-v9, satellite-streets-v12, navigation-day-v1, navigation-night-v1 | Dropdown (optional) |
Disable Zoom on Scroll | Disable map zoom on scroll | Checkbox (yes/no) |
Show Branding | Show MapBox branding | Checkbox (yes/no) |
====== MARKERS ====== | ||
Marker Type | Bubble type you want to display as a marker on map | App Type (optional) |
Markers Source | A list of things to be displayed as markers on map | Item representing Marker Type (optional) |
Address | Address field is mandatory, and should be as geographic address type | Field of Marker Type, represent Geographic Address |
Icon | Unique icon for each marker | Field of Marker Type, represent Text, image or file (optional) |
Color | You can use a unique color for your markers if you are not using icons | Field of Marker Type, represent Text, image or file (optional) |
Draggable | Mark marker as draggable | Field of Marker Type, represent Checkbox (yes/no) (optional) |
Rotation | Marker could be rotated in range of [0 - 360] degrees | Field of Marker Type, represent Number (optional) |
Size | Marker size, default is 50x50 pixels | Field of Marker Type, represent Number (optional) |
====== GENERIC MARKERS PROPERTIES ====== | ||
Generic Icon | A generic icon for all markers | Image (optional) |
Generic Color | A generic color for all markers | Color (optional) |
Generic Draggable | Mark all markers as draggable or not | Checkbox (yes/no) |
Generic Rotation | Set rotation angle for all markers | Number (optional) |
Generic Size | Set generic size for all markers. Default 50x50 pixels | Number (optional) |
====== ZIPCODES ====== | ||
Enable Zipcodes | If enabled, you can work with zipcode areas | Checkbox (yes/no) |
Allow Clicking | Enable zipcode clicking | Checkbox (yes/no) |
Default Zipcode highlight | Default zipcode areas highlight color, it will be override on using “Show Zipcodes in Area” action | Color |
Zipcode Hover color | Zipcode area hover color | Color |
Element Actions
Plugin Data Calls
MapBox - Get Route Data (Full)
This data call retrieves complete routing information between two or more points.
Return Values:
Return type: JSON
json{ "routes": [ { "distance": 3783.2, "duration": 547.4, "geometry": { "coordinates": [ [28.907089, 47.00367], [29.47111, 46.83056] ], "type": "LineString" }, "legs": [ { "summary": "", "steps": [ { "distance": 340.5, "duration": 55.2, "maneuver": { "instruction": "Head southeast on Main Street" } }, { "distance": 870.2, "duration": 115.3, "maneuver": { "instruction": "Turn right onto Highway 1" } } ] } ] } ], "waypoints": [ { "location": [28.907089, 47.00367], "name": "Start Point" }, { "location": [29.47111, 46.83056], "name": "End Point" } ], "code": "Ok" }
MapBox - Get Route Data (Simple)
This version retrieves a lightweight route object between two or more points.
Return Values:
Return type: JSON
json{ "distance": 3783.2, "duration": 547.4, "geometry": { "coordinates": [ [28.907089, 47.00367], [29.47111, 46.83056] ], "type": "LineString" } }
Exposed states
Title | Description | Type |
Active Marker | Last clicked marker | Text |
Clicked Zipcode | Clicked zipcode area | Text |
Zipcodes in Area | Zipcodes in highlighted area | Text |
Element Events
Event Name | Description |
A MapBox Map Marker Clicked | Triggered when a marker on the map is clicked. |
A MapBox Map Marker Is Dragged | Triggered while a marker is being dragged. |
A MapBox Map Polygon Is Drawed | Triggered when a polygon is drawn on the map. |
A MapBox Map Polygon Is Updated | Triggered when an existing polygon is modified. |
A MapBox Map Map Is Loaded | Triggered when the map has fully loaded and is ready. |
A MapBox Map Route Is Set | Triggered when a route is successfully generated. |
A MapBox Map Measure Distance Set | Triggered after measuring distance between points. |
A MapBox Map The Search For Points In The Polygon Is Completed | Triggered when the search for points inside a polygon is done. |
A MapBox Map Created Line Is Clicked | Triggered when a user clicks on a custom-created line on the map. |
A MapBox Map Cluster Marker Clicked | Triggered when a cluster marker is clicked. |
A MapBox Map List Of Markers Displayed | Triggered when the list of markers has been fully rendered on the map. |
A MapBox Map Clusters Were Created | Triggered when marker clusters are generated. |
A MapBox Map Map Is Clicked | Triggered when the user clicks anywhere on the map. |
A MapBox Map Line Is Drawed | Triggered when a line is drawn by the user. |
A MapBox Map Line Is Updated | Triggered when an existing line is modified. |
A MapBox Map Cluster Clicked | Triggered when a user clicks on a cluster (group of markers). |
A MapBox Map Compass Is Off | Triggered when the map compass (orientation) is turned off. |
A MapBox Map Zip Code Area Clicked | Triggered when a user clicks inside a highlighted ZIP code area. |