Desativar a interação do folheto temporário

Como posso desativar temporariamente o zoming / draging do Mapview no Leaflet.js? Tentei de várias maneiras, mas sem sorte. É importante torná-lo temporário e também preciso da opção de ativar novamente.

leaflet

— Bernhard
fonte

Alguma idéia de como fazer isso com CSS? Preciso desativar o arrasto no celular usando uma consulta de mídia. Eu tentei definir uma camada transparente em cima dela, mas ela clica diretamente nessa camada. Eu até brinquei com eventos-ponteiro, mas sem sorte. A abordagem adequada é mais provável através do uso de -webkit-user-drag: none; mas apliquei isso a todos os elementos que encontro e ainda não tenho sorte. Obrigado.

Eu respondi a esta pergunta abaixo .

— 21718 hayatbiralem

Respostas:

você vai querer fazer (supondo que seu mapa seja chamado map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

ligue-o novamente com

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

— Calvin
fonte

Muito obrigado. Eu estava tão errado - pensei que deveria haver um único método para fazer isso.

— Bernhard

Esta solução tem alguns problemas: O cursor do mouse ainda é uma mão. A rolagem de página com gestos de toque não é possível sobre o mapa. Quando a abertura de um Popover move o mapa, ele nunca volta.

— NetAction

@netAction, você tem uma solução para a questão da rolagem por gestos de toque?

— Chris Fremgen

@ChrisFremgen: map.dragging.disable (); faz o truque que o mapa para de buscar gestos de rolagem.

— netAction

Existe uma maneira de desativar apenas o zoomIn?

— howard.D

Se você não quiser desativar cada manipulador manualmente, poderá fazer um loop sobre todos eles e desabilitar / habilitar.

Desativar

map._handlers.forEach(function(handler) {
    handler.disable();

});

Habilitar

map._handlers.forEach(function(handler) {
    handler.enable();

});

— ustroetz
fonte

Observe que o uso de propriedades não públicas (_handlers) pode causar erros no seu código, mesmo nas alterações da versão do patch do folheto, pois não é garantido que ele permaneça inalterado. Pedido de recurso deve ser submetida ao folheto;)

— Luckylooke

Eu acho que você pode agrupar seu mapa com um contêiner auxiliar e pode desativá-lo com uma classe CSS simples como is-locked.

Aqui está o que eu estou falando:

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

Espero que ajude.

— hayatbiralem
fonte