Map Zoom


Zoom in on maps using this interactive feature. The zoom feature requires jQuery to be loaded on the web page in order to run properly.

You can download jQuery at:

<script src=""></script>

This map can use either the low resolution or high resolution topoJSON files for enhanced country definition.

The current example uses the high resolution geo file.

Map Code

<!DOCTYPE html>



<title>Zoomable World Map</title>



<h1>Zoomable World Map</h1>

<div id="map" style="display: block; width: 100%; max-width: 700px; height: 350px; overflow: hidden;"></div>

<button class="zoom-button" data-zoom="reset">0</button>

<button class="zoom-button" data-zoom="out">-</button>

<button class="zoom-button" data-zoom="in">+</button>

<div id="zoom-info"></div>

<script src=""></script>

<script src=""></script>

<script src=""></script>

<script src=""></script>

<script src=""></script>


function Datamap() {

this.$container = $("#map");

this.instance = new Datamaps({

scope: "world",

element: this.$container.get(0),

projection: "equirectangular",

geographyConfig: {

hideAntarctica: false,

borderWidth: 1,

borderOpacity: 1,

borderColor: '#FDFDFD',

popupTemplate: function(geo, data) {

return ['<div class="hoverinfo">''</div>'].join('');


popupOnHover: true,

highlightOnHover: true,

highlightFillColor: '#FC8D59',

highlightBorderColor: 'rgba(250, 15, 160, 0.2)',

highlightBorderWidth: 2,

highlightBorderOpacity: 1


fills: {

bubbleMax: "#8F2C4B",

bubbleMin: "#8F5974",

defaultFill: "#859EDE",

MIN: "#d7eebd",

LOW: "#8fd3bd",

MEDIUM: "#45aec0",

HIGH: "#317bb4",

MAX: "#084182"


data: {},

done: this._handleMapReady.bind(this)



Datamap.prototype._handleMapReady = function(a) {

this.zoom = new Zoom({

$container: this.$container,

datamap: a



new Datamap();




Code Copied!