Problems with Datamaps D3. Size and / or constant size of contact / marker when scaling

Question

I have a D3.js Datamaps.js map with column markers that I am trying to implement for scaling.

http://jsbin.com/xoferi/edit?html,output

Image output markers have a value of 20x20, and the pin point (at x + 10, y + 20) exceeds the selected latitude / longitude spot.

I am having problems scaling the map when the images are shifted relative to their relative position. For example: look at the pin of Iceland. When you zoom in, it drifts up and to the left.

How can I keep contacts the same size and in the same relative position while zooming and dragging the mouse around the map?

I was looking for other examples, and I'm just not sure what I am missing. Perhaps the size of the viewport needs to be added to the soemhow calculation. Or perhaps the original value of the alarm tokens needs to be changed by default. I'm just not sure.

ref: d3 US state map with markers, problems with scale conversion

Answer 1

Your initial calculations use a marker width / height of 20x20 pixels:

 return latLng[0] - 10; 

Your "recalcs" should do this also with the resized image. I would put the "real" x / y positoin in your data so that you can do the recalculation:

 datum.realx = latLng[0]; if ( latLng ) return latLng[0] - 10; 

And then move them to the zoom handler:

 map.svg.selectAll("image") .attr("height", 20*(1/scale)) .attr("width", 20*(1/scale)) .attr("x", function(d){ return d.realx - (20*(1/scale)/2); }) .attr("y", function(d){ return d.realy - (20*(1/scale)); });