Log in to AnswerLog in to Follow
UserImage.jpg
Pratik Giri
23Views
5Comments
Solved
[LeafletJS - Reactive] How can i display information when user clicks on markers on map ?
Question
Beginner
Forge
Maps
leafletjs-reactive
Reactive icon
LeafletJS - Reactive
Forge component by Vincent Koning

I have used leaflet for plotting markers on map . I tired bindpopup but I don't understand how it works  

0
0
21 Apr
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP
Solution

Replying to Pratik Giri's comment on 22 Apr 2022 11:28:40

Hi Pratik,

You can use the below-mentioned JS which attaches a popup to the marker.

JavaScript Snippet:

L.marker(location).addTo(myMap).bindPopup(popupContent).


Also set the z-index value for the leaflet popup in the StyleSheet section

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    z-index: 250;
}

See the demo screen: LeafletJS_Marker_Popup

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

See solution in context
LeafletJS_Marker_Popup.oml

0
0
24 Apr

Hi Pratik,

If the location on the map is denied by you means its lat and long is inserted by you only, you will definitely have an identifier over that location so create a click client action based on that identifier and open a popup with information that you want to display


you can refer to this forge component:-

https://www.outsystems.com/forge/component-overview/10739/google-maps-reactive-library

0
0
22 Apr

I have a leaflet map . is there any kinda of a thing in that can used from it . for displaying info via clicking on markers or polyline . 

0
0
22 Apr
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP
Solution

Replying to Pratik Giri's comment on 22 Apr 2022 11:28:40

Hi Pratik,

You can use the below-mentioned JS which attaches a popup to the marker.

JavaScript Snippet:

L.marker(location).addTo(myMap).bindPopup(popupContent).


Also set the z-index value for the leaflet popup in the StyleSheet section

.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
    z-index: 250;
}

See the demo screen: LeafletJS_Marker_Popup

Refer to the attached oml

I hope this helps you!


Kind regards,

Benjith Sam

LeafletJS_Marker_Popup.oml

0
0
24 Apr

Replying to Benjith Sam's comment on 24 Apr 2022 16:36:30

In javascript what is window inside addto ? . 

0
0
24 Apr
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP

Replying to Pratik Giri's comment on 24 Apr 2022 17:36:33

Hi Pratik, 

window is a global object, for more info refer this link: https://developer.mozilla.org/en-US/docs/Web/API/Window


Kind regards,

Benjith Sam

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