29
Views
1
Comments
[OutSystems Maps] Outsystem Map (Leaflet Map) Marker Cluster Implementation
outsystems-maps
Reactive icon
Forge asset by OutSystems
Application Type
Mobile, Reactive

I am using outsystem leaflet map form interactive. We there is many marker the map is not looking good and it is difficult to navigate. So I want to implement cluster view. So the nearby marker will show in cluster. 

Please Note : I have gone through this doc https://github.com/Leaflet/Leaflet.markercluster . But not sure about the implementation.

So Could you please guide me how to implement marker cluster in Leaflet map using outsystem map.


2025-12-09 14-11-18
Janakiraman JR

Hi Tamal,

To enable clustering in OutSystems Leaflet map, you'll need to use the Leaflet.markercluster plugin manually, as it's not natively supported in the Interactive Map component.

  1. Include required files:

    • Add leaflet.markercluster.js and the CSS files to your app via Scripts/CSS.

  2. Initialize cluster group after the map is ready:

    var clusterGroup = L.markerClusterGroup();

    map.addLayer(clusterGroup);

  3. Add markers to the cluster instead of the map:

    var marker = L.marker([lat, lng]).bindPopup("Info");

    clusterGroup.addLayer(marker);

  4. Set maxZoom to enable clustering:

    map.options.maxZoom = 18;

Avoid using AddMarker action from the OutSystems component, use JavaScript to add markers directly to the cluster group.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.