CODEWITHSUNDEEP
javascriptangularleaflet
Fatih Doğan
Fatih Doğan

Reputation: 427

Leaflet popup doesn't work second time

I created markers on the map with for loop. When click a marker popup is opening. After second time clicked the marker popup isn't opening. $scope.resSearchAnnouncement have JSON data. How can I solve this problem?

var ngApp = angular.module('test', ['']);
window.ngApp.controller('controllerHome', ['$scope', '$controller', '$location',
function ($scope, $controller, $location) {
        $scope.map = L.map('map', {
            zoomControl: true,
            maxZoom: 18,
            minZoom: 0
        }).setView([$scope.lat, $scope.lng], 13);
        $scope.map.zoomControl.setPosition('bottomright');
        L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        }).addTo($scope.map);
        $scope.marker = L.marker($scope.map.getCenter(), {
            draggable: true,
            icon: L.icon({
                iconUrl: '/assets/img/pin-4ldpi.png',
                iconSize: [30, 35],
                iconAnchor: [30 / 2, 35],
            })
        }).addTo($scope.map);
  for (var i = 0; i < $scope.resSearchAnnouncement.length; i++) {
        var icon = "";
        announcementMarker.id = $scope.resSearchAnnouncement[i].id;
        announcementMarker.annoInfo = $scope.resSearchAnnouncement[i];
        announcementMarker.on('click', function () {
            if (this._popup == undefined) {                                     
                content = '<div class="d-block color1-lighten-15 p-2"><span class="mb-2 d-block">' +
                    '<span class="mb-2 d-block color2-lighten-3 p-2"><strong>' + this.annoInfo.status + ' ' + this.annoInfo.category + ' / ' + this.annoInfo.subcategory + ' </strong></span>' +                        
                    '<span class="d-block pl-2"><strong>Tarih </strong>: ' + $scope.dateFormatter(this.annoInfo.anndate) + ' </span>'
                '</div>';
                this.bindPopup(content).openPopup();
            } else {
                this.openPopup();
            }
        });
        $scope.markerClusters.addLayer(announcementMarker);
    }
}]);

Upvotes: 0

Views: 1010

Answers (2)

reza taqipor
reza taqipor

Reputation: 1

Popup has an onClose attribute, which you should declare as below (and before this I personally use useState hook for the onClick attribute of Marker tag)

onClose={() => {
  setXxx(null);
}}

Upvotes: 0

Saurabh Yadav
Saurabh Yadav

Reputation: 3386

var marker = L.marker([51.505, -0.09], {});
marker.addTo(map);
marker.bindPopup('popup content');

marker.on('click', function () {
    if (!this._popup) { // when maker dont have pop up, this will bind popup and and open it
        this.bindPopup('Popup content').openPopup();
    }
});

I have created this sample for you, check it Hope it will helps you !

Upvotes: 4

Related Questions