88
Views
6
Comments
Solved
[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  

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 . 

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 ? . 

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

hi Benjit, i Use data action to Create List > the list information to create the Icon On Map Based On Long lat, step by step use your solution but the click not show the popup text
how to solve it? change the JS or Anything else?

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