I have a vega chart for world map similar to this example
I am trying to add zoom and pan to it.
For zooming it is working fine, but for panning there are some issues :
-If there is quick mouse click, the map moves in one direction .
-If there is mouse click with hold, the map moves in one directionand returns back to the click's original position.
This happens inside or outside the polygons.
{"$schema": "https://vega.github.io/schema/vega/v5.json","description": "A configurable map of countries of the world.","width": 900,"height": 500,"autosize": "none","signals": [ {"name": "scale","value": 800,"bind": {"input": "range", "min": 50, "max": 2000, "step": 1},"on": [ {"events": {"type": "wheel", "consume": true},"update": "round(clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 50, 2000))" } ] }, {"name": "signal_translate_xy","value": [0, 0],"update": "[signal_translate_last_xy[0] + signal_mouse_delta_xy[0], signal_translate_last_xy[1] + signal_mouse_delta_xy[1]]" }, {"name": "signal_translate_last_xy","value": [0, 0],"on": [ {"events": [{"type": "mousedown"}], "update": "signal_translate_xy"} ] }, {"name": "signal_mouse_start_xy","value": [0, 0],"on": [{"events": [{"type": "mousedown"}], "update": "xy()"}] }, {"name": "signal_mouse_drag_xy","value": [0, 0],"on": [ {"events": [ {"type": "mousemove","between": [{"type": "mousedown"}, {"type": "mouseup"}] } ],"update": "xy()" } ] }, {"name": "signal_mouse_delta_xy","value": [0, 0],"update": "[signal_mouse_drag_xy[0] - signal_mouse_start_xy[0], signal_mouse_drag_xy[1] - signal_mouse_start_xy[1]]" }, {"name": "center0","value": 10,"bind": {"input": "range", "min": -180, "max": 180, "step": 1} }, {"name": "center1","value": 50,"bind": {"input": "range", "min": -90, "max": 90, "step": 1} }, {"name": "translate0", "update": "width / 2"}, {"name": "translate1", "update": "height / 2"}, {"name": "graticuleDash","value": 0,"bind": {"input": "radio", "options": [0, 3, 5, 10]} }, {"name": "borderWidth", "value": 1, "bind": {"input": "text"}}, {"name": "background", "value": "#ffffff", "bind": {"input": "color"}}, {"name": "invert", "value": false, "bind": {"input": "checkbox"}} ],"projections": [ {"name": "projection","type": "mercator","scale": {"signal": "scale"},"center": [{"signal": "center0"}, {"signal": "center1"}],"translate": {"signal": "signal_translate_xy"} } ],"data": [ {"name": "world","url": "data/world-110m.json","format": {"type": "topojson", "feature": "countries"} }, {"name": "graticule", "transform": [{"type": "graticule"}]} ],"marks": [ {"type": "shape","from": {"data": "world"},"encode": {"update": {"strokeWidth": {"signal": "+borderWidth"},"stroke": {"signal": "invert ? '#777' : '#bbb'"},"fill": {"signal": "invert ? '#fff' : 'grey'"},"zindex": {"value": 0} },"hover": {"strokeWidth": {"signal": "+borderWidth + 1"},"stroke": {"value": "firebrick"},"zindex": {"value": 1} } },"transform": [{"type": "geoshape", "projection": "projection"}] } ]}