MapTile Documentation

Overview

MapTile is a powerful component designed to render interactive maps using the MapLibre library. It is ideal for visualizing geospatial data on a flexible, user-friendly interface that supports various map styles, clustering of data points, and dynamic data fetching from workflows.

The MapTile component is capable of displaying data points (markers) on a map, allowing users to visually analyze spatial relationships, patterns, and distributions related to their workflows.

Settings

Title

• Input Type: String
• Description: The title displayed at the top of the MapTile. Changing this modifies the heading that provides context about the map.
• Default Value: 'Map'

Subtitle

• Input Type: String
• Description: An optional subtitle displayed under the title. This can provide additional context or information related to the map.
• Default Value: '' (empty string)

MapStyle

• Input Type: Dropdown
• Description: Allows users to select the base style of the map from predefined options. Changing this affects the visual aesthetics of the map.
• Default Value: 'osm'
• Available Styles:
  • osm: OpenStreetMap style
  • dark: Dark-themed style
  • voyager: Voyager style

MarkerColor

• Input Type: String (Hex color code)
• Description: Specifies the color of the markers that represent data points on the map. Changing this will alter the appearance of the markers on the map.
• Default Value: '#3b82f6' (a shade of blue)

ClusterEnabled

• Input Type: Boolean
• Description: A toggle that enables or disables clustering of data points. When enabled, points that are close to each other will group together to reduce clutter on the map. If disabled, all points will be displayed individually.
• Default Value: true

Workflows

• Input Type: Array
• Description: An array containing workflow objects from which the component fetches data. Each workflow must have an id. If this setting is not provided or left empty, the component will utilize props.data instead.
• Default Value: [] (empty array)

How It Works

The MapTile component initializes a MapLibre instance, retrieves data from specified workflows, and renders it as markers on the map. It supports clustering for efficient visualization when dealing with extensive datasets.

• Fetching Data: The component uses the Fetch API to retrieve data associated with each workflow. If the data is large, it will utilize a reference ID to fetch paged data efficiently. After data fetching, it normalizes the data for use.
• Markers: Markers are created based on latitude and longitude within the fetched data. The component determines appropriate properties such as labels for each point.
• Interactivity: Users can click on markers and clusters for further information. The component includes event handlers to launch popups with informative labels.
• Dynamic Updates: The map can respond to configuration changes (e.g., marker color, style) and refresh data on user interaction.

Expected Data

MapTile expects data structured in the following manner:

• Each data point must include at least latitude and longitude (identified by keys such as lat, lng, latitude, longitude, etc.).
• It may optionally include a label or descriptive attributes (such as name, title, or description).

Use Cases & Examples

Use Case 1: Real Estate Listings

A real estate company can use the MapTile to display properties on a map. Each property can be marked with a unique marker representing its location, providing an interactive way for potential buyers to visualize available options in a specific area.

Use Case 2: Delivery Route Tracking

A logistics company can utilize MapTile to visualize the routes of their delivery trucks in real-time. The map can show clusters of deliveries in specific regions, helping management optimize routes and resources.

Concrete Example Configuration

Configuration for Real Estate Listings:

{
  "title": "Available Properties",
  "subtitle": "Your Dream Home Awaits",
  "mapStyle": "osm",
  "markerColor": "#ff5733",
  "clusterEnabled": true,
  "workflows": [
    {
      "id": "property_listing_workflow_1"
    },
    {
      "id": "property_listing_workflow_2"
    }
  ]
}

Explanation:

In the provided configuration, the MapTile will display available properties with a title of "Available Properties" and a subtitle for context. The map will use the OpenStreetMap styling, with markers colored in a distinct shade of orange (#ff5733). Clustering is enabled to enhance usability, merging closer markers into groups. The component will fetch property details from two specified workflows, ensuring real-time data is visualized.

AI Integrations & Billing Impacts

At present, the MapTile has no direct integration with AI systems. However, it could be enhanced with AI features such as predictive clustering or anomaly detection in point distribution in future iterations.

Regarding billing, the use of MapTile may depend on external service calls depending on the number of workflows and the data fetched. Billing may be impacted by the volume of data retrieved and the number of API calls made, especially if using a paid data backend for workflow execution or data fetching. Make sure to monitor usage to avoid unexpected charges.

Conclusion

The MapTile component is a versatile and powerful tool for visualizing geospatial data interactively. Its settings allow for customization to fit various business needs, and it is built to be responsive to user interactions for an optimal user experience.