search

yafred / leaflet-responsive-popup

This plugin overrides L.Popup to remove the need to move the map to be able to see the content of the popup.
https://yafred.github.io/leaflet-responsive-popup/
BSD 2-Clause "Simplified" License
90 stars 20 forks source link

Issues with popup on the right hand side using react #13

Closed lm93547 closed 4 years ago

lm93547 commented 4 years ago

Hello, I keep running into a error with the popup on the right hand side of a react leaflet map. I am right in assuming that this popup here should shift to the left of the marker? No other issues other than this?

Screenshot from 2020-02-07 23-53-43

lm93547 commented 4 years ago

I have tried autoPanPadding: [10,10], offset: [10,10] but with no effect. Any ideas would be greatly appreciated.

yafred commented 4 years ago

Is there a way you can put your example online ?

lm93547 commented 4 years ago

Unfortunately not due to the closed nature of the project. I can post a snippet of the code I am using to initialise the responsive popup if that would help?

lm93547 commented 4 years ago

https://github.com/serge-web/serge/tree/responsive-popup-clean Try branching from this and running the project like it says in the instructions

yafred commented 4 years ago

I'll have a look ...

My guess is that the right hand panel is not taken into account when calculating the position (because it covers the map)

Try and use regular L.Popup with autoPan: true to see if it behaves the same way.

lm93547 commented 4 years ago

Yes I thought the same, but the “map” when inspected is the map only, the sidebar does not cover it. This can be replicated by “inspecting element” on the map div, and it just highlights the map element. But I will try the regular popup and get back to you.

lm93547 commented 4 years ago

Just tested using L.Popup with autoPan: true and the same behavior is seen.

lm93547 commented 4 years ago

So when console.logging map.getSize the map size is consistent with the actual size, and not the size plus the space under the right hand side bar:

Screenshot from 2020-02-09 23-46-05

See this line in the console: size in pixels:Point(969, 981) when a rectangle selection of just the map is made in GIMP, it shows 968 x 981, which is consistent with the map size.

When adding a console.log to the canGoBottom field in the where can we fit the popup? section if I position it so the marker is at the bottom, the console shows canGoBottom: false yet the popup is still at the bottom:

Screenshot from 2020-02-10 00-17-33

yafred commented 4 years ago

I'm struggling getting the environment right :(

Is the attribution also hidden ?

lm93547 commented 4 years ago

Best way I found was to clone my branch then do yarn install then yarn start:server then do yarn build inside the serge folder cloned. And set the local host ip in the env file to whatever your local IP is.

yafred commented 4 years ago

Windows is not supported :(

Did you see my question about the attribution (the copyright that should be on the bottom right of the map).

If it is not visible and as the regular popup also hides under your right panel, I can also seek help here

yafred commented 4 years ago

Please reopen if your case works fine with L.Popup but not with L.ResponsivePopup