Creating a popup without requiring lat/long positioning

[David Godfrey]

Is it possible to create a popup that can be positioned relative to the screen layout, rather than by having to use lat and long co-ordinates?

I want to be able to have a single popup that can be opened / closed when a marker is clicked, the docs show the following example code:

var popup = L.popup()    

.setLatLng(latlng)   

.setContent('<p>Hello world!<br />This is a nice popup.</p>')    

.openOn(map);

However, I want the popup to be absolutely positioned relative to the screen layout, not relative to a marker or similar - in other words, open a poup in a fixed position on the screen regardless of where the marker is that is clicked to fire the event to open the marker. I can't see how I can do this using lat/long because that will always change depending on map scrolling, zoom levels etc.

Do I need to create something that inherits from DivOverlay in order to achieve what I need or is there a simpler ready-made solution?

Many thanks!

[Edwin Corrigan]

Hi David, 

Perhaps a leaflet control might be an option? You can position it in either of the corners and it will stay there. 

Check out this codepen, it has an example. I left a comment on how to change the corner.:

https://codepen.io/corrigancd/pen/QWxexbK

Best Regards, 

Edwin

Edwin Corrigan 

 

Tel: (353) 87 7552 666

edwint....@gmail.com

Want to learn React-Leaflet? Check out this course

--

---
You received this message because you are subscribed to the Google Groups "Leaflet" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leaflet-js+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/64d25515-d980-41f5-9f1d-8abbccc5c01bn%40googlegroups.com.

[Mark Lawton]

another option is to convert pixel location to latitude and longitude.  I’m pretty sure there is a way to do that, although I can’t remember what it is.

To view this discussion on the web visit https://groups.google.com/d/msgid/leaflet-js/CAEMS%2BFyTJjnLhCGrTc-qW7xZr6AzmO_bWu9QQNueVPjb5AvPyQ%40mail.gmail.com.