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">« Previous</a>' +
'<a href="#" class="next">Next »</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?