1

In Mapbox, this example works on a PC but not on a touchscreen Android/iPhone/iPad

https://www.mapbox.com/mapbox.js/example/v1.0.0/opacity/

Is there a simple change to the code below to make it work on mobile devices?

==================

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Opacity control</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<style>
.ui-opacity {
  background:#FFF;
  position:absolute;
  left:10px;
  top:70px;
  height:200px;
  width:28px;
  border:1px solid rgba(0,0,0,0.4);
  border-radius:3px;
  z-index:1000;
  }
.ui-opacity .handle {
  position:absolute;
  background:#404040;
  left:0;
  top:20px;
  width:26px;
  height:10px;
  border-radius:1px;
  cursor:pointer;
  cursor:ns-resize;
  }
  .ui-opacity .handle:hover {
    background:#303030;
    }
</style>

<div id='map'></div>
<div id='control' class='ui-opacity'>
  <div id='handle' class='handle'></div>
</div>

<script>
L.mapbox.accessToken = 'AAAAAAAA';
var handle = document.getElementById('handle'),
    start = false,
    startTop;

var map = L.mapbox.map('map', 'mapbox.emerald')
    .setView([43.6654, -79.4775], 14);

var overlay = L.mapbox.tileLayer('aibram.Aerial', {
      zIndex: 2
    })
    .addTo(map);

document.onmousemove = function(e) {
    if (!start) return;
    // Adjust control.
    handle.style.top = Math.max(-5, Math.min(195, startTop + parseInt(e.clientY, 10) - start)) + 'px';
    // Adjust opacity.
    overlay.setOpacity(1 - (handle.offsetTop / 200));
};

handle.onmousedown = function(e) {
    // Record initial positions.
    start = parseInt(e.clientY, 10);
    startTop = handle.offsetTop - 5;
    return false;
};

document.onmouseup = function(e) {
    start = null;
};
</script>

</body>
</html>
1
  • I have the same problem, iPhone + Safari, iOS 13.3. Most likely not possible to fix Commented Mar 23, 2020 at 14:08

1 Answer 1

2

I just tried the example on a mobile browser (Android 4.4.4, firefox 46.0.1) and had the same problem. My guess is that it's a bug with mapbox.js and/or leaflet.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.