Hide zoom controls on mobile

js/Map.js

@@ -12,12 +12,15 @@ BR.Map = {
             minZoom: 0,
             maxZoom: maxZoom
         });
+
+        if (BR.Util.getResponsiveBreakpoint() >= '3md') {
             L.control
                 .zoom({
                     zoomInTitle: i18next.t('map.zoomInTitle'),
                     zoomOutTitle: i18next.t('map.zoomOutTitle')
                 })
                 .addTo(map);
+        }
         if (!map.restoreView()) {
             map.setView(BR.conf.initialMapLocation || [50.99, 9.86], BR.conf.initialMapZoom || 5);
         }

js/Util.js

@@ -48,5 +48,24 @@ BR.Util = {
         } catch (e) {
             return false;
         }
+    },
+
+    // see https://stackoverflow.com/a/37141090/1906123
+    getResponsiveBreakpoint: function() {
+        var envs = { '1xs': 'd-none', '2sm': 'd-sm-none', '3md': 'd-md-none', '4lg': 'd-lg-none', '5xl': 'd-xl-none' };
+        var env = '';
+
+        var $el = $('<div>');
+        $el.appendTo($('body'));
+
+        for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
+            env = Object.keys(envs)[i];
+            $el.addClass(envs[env]);
+            if ($el.is(':hidden')) {
+                break; // env detected
+            }
+        }
+        $el.remove();
+        return env;
     }
 };