वांछित स्थिति में लीफलेट ज़ूम नियंत्रण का पता लगाने के लिए कैसे करें

Question

मैं नक्शा के दाएं किनारे के बीच में मानचित्र के मध्य दाईं ओर ज़ूम नियंत्रण रखना चाहता हूं। मैं निम्नलिखित कोड

var map = new L.map("map-container",{ zoomControl: false }); 

    new L.Control.Zoom({ position: 'topleft' }).addTo(map); 

का उपयोग कर विभिन्न कोनों में नियंत्रण ज़ूम डाल का हल मिल गया है तो पदों

topleft 
topright 
bottomleft 
bottomright 

हो सकता है लेकिन मेरा लक्ष्य बीच सही में नियंत्रण विंडो डाल करने के लिए है। या यहां तक ​​कि मैंने कोने में नियंत्रण रखा है, मैं शीर्ष पर कुछ मार्जिन जोड़ना चाहता हूं। मैं उसे कैसे कर सकता हूँ? क्या कोई विचार है?

Answer 1

एक और समाधान (और शायद क्लीनर) 4 प्रदान किए गए कोनों के अलावा अतिरिक्त नियंत्रण प्लेसहोल्डर बनाने के लिए होगा।

एक अच्छा फायदा यह है कि यह उन प्लेसहोल्डर्स में से कई में कई नियंत्रण डालने की अनुमति देता है। वे मानक कोनों में, ओवरलैपिंग के बिना ढेर होंगे।

जावास्क्रिप्ट:

// Create additional Control placeholders 
function addControlPlaceholders(map) { 
    var corners = map._controlCorners, 
     l = 'leaflet-', 
     container = map._controlContainer; 

    function createCorner(vSide, hSide) { 
     var className = l + vSide + ' ' + l + hSide; 

     corners[vSide + hSide] = L.DomUtil.create('div', className, container); 
    } 

    createCorner('verticalcenter', 'left'); 
    createCorner('verticalcenter', 'right'); 
} 
addControlPlaceholders(map); 

// Change the position of the Zoom Control to a newly created placeholder. 
map.zoomControl.setPosition('verticalcenterright'); 

// You can also put other controls in the same placeholder. 
L.control.scale({position: 'verticalcenterright'}).addTo(map); 

तो यह आसान स्टाइल सीएसएस के साथ उन लोगों प्लेसहोल्डर, हो जाता है, क्योंकि उनके माता-पिता डोम नक्शा कंटेनर ही है। इसलिए top, bottom, left और right प्रतिशत के साथ निर्दिष्ट किया जा सकता है (जो माता-पिता के आयामों का उपयोग करते हैं)।

सीएसएस:

.leaflet-verticalcenter { 
    position: absolute; 
    top: 50%; /* possible because the placeholder's parent is the map */ 
    transform: translateY(-50%); /* using the CSS3 Transform technique */ 
    padding-top: 10px; 
} 

.leaflet-verticalcenter .leaflet-control { 
    margin-bottom: 10px; 
} 

vertical centering प्लेसहोल्डर खुद के लिए के रूप में, आप अपने पसंदीदा तकनीक का उपयोग कर सकते हैं। यहां मैंने प्लेसहोल्डर को अपनी ऊंचाई के आधे से ऑफसेट करने के लिए CSS3 ट्रांसफ़ॉर्म का उपयोग किया था।

यदि आवश्यक हो (उदाहरण के लिए पुराने ब्राउज़र संगतता के लिए), तो आप iH8 के समान इस ऑफ़सेट को करने के लिए "गणना-ऑन-लोड" विधि का उपयोग कर सकते हैं। लेकिन अब आपको प्लेसहोल्डर को नया नियंत्रण जोड़ने पर, मानचित्र आकार बदलने पर इसे चलाने की आवश्यकता नहीं है।

डेमो: http://jsfiddle.net/ve2huzxw/8/

Answer 2

मानचित्र के कंटेनर ऊंचाई को पकड़ो, दो से विभाजित करें। ज़ूम की कंटेनर ऊंचाई घटाएं, दो से विभाजित। पूर्ण स्थिति का प्रयोग करें और शीर्ष स्थान आवंटित: Plunker पर

var mapHalfHeight = map.getSize().y/2, 
    container = map.zoomControl.getContainer(), 
    containerHalfHeight = parseInt(container.offsetHeight/2), 
    containerTop = mapHalfHeight - containerHalfHeight + 'px'; 

container.style.position = 'absolute'; 
container.style.top = containerTop; 

उदाहरण: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

ध्यान दें कि जब आप एक निश्चित आकार नक्शा कंटेनर का उपयोग नहीं कर रहे हैं तो आप इस हर बार करने की आवश्यकता होगी कि नक्शे के कंटेनर का आकार बदल गया। इसे एक विधि में फेंक दें और इसे दिए गए उदाहरण में मानचित्र के आकार बदलने की घटना में लगाएं।

Answer 3

यह एक बालक आसान किया जा सकता है सीएसएस में से एक लाइन के साथ,। उत्तरदायी डिजाइन (बूटस्ट्रैप) के साथ काम करता है और Leaflet.EasyButton के साथ जोड़े गए अतिरिक्त बटन भी चलाता है।

.leaflet-control-container { position: absolute; right: 56px }