Explications Carte avec recentrage automatique et Zoom

en noir : code obligatoire
en vert : explications
en rouge : code personnalisable
en grisé : construction d'une carte simple par défaut

<!DOCTYPE html>
<html>
<head>
<title>Leaflet Contrôles des Layers et fonds de Cartes</title>
<meta charset="utf-8" />
<style>
/* style pour carte plein écran, pour limiter voir la div "carte" */
#carte {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
</head>
<body>
<div id="carte" ></div>
<script>
var marques = L.layerGroup(); //construction d'un groupe de marques
L.marker([47.175774, -0.483683]).bindPopup('Cernusson (Fr)').addTo(marques),
L.marker([38.299974, -5.267601]).bindPopup('Peñarroya (Esp)').addTo(marques),
L.marker([46.974821, -0.21419]).bindPopup('Thouars (Fr)').addTo(marques),
L.marker([47.01719, -0.196574]).bindPopup('Louzy (Fr)').addTo(marques),
L.marker([47.145262, -0.537418]).bindPopup('Vihiers (Fr)').addTo(marques);
//Les attributions pour ...
var mbAttr = 'licence, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'carte, © <a href="https://www.mapbox.com/">Mapbox</a>',
mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
//les couches possibles
var OSM = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{maxZoom: 19,attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> @Lafayette68'}),
OSMfr = L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png',{maxZoom: 20,attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> @Lafayette68'}),
EMaj = L.tileLayer('http://tile.mtbmap.cz/mtbmap_tiles/{z}/{x}/{y}.png', {attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> & USGS'}),
ESRIsat = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Source: Esri, i-cubed, etc...'}),
ESRIimg = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer/tile/{z}/{y}/{x}', {attribution: 'Tiles © Esri — Source: Esri, DeLorme, etc..'}),
MBgris = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
MBplan = L.tileLayer(mbUrl, {id: 'mapbox.streets', attribution: mbAttr}),
OTMrel = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png',{maxZoom: 17,attribution: '© <a href="http://viewfinderpanoramas.org">SRTM</a> | Carte: © <a href="https://opentopomap.org">OpenTopoMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)'});
//ma carte construction
var macarte = L.map('carte', {center: [46.3630104, 2.9846608],zoom: 6,layers: [OSM, marques]});//OSM le layer par défaut

var baseLayers = {
"OSM" : OSM,
"OSMfr" : OSMfr,
"EMaj" : EMaj,
"ESRIsat" : ESRIsat,
"ESRIimg" : ESRIimg,
"MBgris": MBgris,
"MBplan": MBplan,
"OTMrel" : OTMrel };

var overlays = {"Marques": marques};
L.control.layers(baseLayers, overlays).addTo(macarte);
L.control.scale().addTo(macarte);//ajoute une échelle
</script>