1

As the title says, I am trying to make a LeafletJS map working in a Lightning component on SF1. If I preview my application on the web, it all works. If I try to drag the map on a mobile device in SF1, the app breaks.

It gives following Errors:

#1

[Illegal invocation]

Object.m@(url-sf-env)/auraFW/javascript/(somecode)/aura_prod.js:720:345 e._simulateEvent()@/resource/leaflet/leaflet.js:7:132876 e.()@/resource/leaflet/leaflet.js:7:132053

#2

[Illegal invocation]

Object.m@(url-sf-env)/auraFW/javascript/(somecode)/aura_prod.js:720:345 e._simulateEvent()@/resource/leaflet/leaflet.js:7:132876 e._onDown()@/resource/leaflet/leaflet.js:7:132103 Proxy.r()@/resource/leaflet/leaflet.js:7:5976

The Code for my map is:

AccountMapUnit.cmp

<aura:component>
    <aura:attribute name="map" type="Object"/>
    <aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/>
    <aura:handler event="c:AccountSelected" action="{!c.accountSelected}"/>

    <ltng:require styles="/resource/leaflet/leaflet.css" scripts="/resource/leaflet/leaflet.js" afterScriptsLoaded="{!c.jsLoaded}" />

    <div id="map"></div>
</aura:component>

AccountMapUnitController.js

({
    jsLoaded : function(component, event, helper) {

        var map = L.map('map', {zoomControl: false}).setView([37.784173, -122.401557], 14);

        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_map/MapServer/tile/{z}/{y}/{x}',
                    {
                        attribution: 'Tiles &copy; Esri'   
                    }).addTo(map);
        L.control.scale().addTo(map);
        map.dragging.enable();

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

        var currentPosition;
        var options = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0
        };
        var geoSuccess = function(position){
            currentPosition = position.coords;

            var currentLocationMarker = L.circleMarker([currentPosition.latitude, currentPosition.longitude], {
                color: '#3388ff'
            }).addTo(map);

            map.panTo([currentPosition.latitude, currentPosition.longitude]);
        }
        navigator.geolocation.getCurrentPosition(geoSuccess, function(err){
            console.warn(`ERROR(${err.code}): ${err.message}`);
        }, options);

    },
    accountsLoaded: function(component, event, helper){
        var map = component.get('v.map');
        var accounts = event.getParam('accounts');
        for (var i=0; i<accounts.length; i++){
            var account = accounts[i];
            var latLng = [account.BillingLatitude, account.BillingLongitude];
            L.marker(latLng, {account: account}).addTo(map).on('click', function(event) {
                helper.navigateToDetailsView(event.target.options.account.Id);
            });
        }
    },
    accountSelected: function(component, event, helper){
        var map = component.get('v.map');
        var account = event.getParam("account");
        map.panTo([account.BillingLatitude, account.BillingLongitude]);
    }
})

AccountMapUnitHelper.js

({
    navigateToDetailsView : function(accountId) {
        var event = $A.get("e.force:navigateToSObject");

        event.setParams({
            "recordId": accountId,
            "slideDevName": "detail"
        });

        event.fire();
    }
})

The Version of leaflet I am using is: Leaflet 1.1.0

Can anyone help with why dragging the map in SF1 makes my app crash? Thanks!

1

I had the same problem, and it seems to be due to LockerService and its restrictions on DOM access. Although maybe not the best solution, I disabled LockerService by setting the API version on the component to 39.0 which stopped the errors for me.

| improve this answer | |
  • I tried changing the bundle versions to 39.0 but no success :( – Sam Junius Aug 17 '17 at 14:24
  • For me it is working. I don't know if that matters, but I also changed API version of parent component that is using my component. – Wookie88 Sep 5 '17 at 9:09
  • For some reason, the thing that made it fix was using a differen Tile Layer. – Sam Junius Feb 15 '18 at 14:15
0

I had the same problem. I changed the tile server and now it works for me:

L.tileLayer('https://a.tile.openstreetmap.org/{z}/{x}/{y}.png', {
              attribution: 'Tiles © OpenStreetMap contributors'
       }).addTo(map);

Also it is important that tap:false in the map configuration:

var map = L.map('map', {zoomControl: true, tap: false})
| 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.