Materialize CSS without displaying multiple checkboxes using Leaflet web map overlays

Question

I am using Materialize 0.97.7 with Leaflet 1.0.1 (last)

<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"> 

When I try to create an overlay with several checkboxes for switching items, the checkbox does not appear, only labels that work like a switch, but I want either checkboxes or radio buttons. If I switch CSS cdn to another structure like Bootstrap, they will appear.

Brochure code for debudation in case someone is interested: 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); 

This is obviously not a problem with the sheet, as it works fine with other CSS

Can anyone suggest a fix?

thanks

Answer 1

It looks like the visual flag from Materialize CSS is an artifact created by Materialize CSS in the <label> your input, while the actual <input type="checkbox" /> is hidden.

This is what happens with the sheet control: <input> hidden, but since the Leaflet does not associate a suitable <label> with this <input> (or at least not in the way Mediaize CSS does), Materialize CSS does not places to create visual replacements.

As for your comment, I'm not sure that you can easily “drop out” the stylesheet. In your particular case, you can try to override the CSS Materialize rules for Leaflet flags to avoid hiding them:

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

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

However, the last part of your comment is really capable and can lead to a more interesting result: one of the beauties of the Leaflet code structure is that you can easily extend your classes or even just override some methods.

See <study guide Sheet Extension: Class Theory .

In your case, this would simply require that there be a valid <label> associated with Layers Control <input type="checkbox" /> :

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

(most of the code is simply duplicated from the original method , in fact there are only 3 inserted or modified lines, as shown by the comments)

Demo: https://jsfiddle.net/3v7hd2vx/288/

In doing so, you let Materialize CSS do its job and create a checkbox replacement so that the result is what you would expect by including this library on your page.

Demo using CSS Materialize radio button instead of checkbox: https://jsfiddle.net/3v7hd2vx/290/

(a similar concept overrides the method as described above, but a little more complicated because you need to wrap all the <label> and <input> with the <div> of the "switch" class and add an additional "lever" placeholder).

Answer 2

You can try adding this to your CSS.

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