B4A Library [B4X] [B4A] [B4J] [b4xlib] LeafletView

​

LeafletView is a cross-platform wrapper for Leaflet.js, providing a lightweight alternative to Google Maps. It uses OpenStreetMap by default, meaning no API keys are required for basic mapping.

This version is distributed as a .b4xlib, making it easy to include in any B4A or B4J project.

Key Features:​

• Zero Configuration: No Google Play Services or API keys required.
• Road Routing: Calculate and draw routes with distance and ETA data via Leaflet Routing Machine.
• B4X Unified: Identical API for B4A and B4J.
• Interactive: Built-in events for map interaction, marker clicks, and routing results.
• Fully Customizable: Toggle zoom controls, attributions, and persistent distance labels via the Designer.

---

Events:​

• MarkerClick (Data As Map) - Returns ID and ExtraData.
• MarkerPopupClick (Data As Map) - Triggered when the popup action is clicked.
• MapClick (Data As Map) - Returns Lat/Lon of the clicked point.
• ZoomChanged (Data As Map) - Returns current zoom and center.
• RoutingFound (Data As Map) - Returns distance (km) and car_eta.
• RouteClick (Data As Map) - Triggered when tapping the route line.

---

How to install:​

1. Download the attached LeafletView.b4xlib and place it in your Additional Libraries folder.
2. In the B4X IDE, refresh the Libraries tab and check LeafletView.
3. Add a CustomView in the Abstract Designer and set its Custom Class to LeafletView.
4. Ensure your project has the JavaObject and JSON libraries selected.

Included in the Download:​

• LeafletView.b4xlib: The compiled library.
• Example Project: A demo showing markers, routing, and event handling.

Credits: - Leaflet.js

 

[Mashiane]

@Abdull Cadre

How can I raise a map_ready event? I'd like to show a spinner during the map load until the map becomes ready?

Thanks.

 

[aminoacid]

Nice! Any way to add layers?

 

[Dr_JU]

Looks great!

 

[Abdull Cadre]

LeafletView v1.2​

New Event: Map_Ready​

Added a new event that fires when the map has finished loading and is ready for interaction.

Private Sub AC_LeafletView1_MAP_READY (Data As Map)
    Log("MAP_READY")
End Sub

 

[Sergey_New]

Please tell me how to set the "Click for details" text in a multilingual application to match the current language.

 

[Abdull Cadre]

Please tell me how to set the "Click for details" text in a multilingual application to match the current language.

EDIT: 2026.08.17 Version 1.3
Added multilingual support via Designer Properties:
- MarkerPopupText: Customizable text for marker popup details
- RoutePopupTitle: Customizable title for route popup

 

[Sergey_New]

EDIT: 2026.08.17 Version 1.3

Thanks for the new version! Unfortunately, it doesn't work at runtime. Maybe I'm doing it wrong? Please take a look.

Spoiler

Sub Globals
    Private AC_LeafletView1 As AC_LeafletView
    Private extra1 As Map
    Private titl As String
    Private Lat,Lon As Double
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
End Sub

Private Sub AC_LeafletView1_MAP_READY (Data As Map)
    AC_LeafletView1.MarkerPopupText="Показать детали"
    AC_LeafletView1.AddMarker("M1", 56.142776, 40.400002, titl, extra1)
    AC_LeafletView1.SetPosition(56.142776, 40.400002, True)
'    AC_LeafletView1.AddMarker("M1", Lat, Lon, titl, extra1)
'    AC_LeafletView1.SetPosition(Lat, Lon, True)
    AC_LeafletView1.SetZoom(10)
End Sub

Sub ShowMap(coordinates() As Double, name As String)
    Lat=coordinates(0)    '56.142776
    Lon=coordinates(1)    '40.00002
    titl=name            'Владимир
    extra1 = CreateMap("db_id": 101, "status": "Active", "note": "High police presence", "time": DateTime.Time(DateTime.Now))
End Sub

The map activity is called from the main activity using this code:

Private Sub Button1_Click
    Dim coordinates(2) As Double
    coordinates(0)=56.142776
    coordinates(1)=40.00002
    CallSubDelayed3(OSMap,"ShowMap",coordinates,"Владимир")
End Sub

 

[Carlos marin]

Greetings, With the author's permission, I added the option to add an icon to the bookmark.

events: AddMarkerCustomFromFile and AddMarkerCustom

Dim ExtraData As Map = CreateMap("db_id": 101, "status": "Active", "note": "High police presence", "time": DateTime.Time(DateTime.Now))    
MapView.AddMarkerCustomFromFile("1010", 6.349536, -75.565885,"Yo Reporto",ExtraData, File.DirAssets, "gate2.png",40,40)
    
Dim ExtraData1 As Map = CreateMap("db_id": 102, "status": "Inactive", "note": "High police presence in zafely2", "time": DateTime.Time(DateTime.Now))
MapView.AddMarkerCustom("1020", 6.326475, -75.558027,"Yo Reporto",ExtraData1, "https://mirul/logo.jpg", 50,50)

Two quick improvements:

1. I added EscapeJS to escape quotes in titles and URLs (previously, an apostrophe in the text would break the JavaScript).

2. I fixed a posible bug: in the original version, `window.pClick` was redefined every time you added a marker, so if you had multiple markers, clicking on the popup of any one of them would send the data (`ExtraData`) from the last marker added, not the one you actually clicked. Now each marker stores its own extra data in a dictionary (`markersExtra`) and is looked up by ID.