How to add a pop up window on click of the marker of leafletJS in outsystems
Question

Please tell me which widget will be useful or any dependency that can be added in leaflet js to show a popup window of the place on the click of the marker coordinate on the maps. Currently it is only displaying the title of the marker on its hover.

Screenshot (199).png

You need to find the nearest marker and assign it to a local variable, as I did inside the OnClickMap action:

Then you only show in the sidebar the info from that local variable, using its name, lat, long, or any other attribute you may have.

Let me know if you got it working!

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

sure fabio.

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

thank you so much, that was really helpful, can you please put some more light on how to display the marker data like the place name etc in the popup content as I have multiple marker which I am displaying using for each loop.

Screenshot (205).png

this is the output currently and I want to display pop up for each marker with the corresponding information of that particular marker.


Screenshot (204).png

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

Hii Fabio, can you please help me regarding the sidebars in leafletJS, do we have a particular dependency for sidebar, I have a data of coordinates( lat, lng) along with the name of the place and 1-2 more info like cuisine type etc, and on click of the marker sidebar should be displayed. something like shown in the attached image

Screenshot (210).png

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

thanks a lot fabio, I'll try this, if possible can you share the .oml file for reference.

can you please tell me the what to assign in the setshowtext action?

hello fabio, thank you this was really helpful, it is implementing correctly now on the map click, sidebar is showing, but the only blocker is how to display the marker info on the sidebar. like in yours it is coming lat long and the name of place.

The SetShowText just received either True or False as input and set it to the local var ShowText.

But using the Sidebar I didn't use it anymore.

You need to find the nearest marker and assign it to a local variable, as I did inside the OnClickMap action:

Then you only show in the sidebar the info from that local variable, using its name, lat, long, or any other attribute you may have.

Let me know if you got it working!

Thanks,

Fábio

thank you fabio, is "closestMarker" a local variable in this case and what is its datatype( is it marker2 of leafletJS) , also can you share the data entities of the list. If possible can you please send the .oml file for reference. I need to change it according to my data list format.

hello fabio, can you please tell me from where can I add this text-overlay and container property.

text overlay.png

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

LeaflefJS_Fabio_Tests.oml

hey fabio, thanks a lot that was of great help, I tried to execute the things you told with may data aggregate, and this unexpected identifier error is coming, what should I do for that, I have changed all the values according to the new data , still it is showing error, I am attaching the images for reference, it would be of great help if this could be resolved.

Screenshot (12).png

Screenshot (14).png

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!

Hey fabio, it is resolved now, thank you so much for all your help. Can you help me with this( please refer the attached image ) the background map should not get blurred, when the pop up shows up. How can I change the css for that.

Screenshot (22).png

Something like this, the sidebar should look more like a side panel/window more where the maps main container dosent gets blurred rather than a sidebar.

Screenshot (23).png

I have commented to css for sidebar container, still not getting the desired outcome. 

Screenshot (25).png

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


LeaflefJS_Fabio_Tests_FloatingContent.oml

Thank you so much Fabio, it was really helpful, it works now.


Hi fabio, can you help me out with this kind of functionality where when I click on the polyline then all the markers data should be displayed on the side window in the form of card sequentially. So basically I have 4 datasets(lat, lng, name of place etc)  (1 for each polyline) and I need to display that particular polylines data on the side window, I am attaching the image for refernce. So this side window basically tells the sequence of the markers, and data is displayed in the cards which should be connected via arrow.

screen-shot-2021-08-28-at-7.12.13-pm.png

Currently , I have plotted the 4 polylines for 4 different datasets and I should be able to reflect the each polylines data in the card stacked format for each polyline on click. Currently I am explicitly putting the list value as the 1st dataset so all the cards of 1st dataset are being displayed. Now I want to add the functionality where when I click on the polyline, that particular dataset is being reflected on side windows card list.

Screenshot (41).png

here I have simply put the first dataset as the source to the list container of the side winodw, how can I change the source to dataset2 or dataset3 according to the click of that particular polyline corresponding to the datasets.

It would be of great if you can help me with this.

Screenshot (42).png

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

sure fabio.

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