how to display a div info under each marker using Mapbox and leaflet - leaflet

Question

I am using mapbow with leaflet to display a map.
I want to add a div under each marker (like belo) but i didn't know how to make it.
I looked almost on all the doc of mapbox markers but I did not find it.
There is maybe a trick to add an HTML element for each marker with a specific information that will be shown when use rlaod
This is a screenshot of what am looking for :
And this is what i have :
Here is my code :
L.mapbox.accessToken = 'pk.MY_TOKEN';
var map = L.mapbox.map('map')
.setView([48, 2.5], 5)
.addLayer(L.mapbox.styleLayer('mapbox://styles/meruem92/cla6ktb2n001v16nw5ludpq67'));
var myLayer = L.mapbox.featureLayer().addTo(map);
let template = `
<h1>Yo sekai !</h1>
<img src="images/disney.jpg" alt="" />
`
var geoJson = {
type: 'FeatureCollection',
features: [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [2.3484063461432183, 48.857478354732855]
},
"properties": {
"tooltip": "totltip 1",
"title": "Paris",
"description": template,
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-3.721208820629982, 40.72384968227116]
},
"properties": {
"tooltip": "totltip 2",
"title": "Mapbox",
"description": "Spain, España",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 3",
"title": "Lincoln Park",
"description": "A northside park that is home to the Lincoln Park Zoo",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.637596, 41.940403],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 4",
"title": "Burnham Park",
"description": "A lakefront park on Chicago's south side",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.603735, 41.829985],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Millennium Park",
"description": "A downtown park known for its art installations and unique architecture",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.622554, 41.882534],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Grant Park",
"description": "A downtown park that is the site of many of Chicago's favorite festivals and events",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.619185, 41.876367],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Humboldt Park",
"description": "A small park on Chicago's northwest side",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.70199, 41.905423],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Douglas Park",
"description": "A small park near in Chicago's North Lawndale neighborhood",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.699329, 41.860092],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Calumet Park",
"description": "A park on the Illinois-Indiana border featuring a historic fieldhouse",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.530221, 41.715515],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Jackson Park",
"description": "A lakeside park that was the site of the 1893 World's Fair",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
}
},
"geometry": {
"coordinates": [-87.580389, 41.783185],
"type": "Point"
}
},
{
"type": "Feature",
"properties": {
"tooltip": "totltip 1",
"title": "Columbus Park",
"description": "A small park in Chicago's Austin neighborhood",
// Store the image url and caption in an array.
'images': [
['https://i.imgur.com/O6QEpBs.jpg','The U.S. Capitol after the burning of Washington during the War of 1812'],
['https://i.imgur.com/xND1MND.jpg','Ford\'s Theatre in the 19th century, site of the 1865 assassination of President Lincoln'],
['https://i.imgur.com/EKJmqui.jpg','The National Cherry Blossom Festival is celebrated around the city each spring.']
],
"icon": {
"iconUrl": "images/marker-figma.svg",
"iconSize": [20, 20],
"iconAnchor": [10, 25],
"popupAnchor": [0, -25],
"className": "dot"
},
"geometry": {
"coordinates": [-87.769775, 41.873683],
"type": "Point"
}
}
]
};
// Add custom popup html to each marker.
myLayer.on('layeradd', function(e) {
var marker = e.layer;
// marker.bindTooltip("my tooltip text").openTooltip();
var feature = marker.feature;
var images = feature.properties.images
var slideshowContent = '';
for(var i = 0; i < images.length; i++) {
var img = images[i];
slideshowContent += '<div class="image' + (i === 0 ? ' active' : '') + '">' +
'<img src="' + img[0] + '" />' +
'<div class="caption">' + img[1] + '</div>' +
'</div>';
}
// Create custom popup content
var popupContent =
'<div id="' + feature.properties.id + '" class="popup">' +
'<h2>' + feature.properties.title + '</h2>' +
'<div class="slideshow">' +
slideshowContent +
'</div>' +
'<div class="cycle">' +
'« Previous' +
'Next »' +
'</div>'
'</div>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
minWidth: 320
});
marker.setIcon(L.icon(feature.properties.icon));
for (var i = 0, l = geoJson.features.length; i < l; i++) {
marker.bindTooltip("You clicked marker: " + i).openTooltip();
console.dir(marker._tooltip._content)
}
});
// Add features to the map
myLayer.setGeoJSON(geoJson);
$('#map').on('click', '.popup .cycle a', function() {
var $slideshow = $('.slideshow'),
$newSlide;
if ($(this).hasClass('prev')) {
$newSlide = $slideshow.find('.active').prev();
if ($newSlide.index() < 0) {
$newSlide = $('.image').last();
}
} else {
$newSlide = $slideshow.find('.active').next();
if ($newSlide.index() < 0) {
$newSlide = $('.image').first();
}
}
$slideshow.find('.active').removeClass('active').hide();
$newSlide.addClass('active').show();
return false;
});
body {
background-color: teal;
margin: 0;
}
#map {
height: 100vh;
width: 800px;
margin: auto;
/* margin: 50px auto; */
}
.leaflet-popup-content-wrapper img,
.mapboxgl-popup-content img {
width: 100%;
}
.marker {
background-image: url("images/marker-figma.svg");
background-size: cover;
background-size: contain;
background-repeat: no-repeat;
object-fit: cover;
width: 20px;
height: 20px;
/* border-radius: 50%; */
cursor: pointer;
}
.mapboxgl-popup {
max-width: 200px;
}
.mapboxgl-popup-content {
text-align: center;
font-family: "Open Sans", sans-serif;
}
/* //Popup style */
.popup {
text-align: center;
}
.popup .slideshow .image {
display: none;
}
.popup .slideshow .image.active {
display: block;
}
.popup .slideshow img {
width: 100%;
}
.popup .slideshow .caption {
background: #eee;
padding: 10px;
}
.popup .cycle {
padding: 10px 0 20px;
}
.popup .cycle a.prev {
float: left;
}
.popup .cycle a.next {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
<!-- <link
rel="stylesheet"
href="https://unpkg.com/leaflet#1.9.2/dist/leaflet.css"
/> -->
<!-- <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.css' rel='stylesheet' /> -->
<link href='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.css' rel='stylesheet' />
<title>Map project js</title>
</head>
<body>
<div id="map"></div>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<!-- <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.2/mapbox-gl.js'></script> -->
<!-- <script src="https://unpkg.com/leaflet#1.9.2/dist/leaflet.js"></script> -->
<script src='https://api.mapbox.com/mapbox.js/v3.3.1/mapbox.js'></script>
<script src="main2.js"></script>
</body>
</html>

Answer 1

I found it :
for (var i = 0; i < tooltip.length; i++) {
marker.bindTooltip(tooltip).openTooltip();
console.dir(tooltip);
}
i added this loop under marker.setIcon