Search code examples
angularjsd3.jssvgionic5

Cannot disable d3 topojson base map zooming on Ionic V5 App

I am trying to make the zooming functionality of a d3 topology map smoother on my app. The default zooming behavior are kind of lag a lot and mostly it conflicts with ionic touch events. I am trying to disable all default zooming features completely and will try to do it with zoom in/out buttons.. But it seems I cannot disable zoom.

Here is my markup

enter image description here

And here is my map code ...

enter image description here

Though I cannot pinch zoom on the map, but it seems I can zoom the svg by pinching the white area outside the map. I want to disable the pinch zoom completely so user cannot zoom it using touch.

Solution

  • You could put a div above the map, and give this div a transparent background and give it height and width as the map size, so when user touch the div it will give no effect since it is the div and not the map, and then you can do your zooming using 2 buttons (zoom in/ zoom out).