전단지 : 레이어 제어 메뉴를 이동하는 방법?

이것은 어리석은 질문 일 수도 있지만 이것을 달성하는 문서화 된 방법을 찾을 수 없습니다.

레이어 제어 메뉴를 기본 확대 / 축소 버튼 근처 왼쪽 상단에 자유롭게 배치하고 싶습니다.

내 레이어 컨트롤은 다음과 같습니다.

// 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);

여기서 endpointMarkerLayer와 linkLineLayer는 각각 마커 및 폴리 라인을 포함하는 층이다.

메뉴를 표시 할 위치를 지정하는 옵션이 있습니까? 또는 컨트롤 메뉴의 DOM 객체에 대한 참조를 어떻게 얻을 수 있습니까? 그래서 사용자 정의 클래스를 할당하고 CSS에서 위치를 재정의 할 수 있습니까?

여기 문서에 따르면 레이어 컨트롤을 만들 때 옵션으로 위치를 전달할 수 있습니다.

사용 가능한 위치는 여기 에 요약되어 있습니다

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

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane, {position: 'topleft'});
layerControl.addTo(map);

켈 소의 대답은 맞습니다. 그러나 설명서 (및 API)는 약간 혼란 스럽습니다. 예를 들어 http://leafletjs.com/examples/choropleth.html 예제를 기반으로 사용자 정의 정보 상자를 만들려면 다음을 수행하십시오.

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);

옵션은 컨트롤 개체에서 설정됩니다. 따라서 오버레이 컨트롤을 배치하기 위해이 작업을 수행 할 수 있다고 생각할 수 있습니다.

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

위에서 언급 한대로이를 수행하는 올바른 방법은 다음과 같습니다.

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