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);
                    attribution: 'Tiles © Esri'

            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) {
            // 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;
                        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({  
                        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});


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


and in javascript controller:

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

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


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);
| improve this answer | |

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


so if _map is null, skip

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

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.