Leaflet map GeoJSON placemarks with image slideshow

Question

I am wondering how to create leaflet map where GeoJSON placemarks provide the image slideshow as per the example below:

https://docs.mapbox.com/mapbox.js/example/v1.0.0/markers-with-image-slideshow/

I found some solution here:

https://stackoverflow.com/questions/40079199/webmaping-leaflet-library

But unfortunately the code isn't working properly.

Once I attach the .css 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; }

I have got picture dissapeared. Basically the problem must lie somewhere in the code, because I cannot move the slides next and back.

The script code looks like this:

 var geoJson = {
"type": "FeatureCollection",
      features: [{
      type: 'Feature',
      "geometry": { "type": "Point", "coordinates": [-122.11587572202124, 42.937756819243909]},
      "properties": {
          'title': 'Washington, D.C.',
          'images': [
            ['https://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': [
            ['https://freakplaces.com/img/Cannon_Beach17.jpg','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
            ['https://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.']
          ]

      }
  }]};



 L.geoJson(getData(), {
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] + '</div>' +
                            '</div>';
         }

    var popupContent =  '<div id="' + feature.properties.title + '" class="popup">' +
                            '<div class="slideshow">' +
                                slideshowContent +
                            '</div>' +
                            '<div class="cycle">' +
                                '<a href="#" class="prev">&laquo; Previous</a>' +
                                '<a href="#" class="next">Next &raquo;</a>' +
                            '</div>'
                        '</div>';

    layer.bindPopup(popupContent);
}
  };



$('#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;
});





   function getData() { 
   return {
"type": "FeatureCollection",
      features: [{
      type: 'Feature',
      "geometry": { "type": "Point", "coordinates": [-122.11587572202124, 42.937756819243909]},
      "properties": {
          'title': 'Washington, D.C.',
          'images': [
            ['https://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': [
            ['https://freakplaces.com/img/Cannon_Beach17.jpg','Peter Minuit is credited with the purchase of the island of Manhattan in 1626.'],
            ['https://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.']
          ]

      }
  }]};
  }

I am wondering about the getData function. Is it really needed for this purpose at all? I don't see it in the Mapbox example.

How to make this example running?

Answer 1

The getData() function is indeed not very usefull as it return exactly what is stored in the variable geoJson

But the main problem is that you are requesting the images using HTTPS from a website (http://freakplaces.com) that is not secured. Change the urls to HTTP and it will work ;)

Demo : https://jsfiddle.net/fg3dorpj/