Materialise CSS Kitapçığı web haritalama bindirmeleri

Question

Ben broşürü 1.0.1 ile gerçekleşmek 0.97.7 kullanıyorum ile Birden fazla onay kutusunu göstermiyor (son)

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet-src.js"></script> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css"> 

Ben öğeler geçiş için birden onay kutularını kullanarak bir şablon oluşturmak için denemek , hiçbir onay kutusu görünmez, yalnızca bir geçiş olarak çalışan etiketler, ancak onay kutularını veya anahtarları istiyorum. CSS cdn'yi başka bir çerçeveye (ör. Bootstrap) değiştirirsem görünürler. durumda birisi debudding için

Kitapçığı kodu ilgilenmektedir: http://leafletjs.com/reference-1.0.0.html#layergroup

// items to toggle 
var myItems = new L.LayerGroup(); 
// bind popup to each item once checkbox is selected 
L.marker([lat, lon]).bindPopup('Item').addTo(myItems); 
// create overlays multi-checkbox selection 
var overlays = { 
    Items = myItems 
}; 
// add overlays to the web-map 
L.control.layers(null, overlays).addTo(map); 

Bu açıkçası

kimse bir düzeltme sunabilir diğer CSS ile çalışıyor gibi bir broşür sorun değildir? Gerçek <input type="checkbox" /> uzak gizli oysa visual checkbox from Materialize CSS benziyor

Teşekkür

Answer 1

, sizin giriş <label> etiketinin arasına Materialise CSS yarattığı bir eserdir. <input> gizlenmiştir, ancak Broşür (CSS beklemediği Cisimleştir ya da en azından, değil yolda) o <input> için uygun bir <label> ilişkilendirmek olmadığından, Materialise CSS hayır vardır: Kitapçık Katmanlar Kontrol ile olanlardır

Görsel değiştirme oluşturmak için yer tutucu.

Yorumunuza gelince, bir stil sayfasından kolayca çıkıp çıkamayacağınızdan emin değilim. Belirli bir durumda, uzakta saklandığına bunları önlemek amacıyla, Broşür işaret kutusu Materialise CSS kurallarını geçersiz kılmak için deneyebilirsiniz:

input[type="checkbox"].leaflet-control-layers-selector { 
    position: inherit; 
    left: inherit; 
    opacity: inherit; 
} 

Demo: son https://jsfiddle.net/3v7hd2vx/289/

Ancak Yorumunuzun bir kısmı gerçekten yapılabilir ve daha ilginç bir sonuca yol açabilir: Kitapçık kod yapısının güzelliklerinden biri, sınıflarını kolayca genişletebilmeniz ve hatta bazı yöntemleri geçersiz kılabileceğinizdir. Örneğin, Extending Leaflet: Class Theory eğitimine bakın. basitçe Katmanlar ilişkili uygun <label><input type="checkbox" /> Kontrol orada emin gerektirecektir Senin durumunda

:

L.Control.Layers.include({ 
    _addItem: function(obj) { 
    var label = document.createElement('label'), 
     checked = this._map.hasLayer(obj.layer), 
     input; 

    if (obj.overlay) { 
     input = document.createElement('input'); 
     input.type = 'checkbox'; 
     input.className = 'leaflet-control-layers-selector'; 
     input.defaultChecked = checked; 
    } else { 
     input = this._createRadioElement('leaflet-base-layers', checked); 
    } 

    input.layerId = L.stamp(obj.layer); 

    // Create an explicit ID so that we can associate a <label> to the <input>. 
    var id = input.id = 'leaflet-layers-control-layer-' + input.layerId; 

    L.DomEvent.on(input, 'click', this._onInputClick, this); 

    // Use a <label> instead of a <span>. 
    var name = document.createElement('label'); 
    name.innerHTML = ' ' + obj.name; 
    name.setAttribute('for', id); // Associate the <label> to the <input>. 

    var holder = document.createElement('div'); 

    label.appendChild(holder); 
    holder.appendChild(input); 
    holder.appendChild(name); 

    var container = obj.overlay ? this._overlaysList : this._baseLayersList; 
    container.appendChild(label); 

    this._checkDisabledLayers(); 
    return label; 
    } 
}); 

(kod çoğu sadece original method den yineleniyor, aslında sadece 3 vardır yorumlar ile gösterildiği gibi yerleştirilen ya da tadil edilmiş çizgiler)

Gösteri: https://jsfiddle.net/3v7hd2vx/288/

012.

Bununla birlikte, Materialize CSS'nin işini yapmasına izin verin ve onay kutusunun değiştirilmesini sağlayın; böylece sonuç, bu kütüphaneyi sayfanıza ekleyerek beklediğiniz gibi olabilir.Yukarıdaki gibi https://jsfiddle.net/3v7hd2vx/290/

(benzer bir yöntem geçersiz kılma konsepti, ancak bir <div> ile tüm <label> ve <input> sarmak gerekir çünkü biraz daha karışık:

bir yerine onay kutusu Materialise CSS anahtarı ile Demosu "switch" sınıfının ve ek bir "lever" yer tutucunun eklenmesi).

Answer 2

Sen başlıkları CSS çerçevesini göz ardı edebilirsiniz bir sınıfı ile bir div sahip olmak mümkündür ... senin CSS

.leaflet-control-layers-overlays input[type='checkbox'] { 
    display: block !important; 
}