Map Zoom

Description:

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: https://jquery.com.

<script src="https://code.jquery.com/jquery-3.3.1.js"></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>

<html>

<head>

<title>Zoomable World Map</title>

</head>

<body>

<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="https://sabalico.dev/jquery.js"></script>

<script src="https://sabalico.dev/cartography/scripts/d3.js"></script>

<script src="https://sabalico.dev/cartography/scripts/d3-topojson.js"></script>

<script src="https://sabalico.dev/cartography/scripts/datamaps-zoom.min.js"></script>

<script src="https://sabalico.dev/cartography/datamaps/world/world.min.js"></script>

<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">'+geo.properties.name+'</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();

</script>

</body>

</html>

Code Copied!