Отключаем масштабирование в Leaflet

Leaflet - популярная библиотека JavaScript с открытым исходным кодом для интерактивных карт, удобных для мобильных устройств. Весит всего 42 КБ и обладает всеми возможностями картографии, которые только могут понадобиться разработчикам.

Официальный сайт

Разберемся как отключить масштабирование с помощью колеса прокрутки/мышки при использовании leaflet.

JS - не моя сильная сторона, и любые изменения, которые я пытался внести ломали мою карту. Ниже решение найденное на просторах интернета. Опция должна быть установлена в инициализации карты, например:

// Initialize the map on the div with id="map" with a given center, 
// zoom level and scrollwheel disabled:
var map = L.map('map', {
    center: [51.505, -0.09],
    zoom: 13,
    scrollWheelZoom: false
});

Например, если у нас есть подобный код:

var map = L.map('GerryEmery').setView([-34.741300, 150.822600],9);

меняем его на это:

var map = L.map('GerryEmery', {
    scrollWheelZoom: false
}).setView([-34.741300, 150.822600],9);

Другой вариант - мы создаем L.map с опцией scrollWheelZoom: false и затем добавляем listener:

map.once('focus', function() { map.scrollWheelZoom.enable(); });

Если вам нужно переключить масштабирование:

map.on('click', function() {
  if (map.scrollWheelZoom.enabled()) {
    map.scrollWheelZoom.disable();
    }
    else {
    map.scrollWheelZoom.enable();
    }
  });

При взаимодействии с картой во многих случаях пользователю также необходимо нажать на карту, чтобы выполнить свою задачу, поэтому код выше иногда может привести к неожиданному поведению, когда пользователь начнет реально использовать карту.

Я бы предложил кое-что, что может показаться пользователю более интуитивным - щелкните мышью вне карты, чтобы отключить прокрутку.

Например, установите scrollWheelZoom: false, как указано выше, затем:

map.on('focus', function() { map.scrollWheelZoom.enable(); });
map.on('blur', function() { map.scrollWheelZoom.disable(); });