Image slideshow in leaflet map based on geoJSON layer

Question

To be more precised like previously

Image slideshow implementation into Leaflet map

I have developed my code in the jsfiddle, which states where the problem is:

https://jsfiddle.net/Krukarius/0q8fLe7r/10/

I have a geoJSON layer as per below:

var sitec = {
"type": "FeatureCollection",
    features: [
        {
         type: "Feature",
         "properties": {
             "Title": "Sitec IS",
             "Head": "7400 Beach Drive",
             "Description": "Gavin Sinclair",
             "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."]
            ]
    },
        "geometry": {
        "type": "Point",
        "coordinates": [
        0.16964435577392578,
        52.29220753602784
            ]
              }
                },

which is customized:

var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};

and next plotted into the following function:

var sitis = L.geoJSON(sitec, {
pointToLayer: function (feature, latlng) {
feature.properties.myKey = feature.properties.Title + ', ' + 
feature.properties.Head
return L.circleMarker(latlng, geojsonMarkerOptions);
},
onEachFeature: function (feature, layer) {
    layer.bindPopup("<h1><u><font color='red'>"+feature.properties.Title+" 
</h1></u></font><h2>Address: "+feature.properties.Head+"</h2> 
<p>"+feature.properties.Description+"</p><p> 
Website:"+feature.properties.URL+"</p><br><center><img src='images/" + 
feature.properties.Pict + " ' style='width:200px;height:300x;'>");
}

}).addTo(map);

Now I would like to implement the slideshow code, as per the example here:

Leaflet map GeoJSON placemarks with image slideshow

but when I copy the code underneath the existing one above, the slideshow is not working.

L.geoJson(sitec, {
onEachFeature: onEachFeature
}
).addTo(map);


L.geoJson(sitec, {
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;
})

The console states:

Uncaught TypeError: Cannot set property 'waypoints' of undefined at Object.h [as extend] (leaflet.js:5) at (index):655

See my full example here:

https://jsfiddle.net/Krukarius/0q8fLe7r/10/

Is there an option to merge these 2 codes and make the slideshow implemented into the existing GeoJSON layers?

Answer 1

The issue has been resolved.

A main thing was the injection of pointToLayer: function (feature, latlng) { feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head return L.circleMarker(latlng, geojsonMarkerOptions); },

into the L.geoJson(geojson, { onEachFeature: OnEachFeature}

So now, the full code looks like this:

var geoJson = {
"type": "FeatureCollection",
  features: [{
  type: 'Feature',
  "geometry": { "type": "Point", "coordinates": [0.11587572202124, 
52.237756819243909]},
  "properties": {
      'Title': 'Washington, D.C.',
      'Head': '7400 Beach Drive',
      'Description': 'Gavin Sinclair',
      'URL': 'https://www.sitec-is.co.uk/',
      '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": [0.07288585689788, 52.33886579968066]},
  "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.']
      ]

  }
  }]};

where I have focused on the 1st geoJson placemark only, and next:

Customizing the markers

var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};

New variable stating about the existing L.GeoJSON layer, where the pointToLayer has been implemented

 var sitis =  L.geoJson(geoJson, {
 pointToLayer: function (feature, latlng) {
 feature.properties.myKey = feature.properties.Title + ', ' + feature.properties.Head
    return L.circleMarker(latlng, geojsonMarkerOptions);
},
 onEachFeature: onEachFeature
 }
  ).addTo(map); 

and now, the slideshow code with popup implemented as per the: https://jsfiddle.net/s4rd1bap/ example

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">' +                             
  "<h1><font color='red'>"+feature.properties.Title+
  "</font></h1><h2>Address: " +feature.properties.Head+
"</h2><p>"+feature.properties.Description+"</p><p> Website:"
+feature.properties.URL+

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

At the end the leaflet-search tool has been attached:

 L.control.search({
layer: L.layerGroup ([sitis]),
initial: false,
propertyName: 'myKey', // Specify which property is searched into.
zoom: 14,
placeholder: "Search order",
position: 'topleft'
  })
 .addTo(map);

A full code example is available here:

https://jsfiddle.net/Krukarius/rv28aznx/1/