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>Carte Leaflet avec tuiles OpenSreetMap, marqueurs et infobulles pleine fenêtre</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>

<link rel="stylesheet" href="style.css">
<title>Carte Leaflet avec tuiles OpenSreetMap</title>
</head>
<body>

<div id="carte" ></div>
<script>
//créer une variable carte qui va contenir un objet map de la bibliothèque Leaflet
var macarte = L.map('carte').setView([46.3630104, 2.9846608], 6); // coordonnées et zoom
//au moteur de carte, on lui rajoute un fond de carte OSM.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'//rajout du fournisseur de carte ici OpenSreetMap (facultatif)
}).addTo(macarte);
// ajout d'un marqueur
var marker1 = L.marker([47.175774, -0.483683]).addTo(macarte);
// macarte.removeLayer(marker); supprime le marqueur
//ou sur 2 lignes "var marker = L.marker([46.6835956, -0.4137665]);" et"marker.addTo(macarte);"
// on attache popup (infobulle) au marqueur
marker1.bindPopup('');
var mapopup = marker1.getPopup();
mapopup.setContent('Salut ! Ca va ? et oui je suis né là !'); // je personnalise un peu avant d'afficher
//marker.openPopup(); //ouvert sans clic à l'ouverture de la page

//autre marqueur avec infobulle complexe déplaçable
var marker2 = L.marker([43.11764281563852, 5.938079506158829], {draggable:'true'}).bindPopup('Déplacez le marqueur ! Vous verrez !').addTo(macarte);
marker2.on('dragend', relache); //on applique au marqueur la fonction relache
function relache(e) {
marker2.getPopup().setContent('<div id="content">'+'...avant de bouger vous étiez à <h3> Toulon Gare du Sud France : </h3>'+'(43.11764281563852, 5.938079506158829)</br>altitude : 6 mètres</br>'+'Gare ouverte en 1905, bâtiments hors-classe, halle marchandises, dépôt pour quatre machines, quatres voies principales, trois voies marchandises et raccordement portuaire.</br>' +'Détruite et actuellement à l\'emplacement, le Lycée Dumont d\'Urville (bât E).</br>'+'</div>'+'<table width="100%" border="0" cellspacing="10" cellpadding="0"><tr><td valign="top" class="Text"><b>Photos d\'hier et d\'aujourd\'hui </b></td><td><a href="pages/Toulon/Toulon-SF.html" title="aggrandir" target="_blanck"><img src="pages/Toulon/ToulonGare01s.jpg" border="0"/></a></td></tr></table>'+'</div>'+'Ici : '+marker2.getLatLng()+' ... Salut !');
marker2.openPopup();
}

//petit plus :construction d'un cercle
var influence = L.circle([47.175774, -0.483683], 130000,{
'color': '#FF7F00',
'fill': true,
'fillColor': '#FFFF00',
'fillOpacity': 0.2,}).addTo(macarte); // ajout d'un cercle centré sur le marqueur de rayon en metres, {}supprimer par défaut c'est bleu.
</script>