पत्रक: परत-नियंत्रण मेनू कैसे स्थानांतरित करें?

Question

यह एक मूर्खतापूर्ण प्रश्न हो सकता है, लेकिन मुझे इसे प्राप्त करने के लिए एक प्रलेखित तरीका नहीं मिला।

मैं परत-नियंत्रण मेनू को स्वतंत्र रूप से रखना चाहता हूं, संभवत: डिफ़ॉल्ट ज़ूम-इन / आउट बटन के पास ऊपर बाईं ओर।

मेरी परत नियंत्रण इस तरह दिखता है:

// 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-objcet का संदर्भ कैसे प्राप्त कर सकता हूं, जैसे कि मैं इसे एक कस्टम वर्ग निर्दिष्ट कर सकता हूं और CSS में स्थिति को ओवरराइड कर सकता हूं?

Answer 1

डॉक्स के अनुसार यहाँ , आप की स्थिति में एक विकल्प के रूप परत नियंत्रण बनाते समय पारित कर सकते हैं।

उपलब्ध पदों की रूपरेखा यहाँ दी गई है

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

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

Comments

वाह, मुझे यह कैसे याद आया। बेवकूफ लग रहा है। ^ ^

— fgysin

इसी तरह से यहां पर ...

— स्टेंडर

Answer 2

केलो का जवाब सही है। हालांकि, प्रलेखन (और एपीआई) थोड़ा भ्रमित है। उदाहरण के लिए, इस उदाहरण के आधार पर एक कस्टम जानकारी बॉक्स बनाने के लिए: 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);