2

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?

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.