> For the complete documentation index, see [llms.txt](https://foxocode.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxocode.gitbook.io/docs/fox-plugins/mapbox.md). # Mapbox Build powerful, interactive maps in Bubble with the Mapbox Plugin. Add locations, clusters, custom markers, routes, and highlighted map areas - all with flexible settings designed to give you full control over your map experience. Whether you are building a real estate platform, travel app, marketplace, delivery service, or any location-based product, create maps that are both powerful and visually engaging without complex setup. ## Features 🗺️ Map Styles - Customize the look and feel of your map with flexible styles and themes.\ 🛠️ Map Tools - Enable and configure the tools your users need.\ 📍 Map Markers - Add single or multiple markers with custom icons and personalized designs.\ 🔵 Map Clusters - Group nearby markers into clusters for a cleaner, more user-friendly map experience.\ ✨ Map Area - Highlight any area of the map and display specific points within it. Perfect for neighborhoods, service zones, property areas, delivery regions, and more.\ 🧭 Route Navigation - Create routes with distance and estimated travel time for driving, walking, cycling, and traffic.\ 🎯 Map Navigation - Smoothly move the map to any location with customizable zoom and transition settings.\ 🏙️ 3D Maps - Support for 3D terrain and buildings for a more immersive experience.\ ⚡ Fully Customizable - Control map behavior, appearance, markers, tools, zoom, and more directly from your Bubble application. ## Links Demo page: Demo page editor: {% hint style="info" %} If you prefer, you can use the plugin's edit page as a reference for setup instructions. This will provide a hands-on guide to configuring and using the plugin within your Bubble.io application. {% endhint %} ## Instruction ### Basic settings 1. **Install the Plugin:** Add the Mapbox plugin to your application. 2. **Add Plugin Element:** Locate the plugin in the visual elements section and place it on your app page.

### Map styles You can apply any style to your map to customize its appearance. The map style selector is located in the plugin's sidebar.

You can set the map style either statically or dynamically using Set state.

### Map tools You can enable or disable any map tools according to your needs. Map tools can be configured in two ways: * **Static controls** - configure the map tools directly from the plugin’s sidebar settings. These settings remain fixed unless you change them manually.

* **Dynamic controls** - use the **Toggle controls Mapboxmap tools** workflow to change map tool settings dynamically at runtime. This allows you to enable or disable specific tools based on user actions or other conditions in your application.

### Map markers Add and manage map markers to highlight locations such as rental properties, event venues, or recommended restaurants. Choose which type of marker to display on the map: a list of markers, a single marker, a draggable marker, or a custom marker with your own design. You can also place markers by specifying their coordinates. Each marker type has its own workflows, allowing you to easily control how markers are displayed and how users interact with them. * **Markers Group ID** A unique identifier for your group of markers. Use a different ID for each group. If a group with the same ID already exists, new markers will not be added to the map, preventing duplicates.

Example of where to enter the created ID.

* **Note** Select the map you want to display the markers on if your page contains multiple maps.

* **List of Markers** The workflow below shows how to add a list of markers to the map.

* **Single Marker** The workflow below shows how to add a single marker to the map.

* **Draggable Marker** The workflow below shows how to add a Draggable Marker to the map. You can drag the marker to any desired location and retrieve its coordinates dynamically.

* **Custom Markers** The Custom Markers feature allows you to create markers with your own design to match your application's style. Customize the appearance of your map points to fit your vision and create a unique, consistent user experience.

* **Reset Markers** The workflow below shows how to reset the markers on the map.

Don't forget to clear the Markers Group ID custom state.

### Map area You can define a specific area on your map, such as a neighborhood, event zone, or delivery region, and display markers within that area to highlight relevant locations and tailor your app's functionality.

* **Database** To display an area on the map, you first need to save its boundary coordinates in your database. Each area is defined by a set of coordinates that outline its boundaries.

If you have multiple areas, start by creating a list of areas with their names. Then, add the boundary coordinates for each area to your database, linking them to the corresponding area. This will allow you to display each area on the map when needed.

* **How to Display an Area on the Map** 1. Create a custom state for the selected area. This allows you to identify and retrieve the area you want to display on the map.

This allows you to identify and retrieve the area you want to display on the map.

2. Create a workflow to display the area. Use this workflow to pass the selected area's boundary coordinates to the map.

3. Create a custom state for the Polygon ID. Store the polygon's ID so you can manage the displayed area later, for example, by removing it from the map.

* **Reset the Area** The workflow below shows how to reset the area on the map.

**Note** Don't forget to clear the custom state for the selected area and custom state for the Polygon ID. **Add Markers to This Area** 1. **Markers Group ID** A unique identifier for your group of markers. Use a different ID for each group. If a group with the same ID already exists, new markers will not be added to the map, preventing duplicates.

2. The workflow below shows how to add a list of markers to the map. Make sure to specify which area each marker belongs to in the **Do a Search for** expression.

By following these steps, you can easily integrate the Mapbox Plugin into your Bubble application and create fully customizable, interactive maps. ## About Foxocode Foxocode is a team of experienced **product designers and developers** specializing in AI-powered solutions, no-code development, custom plugins, and full-cycle digital product creation. **What We Offer** * AI-powered web & app development * AI integrations & automation * Full website/app development from scratch * Customization of Bubble templates * Custom plugin development * Integration with external APIs and services **Contact Us** 📧 Email: \ 🌐 Website: [www.foxocode.co](https://foxocode.co/)\ Let us know what you need - we will be happy to discuss your project!