Hi @Riya Mehere ,

I got the leafletJS component working to show/hide the default UI Popup every time a user clicks the map (including a Marker). However, clicking a Circle doesn't trigger this event (at least for me).

You can call a Popup and use a boolean variable (default set to false so the popup starts hidden). Then have a Screen Action to toggle its value (show/hide the popup).

This Screen Action will be used by the Close button in the popup (otherwise you couldn't close the popup) and also will be used in the Leaflet's Weblock Handler (more on this a bit later).

In the Leaflet Weblock you need to expand the MapEvents and set the Click to True, like this:

You also need to set a Screen Action as the Handler of the Leaflet's Weblock's OnClick event:

This action has a MouseEvent input parameter with useful info, such as the lat/long coordinates the user clicked. It also has the Container Point coordinates, which can be useful to set top/left position so that elements (containers, text, etc.) appear near the click.

Here I just converted them to text so I can show the exact coordinates the user clicked in my Popup. I will also need to call the TogglePopup screen so the popup can appear.

Since I believe you will have multiple Markers in the map, it may be useful to create a function to check what is the closest Marker (so its info show in the Popup). Then you can have multiple popups and show specific coordenates or other info (text, image, etc.) for that popup you want (and not using MouseEvent input parameters).

If you just want some text (can be an expression) appearing next to where was clicked, you use a boolean to show/hide it and even place it where the user clicked by using top/left parameters that we can get from MouseEvent.

Install the Demo of the component as well to see how Events are beeing used:

Using this CSS, you can have a boolean (showText) to control if the expression (or other elements) appear and its position:

Be sure to place the Leaflet Weblock inside a container that has the class (parent-container) and the element you want to show (I used an expression) having its style class either "display-none" or "text-overlay", while giving as Attribute a sytle for the Top and Left and using variables for their values.

The X and Y (Long Integer) can be set when user clicks on the map, coming from the MouseEvent input parameter.

Please let me know if this has helped you in any way!

Thanks,

Fábio

Hi @Riya Mehere,

can you please show what your data entity has? And what do you use this assign for? (maybe you could call directly aggregate's data in the "AddMarker" action).

Also, if you only want the markers to show after clicking a Button, you could set you Aggregate "data" to fetch Only on demand.

And in that button's action, you refresh the aggregate (fetch its data) and run the cycle adding each element (current) as a marker. Here I made up a Data entity with some attributes (not knowing yours):

Depending if you'll just want one text container (or one popup), you can have a local variable for the "ClosestMarker" of MarkerInfo record data type (or your "data" data type).

You can then use a Popup or that container with the text-overlay CSS trick and adding borders, background color, etc.

You just need to have the content changing by using expressions. Here I use what would be stored in that ClosestMarker record. 

To find the closest marker, I need to calculate distances everytime user clicks on the map. 

Keep in mind having distances with negative values, we should guarantee a positive distance is properly calculated. Could be interesting to encapsulate this calculation into a Function and test multiple scenarios (negative with positive coordinates and vice-versa) to see if the distances are calculated correctly.

For this exercice, I just made a few changes to the OnClickMap's screen action:

That way depending where the user clicks, it appears the info about the closest location, something like this:

I used the show/hide container approach, but the show/hide Popup would be similar. To use it inside a Popup, instead of having the container with the expressions, just put them inside the Popup (but without any CSS to hide or move the container).

Please let me know if that has helped you!

Thanks,

Fábio

Hi @Riya Mehere,

you can use the OutSystems' Sidebar to do something like that. Just be sure to update from Forge the OutSystems UI 2.8.3, so you have these new options:

Then you'd be able to choose which side you want your sidebar to appear on the screen. The predefined options are Left and Right. 

• Entities.Direction.Right - The sidebar is displayed on the right side of the screen.
• Entities.Direction.Left - The sidebar is displayed on the left side of the screen.

More info about this here.

Tip: to use that static entity, you'll also need this:

To open this new Sidebar is a bit different from just having a boolean to show/hide (like a Popup). You need an action that calls the UI's Client Actions. I created a Screen Action which receives a boolean as input to know if it should open or close:

In the OnClickMap I call it to open and to close it I placed the "times" icon (could also be a button / text link).

However, if you set to True the setting "HasOverlay", when the Sidebar is open, any click outside of its area will close it. Maybe this suits you better:

Finally, did you notice that by moving the sidebar to the left, some elements are still above the sidebar? The + and - signs and the copyright at the bottom right. So how can you fix this?

One way is to have the Sidebar inside a container and set its position to other than "static" and a z-index higher than 1.000 (since that's what leaflet has). So you can add a class to the container:

.my-sidebar-container {
    z-index: 1001;
    position: fixed;
}

And that should "fix" it! 

(Actually, you don't need to place the sidebar inside a container in this case, since the Sidebar's position is already fixed. You could simply use the ExtendedClass to call a class where you just set the z-index over 1.000.)

Please let me know if this has helped you!

Thanks,

Fábio

Hi @Riya Mehere,

The text-overlay CSS was only used when I made the container "float" to be close where user clicked. For that, I used the CSS style and this:

Using a Popup or Sidebar, we don't need any of this styles or CSS classes.

Regarding my ClosestMarker local var, I made him a record of my data entity. But you can create a Structure of only what will be needed in the screen.

I attach the .oml file for reference. Please let me know if that helps!

Thanks,

Fábio

Hi @Riya Mehere,

have you tried going to Service Center, in Monitoring tab check the details of your error?

Or run debug to check where it fails? Could it be failing here when I compare Ids in the OnClickMap?

Let me know, thanks!

Hi @Riya Mehere,

that blur effect comes when you have the HasOverlay set to True. As I said before, if the setting "HasOverlay" is True, when the Sidebar is open any click outside of its area will close it. This helps you closing it, but gives you that blur effect.

Setting to False removes the blut effect, but you will need an icon / link / button to call the function that closes the Sidebar. 

You can try using a Floating Content (more info about it here) inside your Sidebar to quickly insert and align some icon/image. Although its use case is actually to display content on top of other screen element (maybe it could help you too to show some other info).

Here I used a left arrow to close the Sidebar.

Then you can also place a Floating Content to the left of the map (with a right arrow) to make it open the Sidebar.

I attach the .oml so you can have a look.

Please let me know if this helped you and mark it as answered / solution if it does.

Thanks,

Fábio

Hi @Riya Mehere,

this seems a different type of question. To a proper forum organization and for the good of the community, can you please close this question and open a new one?

Thank you so much!

Fábio