Component - Map

The map component of Momen allows users to adjust the visible area of the map based on specific business needs. Users can set the map's zoom levels and multiple markers.

Value

1. Customizable Config: Users can set the display range and zoom level of the map, ensuring that the map content is displayed according to business requirements.

2. Multiple Markers: It supports adding one or more markers on the map, enabling users to display information about different locations.

When to Use

The map component uses geographical data (latitude and longitude) to display corresponding location information. It responds to user actions, such as clicking on a marker, and can be used in applications that require the display of locations, such as company address information or navigation-based apps.

How to Use

1. Register with Mapbox and Obtain an Access Token

   1. Go to the Mapbox platform (https://www.mapbox.com), register an account, and create an access token. It is recommended to restrict your token by adding your domain in the Mapbox restriction section to make your token more secure. Once added, the token will only work for requests that originate from the URLs you specify.

   2. When the access token is obtained, input the access token under Config-General-Map API key section.

1. Obtain GeoPoint Data

Users can obtain GeoPoint data through the action of Get Location and assign it to Page data while constructing the map. Alternatively, you can obtain these data by looking them up on map providers and inserting them into the Momen built-in database. In your database, create an "Address Information" table based on your business logic. Common fields include:

1. Text Type: Marker name

2. Image Type: Marker icon

3. Boolean: Center point

4. GeoPoint Type: Marker coordinates

1. Map Configuration

Initial Zoom: This controls the map's display range. The default is 11, with values ranging from 1 to 19. The lower the number, the larger the display range (e.g., zoom level 1 shows the entire globe).

Show Location: Enabling this will display the user's current location on the map.

Center Point: The map will be centered around the configured point. If not configured, the center point of the map defaults to Los Angeles, California, USA.

1. Marker Configuration

Marker Switch: Toggle the marker switch to access the marker configuration panel.

Quantity:

1. Single Marker: For a single marker, simply bind the marker coordinates via remote data.

1. Multiple Markers: For multiple markers, bind a remote data source to provide multiple marker coordinates (be mindful to remove data limits if multiple coordinates shall be retrieved at once), and bind the marker coordinates via in-component data.

Icon Style: Users can upload or bind a custom icon style for markers and adjust the icon size.

Marker Name: Users can manually enter or bind the marker name.

Action onClick: Users can configure actions triggered when clicking on a marker, such as displaying a popup.

5. Functionality Boundaries

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