Folheto: Como mover o menu de controle de camada?

11

Essa pode ser uma pergunta boba, mas não consegui encontrar uma maneira documentada de conseguir isso.

Gostaria de posicionar livremente o menu de controle de camada, provavelmente no canto superior esquerdo, perto do botão de aumentar / diminuir o zoom padrão.

Meu controle de camada fica assim:

// Group layers as overlay pane
overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane);
layerControl.addTo(map);

Onde endpointMarkerLayere linkLineLayersão camadas contendo marcadores e polilinhas, respectivamente.

Existe uma opção para especificar onde o menu deve aparecer? Como alternativa, como posso obter uma referência ao objeto DOM do menu de controle, para poder atribuir a ele uma classe personalizada e substituir o posicionamento no CSS?

fgysin restabelecer Monica
fonte

Respostas:

14

De acordo com os documentos aqui , você pode passar a posição como uma opção ao criar o controle de camada.

As posições disponíveis estão descritas aqui

overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer,
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane, {position: 'topleft'});
layerControl.addTo(map);
Kelso
fonte
Uau, como eu senti falta disso. Sentindo-se estúpido ^^.
fgysin Reintegrar Monica
Taxa da mesma maneira aqui ...
Stender
5

A resposta de Kelso está correta. No entanto, a documentação (e API) é um pouco confusa. Por exemplo, para criar uma caixa de informações personalizada, com base neste exemplo: http://leafletjs.com/examples/choropleth.html, você pode fazer isso:

var mapInfo = L.control({position:'topleft'});

info.onAdd = function (map) {
  this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
  this.update();
  return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
    '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
    : 'Hover over a state');
};

info.addTo(map);

As opções são definidas no objeto de controle. Portanto, pode-se pensar que você pode fazer isso para posicionar um controle de sobreposição:

// incorrect
var layerControl = L.control({position:'topleft'}).layers(null, mapOverlays).addTo(map);

A maneira correta de fazer isso, conforme indicado acima, é:

// correct
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);
Jeff
fonte