Does this work with the leaflet template made from qgis2web?

[Randy6668]

Hi!

I'm not familiar with coding, thus I've been making ready-made maps using the qgis2web plugin, which converts my layers into geojson and add them into my leaflet map. So far I've been trying to use your plugin to group my layers together, but the map refuses to appear. This is the default layer.control provided by qgis2web:

L.control.layers(baseMaps,
		{'<img src="legend/DialysisCentres7.png" /> Dialysis Centres': layer_DialysisCentres7,'<img src="legend/ElderlyShelters6.png" /> Elderly Shelters': layer_ElderlyShelters6,'<img src="legend/ElderlyDayCareCentres5.png" /> Elderly Day Care Centres': layer_ElderlyDayCareCentres5,'<img src="legend/CommunityClubs4.png" /> Community Clubs': layer_CommunityClubs4,'<img src="legend/SpecialistHospitals3.png" /> Specialist Hospitals': layer_SpecialistHospitals3,'<img src="legend/PublicHospitals2.png" /> Public Hospitals': layer_PublicHospitals2,'<img src="legend/PrivateHospitals1.png" /> Private Hospitals': layer_PrivateHospitals1,},
		{collapsed:true}
		).addTo(map);

And this is how I tried to implement the styledlayercontrol plugin to replace the one above:

		var overlay = [{
			groupName : "First Layer",
			expanded : true,
			layers : {
				"Community Club" : layer_CommunityClubs4,
				"Dialysis Centres" : layer_DialysisCentres7,
				"Day Care Centres" : layer_ElderlyDayCareCentres5
		}},{
			groupName : "Second Layer",
			expanded : true,
			layers : {
				"Specialist Hospitals" : layer_SpecialistHospitals3,
				"Private Hospitals" : layer_PrivateHospitals1,
				"Public Hospitals" : layer_PublicHospitals2
		}}];
		var options = {
                container_width     : "300px",
                container_maxHeight : "350px", 
                group_maxHeight     : "80px",
                exclusive           : false
		};
		L.Control.styledLayerControl(overlays, options).addTo(map);

This is my first time asking for help on GitHub (shows how desperate I am ><) do let me know what other information I need to provide!

Thanks so much!

[Damorck]

Hi Randy. If done correctly, then it should yes. I work daily with QGIS and Leaflet. Remember to put in the js and css scripts in your html. If you are testing then remember clean your browser-cache (Ctrl + F5) especially in Chrome.

[Randy6668]

Hi! Yep I have included both scripts in the html file and did the clear cache step.

This is the format qgis2web implemented my shp-turned-geojson:

function pop_PrivateHospitals1(feature, layer) {
            var popupContent = '<configuring popup format>';
            layer.bindPopup(popupContent);
        }

        function style_PrivateHospitals1() {
            return {
                pane: 'pane_PrivateHospitals1',
                radius: 4.0,
                opacity: 1,
                color: 'rgba(0,0,0,1.0)',
                dashArray: '',
                lineCap: 'butt',
                lineJoin: 'miter',
                weight: 1,
                fillOpacity: 1,
                fillColor: 'rgba(193,244,117,1.0)',
            }
        }
        map.createPane('pane_PrivateHospitals1');
        map.getPane('pane_PrivateHospitals1').style.zIndex = 601;
        map.getPane('pane_PrivateHospitals1').style['mix-blend-mode'] = 'normal';
        var layer_PrivateHospitals1 = new L.geoJson(json_PrivateHospitals1, {
            attribution: '<a href=""></a>',
            pane: 'pane_PrivateHospitals1',
            onEachFeature: pop_PrivateHospitals1,
            pointToLayer: function (feature, latlng) {
                var context = {
                    feature: feature,
                    variables: {}
                };
                return L.circleMarker(latlng, style_PrivateHospitals1(feature))
            }
        });
        bounds_group.addLayer(layer_PrivateHospitals1);
        map.addLayer(layer_PrivateHospitals1);

Do I need to edit any code for each layer? As of now I have simply replaced the layer.control with the example you have provided, but all that appears was the zoom buttons. If it is not a hassle for you, would it be fine for you to take a look at my html code? Thanks!

[Randy6668]

I believe the problem lies with the format in which qgis2web created the layers. I copied the above code for the privatehospital layer (excluding the last two lines) onto your example html, and the map cannot be loaded. Do you have any recommendations how I can edit the above code to make the plugin work? Thanks!