पत्रक के साथ मानचित्र कंटेनर के बाहर नियंत्रण रखना?

Question

क्या कोई मुझे बता सकता है कि मैं कैटलॉग के साथ मानचित्र सामग्री के बाहर नियंत्रण कैसे रख सकता हूं?

इस मामले में, मैं सिर्फ मैप ऑब्जेक्ट के बाहर लेयर स्विच कंट्रोल रखना चाहता हूं।

Answer 1

यूएससी मानचित्र पोर्टल के कार्यान्वयन को छिपाने के लिए बहुत सारे हाथ लहराता है लेकिन आपके लिए भाग्यशाली है कि उन्होंने एक समाधान के बारे में सोचा है!

getContainerसमारोह सिर्फ तुम क्या जरूरत है। यह वास्तविक HTML नोड देता है, न कि केवल मार्कअप।

यह तब अन-चिल्डिंग (?) नोड जितना आसान है और इसे जावास्क्रिप्ट की एक दो पंक्तियों के साथ एक नए माता-पिता को सौंप देना है।

काम करने का उदाहरण और टिप्पणियां (और एक किक-गधा टाइलसेट)!

http://codepen.io/romahicks/pen/ONmPmp

कोड

//Create Layer
var baseMap = new    L.TileLayer('http://{s}.tiles.mapbox.com/v3/gvenech.m13knc8e/{z}/{x}/{y}.png'   );

var baseMapIndex = {
  "Map": baseMap
};

// Create the map
var map = new L.map('map', {
  center: new L.LatLng(41.019829, 28.989864),
  zoom: 14,
  maxZoom: 18,
  zoomControl: false, // Disable the default zoom controls.
  layers: baseMap
});

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 {
    newParent.appendChild(el);
 }
 setParent(htmlObject, a);

आपको पुन: सभी बच्चों के पास जाना चाहिए और उन्हें उनके माता-पिता को सौंपना चाहिए। एक सरल पुनरावर्ती लूप के लिए दूसरा उत्तर देखें।

/programming/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript

Comments

अच्छा काम। पहले से ही आपको वोट दिया है, लेकिन क्या आप अपने उत्तर में प्रासंगिक जावास्क्रिप्ट को जोड़ना चाहेंगे?

— एलब्रोबिस

a.appendChild(control.onAdd(map))पर्याप्त होगा। यह भी देखें stackoverflow.com/questions/36041651/…

— ghybs

यह getContainer समाधान के साथ अच्छी तरह से काम किया। लेकिन जब मैंने a.appendChild (control.onAdd (map)) के साथ कोशिश की, तो सभी wms लेयर्स और लेयर कंट्रोल गायब हो गए।

— मौरिसियो संतोस

मैं अपने उत्तर को पुन: प्राप्त करने के लिए अद्यतन करता हूं ताकि बच्चों को खेद हो। कृपया मुझे बताएं कि क्या यह काम नहीं करता है।

— रोमाँ

@mauriciosantos मेरा बुरा, यह बस के लिए के रूप में काम नहीं करता है L.control.layers।

— ghybs

Answer 2

सरल संभव तरीका जिसका मैंने उपयोग किया है:

HTML टैग के नीचे जोड़ें, जहाँ आप पत्ता नियंत्रित करना चाहते हैं:

<div id="custom-map-controls"></div>

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

$(document).ready(function () {

var newParent = document.getElementById('custom-map-controls');
        var oldParent = document.getElementsByClassName("leaflet-top leaflet-right")

        while (oldParent[0].childNodes.length > 0) {
            newParent.appendChild(oldParent[0].childNodes[0]);
        }
 });