We Keep Coding

Filter Markers by Date in Leaflet

I built a photo map with leaflet js which contains geotagged photos. I managed to fetch the timestamp and coordinates of the pictures with a php script and now I want to filter the images by it's recording date. The metadata of the imported images contain information about Year, Year.Month and Year.Month.Day.
This is my leaflet setup:
var photoLayer = L.photo.cluster({ spiderfyDistanceMultiplier: 1.2 }).on('click', function (evt) {
evt.layer.bindPopup(L.Util.template('<span class="DatumPopup">Aufnahmedatum: {DateTimeOriginal} <span class="Uhrzeit">{Time}</span><img src="{url}" height="auto" width="100%"/>', evt.layer.photo), {
className: 'leaflet-popup-photo',
minWidth: 400
}).openPopup();
});
//Call the next function as soon as the page loads
window.onload = callForImages()
//Makes a request, loading the getimages.php file
function callForImages() {
//Create the request object
var httpReq = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
//When it loads,
httpReq.onload = function() {
//Convert the result back into JSON
var result = JSON.parse(httpReq.responseText);
//Load the images
loadImages(result);
}
//Request the page
try {
httpReq.open("GET", "getphotos.php", true);
httpReq.send(null);
} catch(e) {
console.log(e);
}
}
//Generates the images and sticks them into the photolayer
function loadImages(images) {
var photos = [];
//Loop over the images
for(var i = 0; i < images.length; i++) {
photos.push({
lat: images[i].lat,
lng: images[i].lng,
url: images[i].filename,
DateTimeOriginal: images[i].DateTimeOriginal,
Year: images[i].Year,
YearMonth: images[i].YearMonth,
Time: images[i].Time,
//If you have thumbnails, switch the comments on the following lines.
thumbnail: images[i].filename
//thumbnail: images[i].thumbnail
});
}
photoLayer.add(photos).addTo(map);
//Add the photos to the map
map.fitBounds(photoLayer.getBounds());
//Zoom the map to the photos
}
}).addTo( map );
I have a hard time wrapping my head around how to apply the filter with the layer control. Since I used leaflet.photo to import the pictures, I don't even know hot wo apply a classic layer control to this project. Anyone who could give me a hint in the right direction?

How to Save do an callback/action when all divs are rendered using html2canvas

I am iterating through list of divs,converting them to canvas and then adding them to jspdf.
After doing all these I am saving them to disk.
function exportDataTablesAsPDF() {
var dataTablesToBeExported = $('.js-exportdiv');
$.each(dataTablesToBeExported, function (index, element) {
html2canvas(element).then(function (canvas) {
var img = canvas.toDataURL("image/png");
masterPdf.addImage(img, 'PNG', 0, 0,canvas.width,canvas.height);
});
});
masterPdf.save("Test.pdf");
}
But the problem here is , masterPdf.save() executes before all canvas call backs are complete.
The pdf gets downloaded befoe all the images are added to the document. Is there a way, I can wait for all then(canvas) to finish and download the pdf.

You could try calling masterPdf.save after all the images have been added.
Something like
function exportDataTablesAsPDF() {
var dataTablesToBeExported = $('.js-exportdiv');
var numberOfImages = dataTablesToBeExported.length;
$.each(dataTablesToBeExported, function (index, element) {
html2canvas(element).then(function (canvas) {
var img = canvas.toDataURL("image/png");
masterPdf.addImage(img, 'PNG', 0, 0,canvas.width,canvas.height);
if (index + 1 == numberOfImages) { masterPdf.save("Test.pdf"); }
});
});
}

How to preload images during a looped array for background images

