Overview

1. Robust Mapping Engine

The widget embeds a lightweight, high-performance Leaflet map instance nested securely inside a React Native WebView. This architecture provides rich map tiling from OpenStreetMap (OSM) without the heavy overhead of native SDK integrations.

2. Live Geolocation Tracking

By deeply integrating with the device's native GPS sensors, the widget actively plots and updates the user's true location on the map.

• Follow User Mode: Configuration property to automatically pan and center the map as the user moves.
• Start From Current Location: Instantly treat the device's initial GPS lock as the starting point for route calculations.

3. Dynamic Road Routing

The widget intelligently calculates driving paths between the user and their destination by querying OSRM (Open Source Routing Machine).

• Automatically decodes spatial polylines to accurately draw the shortest path along actual road networks.
• Custom Routing Servers: Supports connecting to private or self-hosted OSRM endpoints (routingServerUrl), ensuring data privacy and enterprise scalability.
• Customization: Easily define the routing path color (routeColor) to match your app's branding.

4. Deep Mendix Integration (Data & Events)

The widget isn't just visual; it acts as a primary data source for your Mendix application logic.

• Live Attribute Sync: Continuously writes the active device coordinates backward to Mendix attributes (currentLatitude, currentLongitude), empowering your app to save location breadcrumbs or recalculate ETAs via Nanoflows.
• Interactive Triggers & Geofencing:
  • On Click (onClick): Captures user map interactions.
  • On Location Updated (onLocationUpdated): Triggers workflows continuously as coordinates change.
  • On Route Ready (onRouteReady): Signals the UI that mapping is complete (useful for hiding loading states).
  • On Destination Reached (onDestinationReached): Automatically executes business logic when the user breaches a customizable geofence (destinationRadiusMeters) around the target destination!
  • On Error (onError): Provides reliable fallbacks for device permission denials or API timeouts.

🛠 Technical Details

• Widget Type: Native Pluggable Widget
• Supported Platforms: iOS & Android (Mendix Native Mobile)
• Underlying Libraries:
  • @react-native-community/geolocation (Hardware GPS Access)
  • react-native-webview (Mapping Container)
  • leaflet (Map Rendering)
  • @turf/distance (Geospatial Math)
• Default Routing Engine: Project OSRM (https://router.project-osrm.org) natively requesting the driving profile configuration.

Documentation

1. Robust Mapping Engine

The widget embeds a lightweight, high-performance Leaflet map instance nested securely inside a React Native WebView. This architecture provides rich map tiling from OpenStreetMap (OSM) without the heavy overhead of native SDK integrations.

2. Live Geolocation Tracking

By deeply integrating with the device's native GPS sensors, the widget actively plots and updates the user's true location on the map.

• Follow User Mode: Configuration property to automatically pan and center the map as the user moves.
• Start From Current Location: Instantly treat the device's initial GPS lock as the starting point for route calculations.

3. Dynamic Road Routing

The widget intelligently calculates driving paths between the user and their destination by querying OSRM (Open Source Routing Machine).

• Automatically decodes spatial polylines to accurately draw the shortest path along actual road networks.
• Custom Routing Servers: Supports connecting to private or self-hosted OSRM endpoints (routingServerUrl), ensuring data privacy and enterprise scalability.
• Customization: Easily define the routing path color (routeColor) to match your app's branding.