Resize Image when Zooming in or out

[javialej87]

Hello!

I want to know how can i set the width and height of images (that are actually markers on the plot) dinamically when zooming in or out. I want this behaviour because every time i zoom in, the images remain the same width and height so they occupied too much space.

Using your examples i came down to this on the zoom event, but i need to know how can i retrieve the actual width and size of the image:

var updatedOptions = {'areas' : {}, 'plots' : {}}; updatedOptions.plots["886"] = { type : "image", url: "myImages/new_icon.png", width: updatedOptions.plots["886"].width - 5, height: updatedOptions.plots["886"].height- 5 };

$(".mapcontainer").trigger('update', [updatedOptions, {animDuration : 1000}]);

If i hardcode the width and height it resize ok, but i need to know dinamically wich height and width has that image in particular (on the zoom event).

Thanks!!

[neveldo]

Hello,

Maybe ou could get the current size of the image you want to update through jquery, here is a code snippet that should work :

$("image[data-id='886']").attr("width");

I hope it will help you,

[javialej87]

Thanks!

I was trying tho achieve the same effect as using google maps when you zoom in, and that is to keep the image Plot always the "same" size, I mean, every time you zoom in, you have to make the plot smaller, otherwise it will turn big enough that will cover all the selected area.

I solved it by updating the map plots in a event when using the mouseWheel or the click (zoom in, or zoom out) and the value of the image depends on this zoom. In case someone need it:

$('.mapcontainer svg').bind('mouseup',(function(e) {

zoomLevelAdjust = $(".mapcontainer ").data("zoomLevel"); updatedOptions.plots["Plot1"] = { type : "image", url: "source/sucu_icon.png", width: 40 / (1 + zoomLevelAdjust * 0.2), height: 40 / (1 + zoomLevelAdjust * 0.2),
longitude: -58.38952, latitude:-34.41608 }, ... ... ... ..

Thanks!!

[neveldo]

Hello @javialej87 , thank you for having shared the solution!

[kkfernan]

@javialej87 Awesome! Where in your code did you put your mapcontainer function? Please advise.

Thank you,

Kenny

[javialej87]

Hello Kenny!

It's just and event so you have to call it after you have created the map. Notice that "$('.mapcontainer svg').bind('mouseup',(function(e) " it's an event Listener, every time the mouse button is up after clicking it it will fire this event.

Take into account that you have to replace the "mapcontainer svg" for the corresponding name you have for your map.

Also, check if when you do the zoom in, or zoom out, the icons remains pointing to the same area. I had the problem that when the zoom changed, the icon moved.

Good luck!

2016-08-23 20:13 GMT-03:00 Kenneth Fernandez notifications@github.com:

@javialej87 https://github.com/javialej87 Awesome! Where in your code did you put your mapcontainer function? Please advise.

Thank you,

Kenny

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/neveldo/jQuery-Mapael/issues/221#issuecomment-241909513, or mute the thread https://github.com/notifications/unsubscribe-auth/ARrV8mvbW07bRd3hK0gPBsV8-iu3iBrxks5qi36ZgaJpZM4IJ6An .

[neveldo]

Related to #253