#Leaflet / Ajouter des marqueurs (interactivité + photo)

Intégrer et gérér des marqueurs dans une carte leaflet (texte, icone et image)

<html>
<head>
<title>A Leaflet map!</title>
<meta charset="UTF-8">

</head>

<body>

//Appel et configuration carte
  
var map = L.map('map', {
                 center: [48.11, -1.66],
                 zoom: 13 });
   
  // Fonds de carte
  
var baselayers = {
     OSM: L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'),
     ESRI: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}')}
;baselayers.ESRI.addTo(map);

// Configuration Popup
   var customOptions = {'maxWidth': '500', 'className' : 'custom'}

// Configuration icone marqueur Rennes 2
    var rennesicone = L.icon({
    iconUrl: 'https://i0.wp.com/vips2.fr/wp-content/uploads/2017/04/logoRennes2-Noir.png',
    iconSize: [45, 50] }); 
  
  // Configuration image popup Rennes 2
  var popuprennes2 = "<h1>Université Rennes 2</h1> <font> Ma super université que j'adore ! </font> <br> <br> <img src='https://www.univ-rennes2.fr/sites/default/files/UHB/SERVICE-RELATIONS-INTERNATIONALES/DSC_6983.JPG' width='350px'/> <br> <br> <iframe src='https://www.youtube.com/embed/t31R1mb0HFc'</iframe> ";
  
  // Ajout marqueur Rennes 2
  var Rennes2 =  L.marker([48.119, -1.7013],{icon: rennesicone}).bindPopup(popuprennes2,customOptions);

// Configuration icone marqueur Gare
    var gareicone = L.icon({
    iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/f/fc/Circle-icons-train.svg',
    iconSize: [35, 40] });  
	
  // Configuration image popup Gare
  var popupgare = "<h2>Gare de Rennes</h2> <h3>Motifs de déplacements</h3> <iframe src='https://ressources.data.sncf.com/explore/embed/dataset/repartition-des-motifs-de-deplacements-des-voyageurs-et-non-voyageurs-enquetes-e/analyze/?q=rennes&dataChart=eyJxdWVyaWVzIjpbeyJjaGFydHMiOlt7InR5cGUiOiJiYXIiLCJmdW5jIjoiQVZHIiwieUF4aXMiOiJwb3VyY2VudGFnZSIsInNjaWVudGlmaWNEaXNwbGF5Ijp0cnVlLCJjb2xvciI6IiNBMTAwNkIiLCJwb3NpdGlvbiI6ImNlbnRlciJ9XSwieEF4aXMiOiJtb3RpZl9kdV9kZXBsYWNlbWVudCIsIm1heHBvaW50cyI6NTAsInNvcnQiOiIiLCJzZXJpZXNCcmVha2Rvd24iOiIiLCJzZXJpZXNCcmVha2Rvd25UaW1lc2NhbGUiOiIiLCJjb25maWciOnsiZGF0YXNldCI6InJlcGFydGl0aW9uLWRlcy1tb3RpZnMtZGUtZGVwbGFjZW1lbnRzLWRlcy12b3lhZ2V1cnMtZXQtbm9uLXZveWFnZXVycy1lbnF1ZXRlcy1lIiwib3B0aW9ucyI6eyJxIjoicmVubmVzIn19fV0sInRpbWVzY2FsZSI6IiIsImRpc3BsYXlMZWdlbmQiOnRydWUsImFsaWduTW9udGgiOnRydWV9&static=false&datasetcard=false' width='400' height='300' frameborder='1'></iframe>";
  
  // Ajout marqueurs Gare
  var Gare =  L.marker([48.1032, -1.6725],{icon: gareicone}).bindPopup(popupgare,customOptions);
  
  // Ajout marqueurs Rennes 1
  var Rennes1 = new L.LayerGroup();
	L.marker([48.12, -1.6353]).bindPopup('<b>Université Rennes 1</b>').addTo(map)
	L.marker([48.11791, -1.641]).bindPopup('<b>INSA Rennes</b>').addTo(map)
  //Gestion des marqueurs
  
 // Gestion des marqueurs
  
  var marqueurs = {"Rennes2": Rennes2,"Gare": Gare};
  
  // Selecteur des marqueurs
  
 L.control.layers(baselayers, marqueurs, {position: 'topright', collapsed: false, autoZIndex: true}).addTo(map);
  
  // Echelle cartographique
  
L.control.scale().addTo(map);

</script>
   
</body>
</html>

https://unpkg.com/leaflet@1.6.0/dist/leaflet.js