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.

leaflet-responsive-popup's Issues

Tip is displayed even if hasTip is false

See https://yafred.github.io/leaflet-responsive-popup/open-on-map

Angular compatibility

Hi,
Has anyone written libraries to make this compatible with Angular 6?
Thanks!
Emily

Anyone successfully using this plugin with Vue.js ?

Hello,

This plugin is exactly what I need for my Vue.js project so I that's why I am still trying to use it. But as you can guess, without success. I tried many things, as implementing the way I did for vue2LeafletMarkerCluster plugin for exemple, but still cannot make it work.

So if someone may help me, it would be very appreciated !

I can provide screenshots if needed.

Cant open popup on geoJSON element on load

I'm trying to open popup based on GET param. Each cell in the geoJSON have different popup data. I've searched all over the net but didnt find anything...
This is my code:

                angular.extend($scope.layers.overlays, {
                    sold: {
                        name: 'Sold Land',
                        type: 'geoJSONShape',
                        data: data,
                        visible: true,
                        layerOptions: {
                            style: {
                                color: '#ff0000',
                                weight: 1,
                                fillOpacity: 0,
                                opacity: 1,
                            },
                            onEachFeature:
                                function (feature, layer) {
                                layer.on('click', function (e) {
                                    $http.get("/ajax.php?landId=" + feature.properties.id).success(function (data, status) { //var landData =
                                        var landDiv = document.getElementById('sold-detail-' + feature.properties.id);
                                        landDiv.innerHTML = data;
                                        return data;
                                    });
                                });
                                const popup = L.responsivePopup({className: 'buyPopup'}).setContent('<div class="buyPopup" id="sold-detail-' + feature.properties.id + '">Loading...</div>');
                                layer.bindPopup(popup).openPopup();
                            },
                        },
                    },
                    selectedLand: {},
                });
                    // Put the cells on an associative array
                $scope.cells = {};
                for (var i = 0; i < data.length; i++) {
                    var cell = data[i];
                    $scope.cells[cell['properties']['type']] = cell;
                }
            });

how to implement with react Leaflet ?

I am very intrested on your pluggin, however I am strugling to how to implement it with react leaflet

Any way to have the popup origin move when popup resizes while open?

demo

Method Chaining in initLayout Causing Exception

When using Leaflet 1.1.0, disableScrollPropagation seems to be returning null, breaking the method chain in leaflet.responsive.popup.js, line 42.

L.DomEvent .disableClickPropagation(wrapper) .disableScrollPropagation(this._contentNode) .on(wrapper, 'contextmenu', L.DomEvent.stopPropagation);

Separating this chain into three separate calls seems to resolve the issue.

Responsive popup width

Hello

I'm having problems implementing leaflet-responsive-popup on my custom map. I already have popups defined with content - mainly text and iframes. They appear like this:

When I put this content within the responsive popup I can't get it to match the width of the content, see image:

I've tried defining the width of the content using a div but the code of the responsive popup doesn't seem to allow for this width. Is it possible to resolve this problem?

Any help would be greatly appreciated!

Thanks very much!

New release

Can a new release be pushed to npm to include the fix under e7d8bfd

Issues with popup on the right hand side using react

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?

autoPan and keepInView ignored

Hi yafred,

Thank you for the nice responsive solution.
Is working very well but I found an issue.
AutoPan and KeepInView have no effect.

I don’t know if this is on purpose.

Cheers,
Robert

Need help - Leaflet opening on center

I am creating dynamic popups based on the response from DB, and I implemented a leaflet-responsive-popup which works fine when opening on edges (left, right, top), however, it does not function correctly on the bottom edge, and if for example opening on the middle of the screen.
Here is image of bottom:
https://postimg.cc/75xzR4RN

If I open in the middle the popup is opened but OVER the icon not on top. Sorry for the black dots on the image but I need to hide that data.
LINK: https://postimg.cc/zySjLpsx

However, if I now leave the popup open and scroll then the popup gets positioned correctly?

https://postimg.cc/Z9s63QVx

Any idea why would be much appreciated?

    this.map = L.mapquest.map('map', {
      center: [25.73, 30.3],
      layers: [L.mapquest.tileLayer('map')],
      zoom: 2.5,
      minZoom: 3,
      maxZoom: 16,
      closePopupOnClick: false,
      doubleClickZoom: false,
      zoomControl: false
    });
    this.redIcon = L.divIcon({
      className: 'icn',
      iconSize: 20,
      iconAnchor: [10, 20],
       popupAnchor: [0, 0],
      html: '<div class="map-pin map-pin--with-icon map-pin--red"><span class="material-icons">close</span></div><div class="map-pin-pulse"></div>',
    });
    var popup = L.responsivePopup({
      hasTip: true,
      autoPan: true,
    }).setContent(
      fl => {
        const popupEl: NgElement & WithProperties<MyPopupComponent> = document.createElement('popup-element') as any;
        popupEl.object = object;
        popupEl.map = this.map;
        popupEl.takeFn = () => this.statusAndCount();
        popupEl.addEventListener('closed', () => document.body.removeChild(popupEl));
       /* document.body.appendChild(popupEl); */
         return popupEl;
      }
    );

    let tempMarker = L.marker([object.LATITUDE, object.LONGITUDE], {
      icon: tempIcon,
      draggable: false,
      zIndexOffset: object.Z_INDEX
    }).addTo(this.map).bindPopup(
      popup
      , {
        maxWidth: 800,
        minWidth: 700,
      })

    return tempMarker;

Bad popup position due to wrong containerHeight

Hi,

In certain cases, the computed containerHeight is wrong (i saw, internally, that it relies on offsetHeight). When I surround the code within the _updatePosition function with a setTimeout then it works as expected but the user experience is terrible.

Do you have any ideas how to solve this issue? Or maybe, an idea of why, only in certain cases, containerHeight is wrong?

wrong position when anchor is not [0,0]

Visible here when popup is portrait

Popup on opening is not aligned with the marker using react

Versions that i'm using.

• leaflet version: 1.6.0
• leaflet-responsive-popup: 0.6.4
• react-leaftlet: 2.6.3

Including your code breaks the alignment of the popup with the marker both vertically and horizontally.

Here is a demo where you can see the problem.

Close button is malfunctioning and redirect browser to #close

I've notices issues when users press the close button they will be redirected to anchor #close. Based on used some application routers this will led to issues without real requirement. From my understanding of the code this is unnecessary as the close button event will be catched without relations to the anchor.

closeButton.href = '#close';

Avoid Popup Getting Covered by Map Attribution

Is there a way to prevent the popup from going too close to the edge of the map? Sometimes the bottom of the popup gets covered by the map attribution in the bottom right of the map.

Tooltip over text in the popup when setting font-size

I'm trying to make the text bigger in the content, but when I set it to 15px or more the tooltip comes over the text:

JS:
const popup = L.responsivePopup().setContent('<div class="buyPopup" id="land-detail-' + feature.properties.id + '">Loading...</div>');

CSS:
.buyPopup { font-size: 16px; font-family: 'Mulish', sans-serif; text-align: center; }

CSS Demo page error

https://yafred.github.io/leaflet-responsive-popup/popup-css-rtl

This demo page is looking a bit messed up at the moment with all the popups stuck on the left side of the page.

Bad popup opening location with rigth to left text direction

With HTML page set with direction: rtl the pop does not open on the right location. It's OK on vanilla leaflet without leaflet-responsive-popup.

On https://jsfiddle.net/Lypco4w8/1/ not the style="direction: rtl;" and click on the marker.