2

Leaflet includes a simple zoom in/out control on the map, unless otherwise specified:

zoomControl: Whether a zoom control is added to the map by default.

This control is unnecessary on a mobile device, where the device's pinch/zoom gestures work better, but the control is included anyway:

enter image description here

Is it possible to detect whether the user is on a mobile device, and remove the control if so (while leaving the control in place for desktop users)?

5

According the Leaflet documentation, there's Browser, "a namespace with static properties for browser/feature detection used by Leaflet internally". More in detail, its mobile property is "true for all browsers running in a mobile device".

var map = L.map('map', {zoomControl: true});
if (L.Browser.mobile) {
   map.removeControl(map.zoomControl);
}
0
1

This simple approach seems to work, using code from https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery

//Assume a dekstop device with the zoom control shown
var showZoom = true;

// Test for a mobile device
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 showZoom = false;
}

// specify this option during the map creation
var map = L.map('map',{zoomControl: showZoom})

http://jsfiddle.net/slead/Lg6rwzaj/1/

enter image description here

0

add this to your code

 map.zoomControl.enable();
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     map.zoomControl.disable();
    }

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.