diff --git a/media/js/mozorg/contact-spaces.js b/media/js/mozorg/contact-spaces.js index 20c84642f4..757884a542 100644 --- a/media/js/mozorg/contact-spaces.js +++ b/media/js/mozorg/contact-spaces.js @@ -39,6 +39,8 @@ var $main = $('#main-content'); // get the mapbox map id. var mapId = $main.data('mapbox'); + // touch support detection. + var hasTouch = L.Browser.touch || L.Browser.msTouch; // mapbox access token L.mapbox.accessToken = $main.data('token'); // set page nav state. @@ -50,13 +52,12 @@ //initialize map and center. map = L.mapbox.map('map').setView([28, 0], 2); // load mozilla custom map tiles + // touch devices can struggle with retina tiles (bug 1139938) var mapLayer = L.mapbox.tileLayer(mapId,{ - detectRetina: true + detectRetina: !hasTouch }); // when ready, set the map and page default states mapLayer.on('ready', function () { - // touch support detection. - var touch = L.Browser.touch || L.Browser.msTouch; // add tile layer to the map mapLayer.addTo(map); // disable map zoom on scroll. @@ -76,7 +77,7 @@ // split the label layer for more control. mozMap.splitLabelLayer(); // disable dragging for touch devices. - if (touch) { + if (hasTouch) { // disable drag and zoom handlers. map.dragging.disable(); map.touchZoom.disable(); @@ -956,10 +957,13 @@ * (thanks to to Alex Barth @ MapBox) */ splitLabelLayer: function () { + var hasTouch = L.Browser.touch || L.Browser.msTouch; + topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane); // this custom map layer only contains country names, no map! + // touch devices can struggle with retina tiles (bug 1139938) topLayer = L.mapbox.tileLayer('mozilla-webprod.ijaelnfn', { - detectRetina: true + detectRetina: !hasTouch }); topLayer.on('ready', function() { var state = mozMap.getMapState();