JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css">
<div id="map">
</div>
CSS
#map{
width:100%;
height:300px
}
.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; }
JavaScript
var geoJson = {
"type": "FeatureCollection",
features: [{
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [-122.11587572202124, 42.937756819243909]},
"properties": {
'title': 'Washington, D.C.',
'images': [
['http://freakplaces.com/img/Cannon_Beach17.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.']
]
}
}, {
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [-123.97288585689788, 45.903886579968066]},
"properties": {
'title': 'New York City',
'images': [
['http://freakplaces.com/img/Cannon_Beach17.jpg','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
['http://freakplaces.com/img/CraterLakeNP14.jpg','During the mid-19th Century, Broadway was extended the length of Manhattan.'],
['https://i.imgur.com/Pk3DYH1.jpg','Times Square has the highest annual attendance rate of any tourist attraction in the world.']
]
}
}]};
var map = L.map('map').setView([51.505, -0.09], 0);
L.geoJson(geoJson, {
onEachFeature: onEachFeature
}
).addTo(map);
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.title) {
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]...