CODEWITHSUNDEEP
javascriptpopupleaflet
Yuqing
Yuqing

Reputation: 343

leaflet: change popup image using popup.setContent()

I am trying to make images in popups change periodically. The function refreshImage periodically GET from server a 64based string of image data and sets the src of the img using popup.setContent(). The second part takes the coordinance data from a json file and create markers, bind popups and initiate a onClick event handler that will trigger the refreshImage function. Everything from create marker to get data works properly, the data can be shown as image if used in a simple HTML situation. But it just cannot show and refresh the image in a popup. I have tried popup.setContent(), $(popup._contentNode).html(), document.getElementById(imageID).src = and document.getElementById(imageID).innerHTML="", but none seems to work. Here is my code: 

    function refreshImage(popup,cName,starttime,endtime,curtime) {//the times are Date object
        var data;
        var hour = 60 * 60 * 1000;
        var nexttime = new Date(curtime.valueOf()+hour);
        strcurtime = curtime.toLocaleString();
        strstarttime = starttime.toLocaleString();
        strendtime = endtime.toLocaleString();
        strnexttime = nexttime.toLocaleString();
        if(endtime<nexttime){
            $.get( "/images",{camname:cName, starttime: strcurtime,endtime: strendtime}, function( data, status ) {//
            });
            curtime = starttime;
        }else{
            $.get( "/images",{camname:cName,starttime:strcurtime ,endtime:strnexttime}, function( data, status ) {//      
            });
            curtime = nexttime;
        }

        popup.setContent("<img src=\"data:image/jpeg;base64, "+ data +"\" alt=\"camera_image\" width=\"305\" height=\"210\" border=\"0\" align=\"middle\" id=\"myPic\"><br><p>"+cName+"</p>");
        setTimeout(refreshImage,1000,popup,cName,starttime,endtime,curtime);
    }


    var markers = [];
    d3.csv("static/data/cam_coordinates.json", function(error, data) {
        var cameras = data;
        var starttime = new Date('2015-12-07 07:00:03');
        var endtime = new Date('2015-12-08 08:15:00');
        console.log(cameras.length);
        for(var i = 0; i<cameras.length; ++i){
            var marker = L.marker( [cameras[i].lat, cameras[i].log], {icon: cam}, {title: cameras[i].camera}).addTo(map);
            window.markers.push(marker);
            window.markers[i].bindPopup("<img src=\"\" alt=\"camera_image\" width=\"305\" height=\"210\" border=\"0\" align=\"middle\" id=\"myPic\"><br>"+cameras[i].camera);

            var popup = window.markers[i]._popup;

            window.markers[i].on('click', function(popup){

                refreshImage(popup,'Ft_Washington_@_179_St', starttime, endtime, starttime);
            });
        }
    });

Upvotes: 1

Views: 3011

Answers (1)

YaFred
YaFred

Reputation: 10008

To achieve that, you have to use other events provided by marker: popupopen and popupclose

This events provide the current popup object to the event callback. 

marker1.on('popupopen', function(e) {
   thePopup = e.popup; // has to be kept global for refreshTime() 
   refreshTime(); // do the first action
   theTimer = setInterval(refreshTime, 2000); // repeat until we stop it in popupclose
});

marker1.on('popupclose', function(e) {
   clearInterval(theTimer);
});

function refreshTime() {
   var d = new Date();
   thePopup.setContent(d.toLocaleTimeString());
}

Here is an example where I continuously update the time in the popup when a marker is clicked.

Note: The popup is a layer that belongs to the map, not to the marker. So you cannot use the click event as you do.

Upvotes: 1

Related Questions