Handling click event on image

[diegodebonis]

Hi again, i'm triying to execute a function on a click event of a image, here is my code:

actualizarMapa = function(a,b,c,d){ // add some new plots ... var updatedOptions = {'images' : {}}; updatedOptions.images['image1'] = { 'src' : 'img/img02.png', 'latitude' : '-34.27083595', 'longitude' : '-66.54968262', 'width':80, 'height':80 }; updatedOptions.images['image2'] = { 'src' : 'img/img01.png', 'latitude' : '-32.15701249', 'longitude' : '-65.67077637', 'width':80, 'height':80 };

        var newPlots = [];
        // and delete some others ...
        var deletedPlots = [b];
        $(".maparea1").trigger('update', [updatedOptions,newPlots, deletedPlots, {animDuration : 1000, 
            afterUpdate:function(container, paper, areas, plots, options){
                var mapConf = $.fn.mapael.maps['sanluis_departments'], coords = {};
                for (var id in options.images) {
                    coords = mapConf.getCoords(options.images[id].latitude, options.images[id].longitude);
                    paper.image(options.images[id].src, coords.x - options.images[id].width / 2, coords.y - options.images[id].height / 2, options.images[id].width, options.images[id].height);
                }
            }
        }]);
    }

I could put a pointer cursor via CSS, but i cant handle the click event in the image, do you have any ideas? Can i add a new attr to the image object?

[neveldo]

Hello,

You could do something like this in order to add a callback function for the "click" event on your images :

var img = paper.image)(...);
$(img.node).on('click', function(e) {
    //...
});

[diegodebonis]

Hi Nev i make this work, the solution you gave me work perfectly. Now i have another question, how can i do to delete the old images in the map once i want to update it?

[neveldo]

Hi Diego,

I'm glad it helped you ! I'm working since the last weeks on the new version of Mapael that should be released in a few days. You will be able to add images as plotted points through mapael options, try the examples : http://jsfiddle.net/neveldo/z559d0s2/ , http://jsfiddle.net/neveldo/1jjq6g9y/ .

It allows you to delete images exactly like a plotted point in the 'update' event. Try it : http://jsfiddle.net/neveldo/v18j6L6d/ .

Feel free to download the dev-master version (https://github.com/neveldo/jQuery-Mapael/archive/master.zip) in order to use this feature before the release of mapael 1.0.0 !
The readme is already up-to-date with examples for all new features (https://github.com/neveldo/jQuery-Mapael), feel free to send me your feedbacks :)

[diegodebonis]

Thanks for the quick answer, im going to try this with the new version.

Here the solution that i did (a little rusty yes xD) :

$(".map").find('image').remove();

[Indigo744]

Hey! It has been more than one year. I'm closing this thread. Feel free to submit a new issue if you have any problems.