[LeafletJS - Reactive] How can i display information when user clicks on markers on map ?
leafletjs-reactive
Reactive icon
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  

mvp_badge
MVP
Solution

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

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

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 . 

mvp_badge
MVP
Solution

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

In javascript what is window inside addto ? . 

mvp_badge
MVP

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

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