Skip to Content
BUILD UIMap

Map

Value

  1. Customizable Configuration: Set the display range and zoom level to ensure the map content matches business requirements.
  2. Multiple Markers: Add one or more markers to display information about different locations.

When to Use

The map component uses geographic data (latitude and longitude) to display location information. It responds to user actions, such as clicking a marker, and is suitable for applications that need to display locations (e.g., company addresses, navigation apps).

Map component example

How to Use

Register with Mapbox and Obtain an Access Token

  1. Go to Mapbox , register an account, and create an access token.
    Recommendation: Restrict your token by adding your domain in the Mapbox restriction section for security. The token will only work for requests from specified URLs.
  2. Enter the access token in the Config > General > Map API key section.
Mapbox Token ConfigurationMap API Key Input
Mapbox token configurationMap API key input

Obtain GeoPoint Data

You can obtain GeoPoint data by using the “Get Location” action and assigning it to page data, or by looking up coordinates on map providers and inserting them into the Momen database.
Create an “Address Information” table in your database with fields such as:

  • Text: Marker name
  • Image: Marker icon
  • Boolean: Center point indicator
  • GeoPoint: Marker coordinates
ExampleExampleExample
Address info table example 1Address info table example 2Address info table example 3

Map Configuration

  • Initial Zoom: Controls the map’s display range (default: 11, range: 1–19). Lower values show a larger area (e.g., 1 = entire globe).
Initial Zoom ConfigurationZoom Level Example
Initial zoom configurationZoom level example
  • Show Location: Enable to display the user’s current location on the map.
Show Location ConfigurationShow Location Example
Show location enabledShow location example
  • Center Point: Set the map’s center. If not set, the default is Los Angeles, California, USA.
ConfigurationConfigurationConfiguration
Center point configuration 1Center point configuration 2Center point configuration 3

Marker Configuration

  • Marker Switch: Toggle to access the marker configuration panel.
Marker Switch PanelMarker Switch Panel
Marker switch panel 1Marker switch panel 2

  • Quantity:

    • Single Marker: Bind marker coordinates via remote data.

      Single Marker BindingSingle Marker Binding
      Single marker binding 1Single marker binding 2

    • Multiple Markers: Bind a remote data source to provide multiple marker coordinates (remove data limits if needed), and bind marker coordinates via in-component data.

      Multiple Markers BindingMultiple Markers Binding
      Multiple markers binding 1Multiple markers binding 2

  • Icon Style: Upload or bind a custom icon for markers and adjust icon size.

Marker Icon StyleMarker Icon Style
Marker icon style 1Marker icon style 2
  • Marker Name: Enter or bind the marker name.
Marker Name ConfigurationMarker Name Configuration
Marker name configuration 1Marker name configuration 2
  • Action onClick: Configure actions triggered when clicking a marker (e.g., display a popup).

Functionality Boundaries

If the map center point is not set, the map defaults to Los Angeles, California, USA.

Last updated on
Conditional ViewOthers