Mapbox Maps

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)!
Image without caption

How to setup

  1. 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.
    1. Customize the map appearance and behavior
      1. In the Appearance tab of the MapBox Map element, you can control:
        • 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.

    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.
    Image without caption

    Changelogs


    Powered by Notaku