JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mapael/2.2.0/js/jquery.mapael.js"></script>

<button onclick="setValues(10)">
Set values to 10
</button>
<button onclick="setValues(110)">
Set values to 110
</button>
<button onclick="setValues(210)">
Set values to 210
</button>
<div id="map" class="mapcontainer">
<div class="map">Alt ctx.</div>
</div>

CSS

.map {
    position: relative;
    width: 100%;  /* The width is the width of the web page */
}

.mapael .mapTooltip {
    border: solid 1px black;
    position: absolute;
    background-color: #fff;
    z-index: 1000;
    display: none;
    color: #000;
}

.mapael .zoomButton {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #000;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 0;
    font-weight: bold;
    left: 10px;
}

/* Reset Zoom button first */
.mapael .zoomReset {
    top: 10px;
}

/* Then Zoom In button */
.mapael .zoomIn {
    top: 30px;
}

/* Then Zoom Out button */
.mapael .zoomOut {
    top: 50px;
}

JavaScript

/*!
*
* Jquery Mapael - Dynamic maps jQuery plugin (based on raphael.js)
* Requires jQuery and Mapael
*
* Map of the world by country focused on the European Union area
* Equirectangular projection

* @author CCM Benchmark Group
* @source http://commons.wikimedia.org/wiki/File:BlankMap-World6-Equirectangular.svg
* 
* The following is just the map of The Czech Republic cut out from the map of the EU.
*/
(function (factory) {
    if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(require('jquery'), require('jquery-mapael'));
    } else if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery', 'mapael'], factory);
    } else {
        // Browser globals
        factory(jQuery, jQuery.mapael);
    }
}(function ($, Mapael) {

    "use strict";

    $.extend(true, Mapael,
        {
            maps :  {
                czechia : {
                    width : 73,
                    height : 35,
                    getCoords : function (lat, lon) {
                                var xfactor = 10.2159;
                                var xoffset = -122.4616;
                                var yfactor = -13.5189;
                                var yoffset = 690.7300;
                                var x = (lon * xfactor) + xoffset;
                                var y = (lat * yfactor) + yoffset;

                        return {x : x, y : y};
                    },
                    elems : {
                        "CZ" : "m 0.95,10.76 c 1.15,0 2.04,1.01 2.3,2.12 0.44,-4.22 5.25,-2.22 7.26,-3.9 3.74,-3.1 9.42,-4.83 13.82,-6.59 -0.36,-0.37 -0.72,-0.72 -1.1,-1.07 0.99,-0.24 2.13,-0.61 2.88,0.3 0.64,0.82 1.21,2.33 2.45,1.89 0.84,-0.3 2.13,0.12 2.09,-1.17 -0.04,-1.26 0.99,-0.16 1.77,0.05 1.29,0.35 1.38,-0.28 1.71,1.03 0.36,1.42 0.58,0.38 1.41,0.73 1.29,0.56 5.65,0.61 5.64,2.71 0.6,-0.65 2.1,-1.03 2.89,-0.7 2.13,0.91 -0.16,2.38 -1.07,3.18 1.9,0.72 2.53,1.8 3.58,3.43...