I have a dynamic map showcasing various points of interest in the form of svg circles. Each circle is equipped with either a touchstart or mousedown event, while the transparent rectangle behind it is connected to d3.zoom(), making it possible to zoom in on the map! Let's examine the structure of the elements:
<div id="map">
<svg>
<g><rect></rect></g> <!-- transparent rect linked to d3.zoom() -->
<g>
<circle></circle> <!-- points of interest with touch events -->
<circle></circle>
...
</g>
</svg>
</div>
Despite this setup, when I attempt pinch zooming and accidentally place my finger on one of these circles, the zoom behavior becomes erratic on mobile devices unless I intervene by preventing zoom whenever a circle is touched like below:
selection.append("circle").on("touchstart mousedown",function(d,i){
d3.event.preventDefault(); // disabling zoom in this case
// ... code for highlighting the circle or other actions
}
This solution ensures that if a user mistakenly zooms while touching a circle or point of interest, the circle will be highlighted and the zoom action canceled. Resources such as this discussion and also issue 66 from the same thread have been beneficial in implementing this feature.
Therefore, zoom functionality is retained, provided users steer clear of the points of interest when zooming.
However, I wish to reverse this scenario so that zoom always takes precedence.
I attempted positioning the circles beneath the zoom rectangle, yet then the circles no longer register touch events. This dilemma arises because the map zooms flawlessly once you can't interact with the points of interest anymore.
Currently, I'm managing by reducing the size of the points of interest to increase the likelihood of users only zooming in on the map. Obviously, this is not the ideal situation.
Someday, I hope to grasp touch events intuitively, but for now, I seek guidance on how to prioritize zoom over touchstart on my map as I find myself struggling. Any tips on achieving this goal would be highly appreciated. Thank you for your attention.