Leaflet map issue in Safari using iPhone and iPad

问题:

I am having some weird issue with the leaflet map using Safari in iPhone and iPad. I am using an AJAX GET request to fetch the markers on the map and binding the popup content while fetching. In the popup window, I have a button which opens a bootstrap modal when a user clicks on it to view details. It works fine in Windows and Mac using IE, Chrome, Safari, Firefox but I cannot make it working with the iPhone and iPad Safari browser. Here is my code for fetching the data:

    $(function(e) {
    var latlng = L.latLng(-30.81881, 116.16596);
    var map = L.map('lmap', {
        center: latlng,
        zoom: 6
    });
    var lcontrol = new L.control.layers();
    var eb = new L.control.layers();
    //clear the map first
    clearMap();
    //resize the map
    map.invalidateSize(true);
    //load the map once all layers cleared
    loadMap();
    //reset the map size on dom ready
    map.invalidateSize(true);

    function loadMap(e) {
        //show loading overlay
        $(".loadingOverlay").show();
        var roadMutant = L.gridLayer.googleMutant({
            type: 'roadmap'
        }).addTo(map);
        var satMutant = L.gridLayer.googleMutant({
            maxZoom: 24,
            type: 'satellite'
        });
        var terrainMutant = L.gridLayer.googleMutant({
            maxZoom: 24,
            type: 'terrain'
        });
        var hybridMutant = L.gridLayer.googleMutant({
            maxZoom: 24,
            type: 'hybrid'
        });
        //add the control on the map          
        lcontrol = L.control.layers({
            Roadmap: roadMutant,
            Aerial: satMutant,
            Terrain: terrainMutant,
            Hybrid: hybridMutant //,Styles: styleMutant
        }, {}, {
            collapsed: false
        }).addTo(map);

        var markers = L.markerClusterGroup({
            chunkedLoading: true,
            spiderfyOnMaxZoom: true,
            maxClusterRadius: 80,
            showCoverageOnHover: true
        });
        //clear markers and remove all layers
        markers.clearLayers();

        var st = atype + "";
        $.ajax({
            type: "GET",
            url: appUrl + "/Home/map", // '@Url.Action("map", "Alerts")',
            data: {
                'atype': st
            },
            dataType: 'json',
            contentType: 'application/x-www-form-urlencoded',
            success: function(data) {
                $.each(data, function(i, item) {
                    var img = (item.IconUrl).replace("~", "");
                    var Icon = L.icon({
                        iconUrl: appUrl + img,
                        iconSize: [42, 42]
                    });
                    var id;
                    var marker = L.marker(L.latLng(item.Latitude, item.Longitude), {
                        icon: Icon
                    }, {
                        title: item.Name
                    });
                    var content = "<div class='infoDiv'><h3><img src='" + appUrl + img + "' width='24' />" + item.Name + "</h3><p>" + item.Title + "</p><a href='#' data-value='" + item.AlertId + "' class='btn btn-success btn-sm' data-toggle='modal' data-target='#alertDetails'>Details</a></div>";
                    id = marker._leaflet_id;
                    marker.bindPopup(content);
                    markers.addLayer(marker);
                });
            }
        }).done(function() {
            $(".loadingOverlay").hide();
            map.invalidateSize(true);
        });

        map.addLayer(markers);
        //set initial zoom
        map.setZoom(6);

    }


    function clearMap() {
        // clear all layers before it reloads;
        map.eachLayer(function(layer) {
            map.removeLayer(layer);
        });
        map.removeControl(lcontrol);
        map.removeControl(eb);
    }
    map.on('focus', function() {
        map.scrollWheelZoom.enable();
    });
    map.on('blur', function() {
        map.scrollWheelZoom.disable();
    });
});

I have the same issue with map layer control. Nothing happens when the user clicks on the control to switch to Arial or Terrian when it works perfectly in IE and other browsers.

Any help appreciated.

回答1:

I confirm Nasir item is the correct one. Thanks!

Specifically, I changed in Leaflet.GoogleMutant.js the following line from

this._mutantContainer.style.zIndex = '800'; //leaflet map pane at 400, controls at 1000

to

this._mutantContainer.style.zIndex = '399'; //leaflet map pane at 400, controls at 1000

And now it works.

I'm not sure what is affected by this change though... thanks for comments

Luigi

回答2:

I came across this issue while testing my app on iOS devices. The problem is that Safari does not support pointer-events as described on caniuse.com and because the googleMutant plugin CSS sets the z-index value to 1000 via the use of the leaflet-top CSS class, the browser considers it to be located above everything else.

This results in your clicks and touches being triggered on the googleMutant layer rather than the control layer.

Resetting the z-index value to a lower value, at least one that is lower than the value for the control layer should fix this problem. At least it did for me.