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.
<!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://world-map.org/cartography/scripts/d3.js"></script>
<script src="https://world-map.org/cartography/scripts/d3-topojson.js"></script>
<script src="https://world-map.org/cartography/scripts/datamaps-zoom.min.js"></script>
<script src="https://world-map.org/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>
