Zoom SVG World Map with Ariutta SvgPanZoom

How To Use

1) Ensure the target SVG has a top-level 'g' element with the class 'viewport' to enable zooming for the entire SVG:
<g class="viewport">...</g>
If the target SVG does not have this element, the library will create it.
2) Reference the svg-pan-zoom.js file from your HTML document. Then call the init method:
var panZoomWorld = svgPanZoom('#WorldSVG');
or
var svgElement = document.querySelector('#WorldSVG')
var panZoomWorld = svgPanZoom(svgElement)

First argument to function should be a CSS selector of SVG element or a DOM Element.

If you want to override the defaults, you can optionally specify one or more arguments:

svgPanZoom.init('#WorldSVG', {
panEnabled: true
, dragEnabled: false
, controlIconsEnabled: false
, zoomEnabled: true
, zoomScaleSensitivity: 0.2
, minZoom: 0.5
, maxZoom: 10
, onZoom: function(){}
, onPan: function(){}
});


If any arguments are specified, they must have the following value types:
•'panEnabled' must be true or false. Default is true.
•'dragEnabled' must be true or false. Default is false.
•'controlIconsEnabled' must be true or false. Default is false.
•'zoomEnabled' must be true or false. Default is true.
•'zoomScaleSensitivity' must be a scalar. Default is 0.2.
•'minZoom' must be a scalar. Default is 0.5.
•'maxZoom' must be a scalar. Default is 10.
•'onZoom' must be a callback function to be called when zoom changes.
•'onPan' must be a callback function to be called when pan changes.

Public API
When you call svgPanZoom method it returns an object with following methods:
•enablePan
•disablePan
•isPanEnabled
•pan
•panBy
•getPan
•setOnPan
•enableDrag
•disableDrag
•isDragEnabled
•enableZoom
•disableZoom
•isZoomEnabled
•enableControlIcons
•disableControlIcons
•isControlIconsEnabled
•setZoomScaleSensitivity
•setMinZoom
•setMaxZoom
•setOnZoom
•zoom
•zoomBy
•zoomAtPoint
•zoomAtPointBy
•zoomIn
•zoomOut
•resetZoom
•getZoom

To programmatically pan, call the pan method with vector as first argument:

Get instance
var panZoomWorld = svgPanZoom('#WorldSVG');

Pan to rendered point x = 50, y = 50
panZoomWorld.pan({x: 50, y: 50})

Pan by x = 50, y = 50 of rendered pixels
panZoomWorld.panBy({x: 50, y: 50})

To programmatically zoom, you can use the zoom method to specify your desired scale value:

Get instance
var panZoomWorld = svgPanZoom('#WorldSVG');

Set zoom level to 2
panZoomWorld.zoom(2)

Zoom by 130%
panZoomWorld.zoomBy(1.3)

Set zoom level to 2 at point
panZoomWorld.zoomAtPoint(2, {x: 50, y: 50})

Zoom by 130% at point
panZoomWorld.zoomAtPointBy(1.3, {x: 50, y: 50})

Or you can use the zoomIn or zoomOut methods:
Get instance
var panZoomWorld = svgPanZoom('#WorldSVG');

panZoomWorld.zoomIn()
panZoomWorld.zoomOut()
panZoomWorld.resetZoom()

If you want faster or slower zooming, you can override the default zoom increment with the setZoomScaleSensitivity method.
To programmatically enable/disable pan, zoom or drag:

Get instance
var panZoomWorld = svgPanZoom('#WorldSVG');

panZoomWorld.enablePan();
panZoomWorld.disablePan();

panZoomWorld.enableZoom();
panZoomWorld.disableZoom();

panZoomWorld.enableDrag();
panZoomWorld.disableDrag();
Javascript: