#Leaflet / Personnaliser les menus

Personnaliser les menus : besoin du plugin leaflet-panel
(http://labs.easyblog.it/maps/leaflet-panel-layers/)

<!DOCTYPE html>
<html>

<head> 
<title>Leaflet Panel Layers</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=0.8, user-scalable=no" />
<link rel="stylesheet" href="https://labs.easyblog.it/maps/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://labs.easyblog.it/maps/leaflet-panel-layers/src/leaflet-panel-layers.css" />

</head>

var map = L.map('map', {
		zoom: 17,
		center: L.latLng([48.113, -1.672])
	}),
	ESRI = new L.TileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}');

map.addLayer(ESRI);

// Ajout des fonds de carte
  
var baseLayers = [
	{	name: "ESRI World Topo Map",
		layer: ESRI},
	{	name: "Aerial",
		layer: L.tileLayer.wms('https://public.sig.rennesmetropole.fr/geoserver/ows?',
                             {layers: 'raster:ortho2014',  opacity: 0.7})},
	{
		group: "Openstreetmap",
		collapsed: true,
		layers: [
			{	name: "OSM",
		layer: L.tileLayer("https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png")},
      {	name: "Open Cycle Map",
				layer: L.tileLayer('https://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png')},
			{	name: "Transports",
				layer: L.tileLayer('https://{s}.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png')}		]
	}
];
			
// Ajouts des flux WMS
	
var WMS = [{
  
  // Groupe 1
  
		group: "Cadastre",
		layers: [
{active: false,
				name: "Cadastre",
				layer: {
					type: "tileLayer.wms",
					args: ['https://geobretagne.fr/geoserver/cadastre/wms', 
            {layers: 'CP.CadastralParcel',format: 'image/png',transparent: true,
						}]}},
{active: false,
				name: "DIVCAD",
				layer: {
					type: "tileLayer.wms",
					args: ['https://mapsref.brgm.fr/wxs/refcom-brgm/refign', 
            {layers: 'PARVEC_DIVCAD',format: 'image/png',transparent: true,
						}]}},
{active: false,
				name: "refcadastre",
				layer: {
					type: "tileLayer.wms",
					args: ['https://public.sig.rennesmetropole.fr/geoserver/ows?', 
            {layers: 'ref_cad:cadastre',format: 'image/png',transparent: true,
						}]}},
]},
	
           // Groupe 2
           
{ group: "Batiments",
		layers: [
{active: true,
				name: "Bati",
				layer: {
					type: "tileLayer.wms",
					args: ['https://mapsref.brgm.fr/wxs/refcom-brgm/refign', 
                          {layers: 'TOPO_E_BATI',format: 'image/png',transparent:true,
							//minZoom: 13
						}]}},
{active: true,
				name: "Parcel Bati",
				layer: {
					type: "tileLayer.wms",
					args: ['https://mapsref.brgm.fr/wxs/refcom-brgm/refign', 
                          {layers: 'PARVEC_BATIMENT',format: 'image/png',transparent:true,
							//minZoom: 13
						}]}}
]}	
];
  
var menubasemaps = new L.Control.PanelLayers(baseLayers, null, {
	//compact: true,
	//collapsed: true,
	position: 'topright',
	
}).addTo(map);

var menuwms = new L.Control.PanelLayers(null, WMS,  {
	//compact: true,
	//collapsed: true,	
	position: 'topright',
	collapsibleGroups: false,
	
}).addTo(map);

var scale = L.control.scale().addTo(map);

</script>

</body>
</html>

Updated missing url https://unpkg.com/ion-rangeslider@2.2.0/js/ion.rangeSlider.js to https://unpkg.com/ion-rangeslider@2.2.0/js/ion.rangeslider.js

Modified http://labs.easyblog.it/maps/leaflet/dist/leaflet-src.js to a secure url

Modified http://labs.easyblog.it/maps/leaflet-panel-layers/src/leaflet-panel-layers.js to a secure url

https://unpkg.com/ion-rangeslider@2.2.0/js/ion.rangeSlider.js

https://labs.easyblog.it/maps/leaflet/dist/leaflet-src.js

https://labs.easyblog.it/maps/leaflet-panel-layers/src/leaflet-panel-layers.js