<style>
.popup {
text-align: center;
}
.popup .slideshow {
width: 100%;
}
.popup .slideshow .image {
display: none;
}
.popup .slideshow .active {
display: block;
}
.popup .slideshow img {
width: 100%;
}
.popup .slideshow .caption {
background: #eee;
padding: 8px;
}
.popup .cycle {
height: 30px;
margin-top: 5px;
padding-top: 5px;
}
.popup .cycle a.prev {
float: left;
}
.popup .cycle a.next {
float: right;
}
</style>
<div id='map'></div>
<script type='text/javascript'>
var map = L.mapbox.map('map', 'examples.map-9ijuk24y');
var geoJson = [{
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [-77.03, 38.90]},
"properties": {
'title': 'Washington, D.C.',
// 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.']
]
}
}, {
type: 'Feature',
"geometry": { "type": "Point", "coordinates": [-74.00, 40.71]},
"properties": {
'title': 'New York City',
'images': [
['https://i.imgur.com/exemdwr.png','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
['https://i.imgur.com/LHNDBpf.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.']
]
}
}];
// Add custom popup html to each marker
map.markerLayer.on('layeradd', function(e) {
var marker = e.layer;
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">' +
'<a href="#" class="prev" onclick="return moveSlide(\'prev\')">« Previous</a>' +
'<a href="#" class="next" onclick="return moveSlide(\'next\')">Next »</a>' +
'</div>'
'</div>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 320
});
});
// Add features to the map
map.markerLayer.setGeoJSON(geoJson);
// This example uses jQuery to make selecting items in the slideshow easier.
// Download it from http://jquery.com
function moveSlide(direction) {
var $slideshow = $('.slideshow'),
totalSlides = $slideshow.children().length;
if (direction === 'prev') {
var $newSlide = $slideshow.find('.active').prev();
if ($newSlide.index() < 0) {
$newSlide = $('.image').last();
}
} else {
var $newSlide = $slideshow.find('.active').next();
if ($newSlide.index() < 0) {
$newSlide = $('.image').first();
}
}
$slideshow.find('.active').removeClass('active').hide();
$newSlide.addClass('active').show();
return false;
}
map.setView([40, -75], 6);
</script>