I've written a simple loop that cycles through a series of images in an array into the background-image property of an element. The problem is that due to the fact that the images are loading, the animation is going haywire when everything is initially loading. I'm trying to set up a preloading workflow where:
the entire loop is blocked by waiting until the first image is fully loaded
every time a new image is fully preloaded, it begins preloading the following image
the preloading must stop when the array is over and use cached images so it's easy on the browser and doesnt just keep loading the same array on images over and over eternally.
Any help?
http://codepen.io/jeremypbeasley/pen/JoZzyo?editors=001
var photoSet = [
"https://farm6.staticflickr.com/5475/9790841974_182a06590a_o.jpg",
"https://farm3.staticflickr.com/2840/9042399407_bf04388aca_o.jpg",
"https://farm6.staticflickr.com/5504/14634417581_626ea1a835_o.jpg"
];
var p = photoSet.length;
console.log(p);
var i = 1;
function loopPhotos() {
setTimeout(function() {
$('div').css({'background-image': 'url(' + photoSet[i] + ')',});
i++;
console.log(i);
// call the next indexed image and begin to preload it
var img = new Image();
img.src = photoSet[i];
if (i >= p) {
i = 0;
// stop preloading images, somehow used images that are cached so the browser isn't working eternally reloading the same X number of photos.
}
loopPhotos();
}, 2000)
}
$(document).ready(function() {
// load first image
var firstImg = new Image();
firstImg.src = photoSet[0];
// when first image is loaded, apply it to background and begin looping
if (firstImg.complete) {
$('div').css({'background-image': 'url(' + firstImg.src + ')',});
loopPhotos();
console.log('first image loaded!');
}
});

This will do it
var photoSet = [
"https://farm6.staticflickr.com/5475/9790841974_182a06590a_o.jpg",
"https://farm3.staticflickr.com/2840/9042399407_bf04388aca_o.jpg",
"https://farm6.staticflickr.com/5504/14634417581_626ea1a835_o.jpg"
];
function preloadImageAndAct(src, action){
var img = new Image();
img.onload = action;
img.src = src;
}
function showImage( src ){
$('div').css({
'background-image': 'url(' + src + ')',
opacity: 1
});
}
var nextImage = 0;
function loopPhotos() {
console.log('Preload and show image #', nextImage);
var nextSrc = photoSet[nextImage];
preloadImageAndAct( nextSrc, function(){
showImage( nextSrc );
setTimeout( function() {
nextImage++;
nextImage %= photoSet.length;
loopPhotos();
}, 2000);
});
}
$(document).ready(function() {
loopPhotos();
});
Demo at http://codepen.io/gpetrioli/pen/rarPay
Keep in mind that you cannot transition the background-image. If you want transition for the change of images you need to either use two elements or fade the element out / change src / fade the element in.
AS for the caching, once they have been loaded once they are automatically cached by the browser so there should be no issue with that.

Delay image loading with JavaScript

i currently need to load 123,543 images from my server but every image must go through a PHP script to generate it, the problem is that my server is very weak and it crashes after loading about 600 images, so i'm asking for a Javascript that will load 2 images / second, if possible.
Thank you.

You can use http://www.appelsiini.net/projects/lazyload
$(function() {
$("img.lazy").lazyload({
event : "sporty"
});
});
$(window).bind("load", function() {
var timeout = setTimeout(function() { $("img.lazy").trigger("sporty") }, 5000);
});

Assuming you want to place all the images in a container with id 'container', this code does the trick:
var images = [
'image1.jpg',
'image2.jpg'
],
container = document.getElementById('container');
function loadNextImage(index) {
var index = index || 0,
imageUrl = images[index],
image = document.createElement('img');
image.src = imageUrl;
container.appendChild(image);
if (index + 1 < images.length) {
setTimeout(function(){loadNextImage(index + 1)}, 500);
}
}
loadNextImage();

control image width and height when upload image

