Leaflet error when zoom after close popup in lightning component

Question

I created a map and added markers on it in salesforce lightning component , issue is: click on marker >> click on map (this close the popup) >> zoom in and out >> this error displayed for each zoom step:

Uncaught TypeError: Cannot read property '_latLngToNewLayerPoint' of null throws at /resource/1498411629000/leaflet/leaflet.js:9:10763

this is the code in component javascript helper:

 ({
        drawMap: function(component,map){

                var mapElement = component.find("map").getElement();
                map =  L.map(mapElement).setView([35.232, 40.5656], 12);
      L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
                {
                    attribution: 'Tiles © Esri'
                }).addTo(map);

            var markers = L.marker([35.232, 40.5656]).addTo(map);

                component.set("v.map", map);  
            component.set("v.markers", markers);

        },

        putMarkers: function(component) {
            var map = component.get('v.map');
            var markers = component.get('v.markers');
            var projects = component.get('v.projects');
            var projectsAction = component.get("c.getProjectsList");
            var markerArray = [];                  
            var symbol; 
var symbol1 = 'symbolURl';           
var symbol2 = 'symbolURl';

            projectsAction.setCallback(this, function(response) {
                var state = response.getState();
                 if( state == "SUCCESS"){
                     projects = response.getReturnValue();

                      if (markers) {
                markers.remove();
            }
            // Add Markers
            if (map && projects && projects.length> 0) {               
                for (var i=0; i<projects.length; i++) {
                    var project = projects[i];
                    if (project.Latitude && project.Longitude) {
                        var latLng = [project.Latitude, project.Longitude];
                        var currentStatus = project.status;
                           if(currentStatus=="status1")
                        symbol = symbol1;

                        else if(currentStatus=="status2")
                        symbol = symbol2;

                        var popupTemplate = '<b style="color:black; font-size:11px;">Project Name:</b><span style="float:right;margin-right:10px;color:#800000;font-size:11px;width:110px;text-align:right; white-space:normal;" > '+project.name;

                    var icon = new L.DivIcon({  
                        className:'',
                        html: '<img style="width:34px;height:37px;" src="'+symbol+'"/>'+
                        '<span style="font-weight:bold;font-size:9pt;">text</span>'
                                  });

                        var marker = L.marker(latLng, {project: project,icon:icon,title:project.name}).bindPopup(popupTemplate,{minWidth:200});
                        markerArray.push(marker);


                    }
                }
                L.layerGroup(markerArray).addTo(map);

                 component.set("v.map", map);  
            }}
                 else if(state == "ERROR"){
                    console.log('Error in calling server side action');
                }
            });

             $A.enqueueAction(projectsAction);
        }

and in javascript controller:

jsLoaded: function(component, event, helper)  {
     var map = component.get("v.map");
         if (!map) {
        helper.drawMap(component,map);
        helper.putMarkers(component);
         }
},
    projectsChangeHandler: function(component, event, helper) {
    helper.putMarkers(component);
}

it seems this issue is only on salesforce where is the problem? please help

Answer 1

Solution given by @sundus didn't work for me. I found out that this problem is caused by the _zoomAnim, so If you don't need animations while zooming disabling also does the trick.

 var map = L.map('map', {zoomControl: true,zoom:1,zoomAnimation:false,fadeAnimation:true,markerZoomAnimation:true}).setView([37.784173, -122.401557], 14);

Answer 2

I solved it by editing the leaflet.js file: search for the word ( _latLngToNewLayerPoint ) and wrap the code with the condition:

if(this._map){}

so if _map is null, skip

I don't know why this bug is only presented in salesforce

Answer 3

I just used the method of the previous answerer, thanks you! And i added this code to project, it works well

L.Popup.prototype._animateZoom = function (e) {
  if (!this._map) {
    return
  }
  var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center),
    anchor = this._getAnchor()
  L.DomUtil.setPosition(this._container, pos.add(anchor))
}