Mobile code snippets

Leaflet

• internal browser/feature detection: L.Browser. (mobile, touch, retina, ...)

• leaflet-touch CSS class, (L.Browser.touch ? ' leaflet-touch' : '') +

• @media (pointer: coarse) {

• Control.Layers.js:

    if (!L.Browser.touch) {
      L.DomEvent
        .disableClickPropagation(container)
        .disableScrollPropagation(container);
    } else {
      L.DomEvent.on(container, 'click', L.DomEvent.stopPropagation);
    }
  

• ...

Bootleaf

https://github.com/bmcbride/bootleaf

Copyright (c) 2013-2014 Bryan McBride, MIT License

index.html

<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

https://github.com/bmcbride/bootleaf/blob/master/assets/js/app.js

/* Hide sidebar and go to the map on small screens */
if (document.body.clientWidth <= 767) {
  $("#sidebar").hide();
  map.invalidateSize();
}

// Leaflet patch to make layer control scrollable on touch browsers
var container = $(".leaflet-control-layers")[0];
if (!L.Browser.touch) {
  L.DomEvent
  .disableClickPropagation(container)
  .disableScrollPropagation(container);
} else {
  L.DomEvent.disableClickPropagation(container);
}

function sizeLayerControl() {
  $(".leaflet-control-layers").css("max-height", $("#map").height() - 50);
}

https://github.com/bmcbride/bootleaf/blob/master/assets/css/app.css

@media (max-width: 992px) {
  .navbar .navbar-brand {
    font-size: 18px;
  }
}
@media (max-width: 767px){
  #sidebar {
    display: none;
  }
  .url-break {
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
      hyphens: auto;
  }
  .dropdown-menu a i{
    color: #FFFFFF;
  }
}
/* Print Handling */
@media print {
  .navbar {
    display: none !important;
  }
  .leaflet-control-container {
    display: none !important;
  }
}