Straight to point. I want to set the limit of the width and height of the image when user upload an image using plupload.
Letsay:
if
width: 1000px
height: 1000px
else
you must upload image with at least width:1000px and height:1000px
// $(".form").validator();
$(function() {
if($("#uploader").length > 0) {
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight',
browse_button : 'pickfile',
container : 'uploader',
max_file_size : '10mb',
url : 'design.php?do=upload&ajax=1',
multiple_queues: false,
file_data_name: 'design',
flash_swf_url : www + '/js/plupload.flash.swf',
silverlight_xap_url : www + '/js/plupload.silverlight.xap',
filters : [
{title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"}
]
});
$('#uploadfiles').click(function(e) {
if($("#uploader select[name=category]").val() == "") {
$("#uploader select[name=category]").next('.error-required').show();
return false;
}
uploader.start();
e.preventDefault();
});
uploader.init();
So, is this possible?

You can easily write a filter for plupload.
Here is filter for min required width.
Add bellow code to your script. (Just copy)
plupload.addFileFilter('min_width', function(maxwidth, file, cb) {
var self = this, img = new o.Image();
function finalize(result) {
// cleanup
img.destroy();
img = null;
// if rule has been violated in one way or another, trigger an error
if (!result) {
self.trigger('Error', {
code : plupload.IMAGE_DIMENSIONS_ERROR,
message : "Image width should be more than " + maxwidth + " pixels.",
file : file
});
}
cb(result);
}
img.onload = function() {
// check if resolution cap is not exceeded
finalize(img.width >= maxwidth);
};
img.onerror = function() {
finalize(false);
};
img.load(file.getSource());
});
And add this filter to your upload script.
filters : {
min_width: 700,
},

Plupload doesn't support this itself (although it has been requested). There are probably a couple of reasons for this, firstly because you just can't get the image dimensions before upload in IE (you can in some other browsers) and secondly, whilst that would work for some browsers using the using the HTML4/5 methods, I am not sure that the Flash/Silverlight etc. methods would also be able to reliably determine dimensions.
If you were happy with limited browser, HTML4/5 methods only you should hook into the "FilesAdded" event e.g.
uploader.bind('FilesAdded', function(up, files) {
//Get src of each file, create image, remove from file list if too big
});

I recently wanted to do the same thing, and was able to achieve it the way Thom was suggesting. He was correct on it's limitation though; if you want to add this, it will only work in modern browsers and not in the flash or silverlight runtimes. This is not a huge issue, as my non-html5 users will just get an error after upload, rather than before.
I initialized a total image count variable to keep track of the images placed on the page. Also a vairable to store photos we want to delete after we read them all.
var total_image_count = 0;
var files_to_remove = [];
Then I read the pending files with FileReader(), place them on the page, and get their width
init:{
FilesAdded: function(up, files) {
if (uploader.runtime == "html5"){
files = jQuery("#"+uploader.id+"_html5")[0].files
console.log(files);
for (i in files){
//create image tag for the file we are uploading
jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container");
reader_arr[total_image_count] = new FileReader();
//create listener to place the data in the newly created
//image tag when FileReader fully loads image.
reader_arr[total_image_count].onload = function(total_image_count) {
return function(e){
var img = $("#image-"+total_image_count);
img.attr('src', e.target.result);
if ($(img)[0].naturalWidth < 1000){
files_to_remove.push(files[i]); //remove them after we finish reading in all the files
//This is where you would append an error to the DOM if you wanted.
console.log("Error. File must be at least 1000px");
}
}
}(total_image_count);
reader_arr[total_image_count].readAsDataURL(files[i]);
total_image_count++;
}
for (i in files_to_remove){
uploader.removeFile(files_to_remove[i]);
}
}
}
}
As a side note, I was wanting to show image thumbnails anyway, so this method works great for me. I have not figured out how to get an image's width without first appending it to the DOM.
Sources:
Thumbnail an image before upload:
https://stackoverflow.com/a/4459419/686440
Accessing image's natural width:
https://stackoverflow.com/a/1093414/686440

to access width and heigth without thumbnail an image you can do this:
uploader.bind('FilesAdded', function(up, files) {
files = jQuery("#"+uploader.id+"_html5").get(0).files;
jQuery.each(files, function(i, file) {
var reader = new FileReader();
reader.onload = (function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
// access image size here using this.width and this.height
}
};
});
reader.readAsDataURL(file);
}
}