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!

2 Answers 2

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.

3
  • I tried changing the bundle versions to 39.0 but no success :(
    – Sam Junius
    Aug 17, 2017 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, 2017 at 9:09
  • For some reason, the thing that made it fix was using a differen Tile Layer.
    – Sam Junius
    Feb 15, 2018 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})

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .