[LeafletJS - Reactive] Leaflet Polygon Click event
Forge component by Vincent Koning
Application Type
Service Studio Version
11.12.0 (Build 48966)
Platform Version
11.13.1 (Build 31652)

Hello experts,

I have managed to add all the polygons in my map ; but I am not sure how to get the polygon which is clicked on click of the mouse event. If I pass the the variable as "


" , it always gives me the first name of the polygon. So on mouse click of each polygon I am getting the same only.


Is it possible that you create a small demo app that shows the issue and upload it to this thread? I can then take a look and see what is wrong. 



Hi Vincent,

Thanks for your response. It's difficult for me to create a POC as the tile we are using is provided by the client. Let me explain by giving some screenshot.


1)On Initialize of the page I am populating the polygons which is shown in capture2.png.

2)Then on the same initialize action , I am making the Initialize client event to true as shown in capture3.png

3)On Leaflet event I am populating the polygon with the values which I set on initialize and on click event calling a action which is Leaflet on click which is shown in capture1.png.

Here to differentiate which polygon the users clicked, I have used the expression "



Then I used a pop up which is there in Outsystem and used an expression called var1 to populate the value.

The var1 is populated on "LeafletOnClick" action which is shown in capture4.png

But each time I click an polygon in Map, I am getting the same Name  in the popup .

Please let me know if you need any further details. I am happy to share the same.

Hi Mishra,

I have created a small application to test your issue and I notice the exact same issue. When enabling the debug option to get the actual event I noticed that Leaflet is not returning enough information to know the polygon you clicked. I will try to find a solution but not sure if I'll find one. I'll let you know when I have more information.

The actual event. Notice the lack of a "RawEvent.target.options.name" property (or something similar).




Going through the documentation of Leaflet I also see no method to add a name to the Polygon that can then be returned by Leaflet. Things are getting interesting :) 

Doc: https://leafletjs.com/reference-1.6.0.html#polygon

I found the solution but I will probably will not have the time to publish the fix tonight. I'll try my best but it could become tomorrow. 

The fix is inside the Leaflet component itself. So I will need to update the forge component and this will take some prep time. 

Hi Mishra,

I have just uploaded a new version of LeafletJS Reactive. This contains a fix for the missing name property when clicking on Polygons (among others). I hope this will help you!



Hi Vincent,

Thanks for making your time out and helped on the this. So do I need to re-import the  LeafletJS Reactive into my outsystem environment . I am not sure the steps for it as I am not that expert in this.



Hi Ghanashyam,

All you need to do is install the new version via the Forge. Then update the references (no changes will be detected but you will need to apply the "changes") and your all set. 



Thanks Vincent. You are awesome. It did work . Thank you so much for all the time .

I need help on creating a custom HTML window in Leaflet popup . I am not sure how to do that. Anyway let me create a separate thread to it .

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