JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.2.5/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js"></script>

JavaScript

$(document).ready(onReady);

var islandSprites = [];

var scale = 1;

function onReady() {

    renderer = new PIXI.autoDetectRenderer(1920, 1080, {
        transparent: true
    });

    stage = new PIXI.Stage(0xFFFFFF);

    $('canvas').attr('id', 'canvas');

    $('body').on('mousewheel', 'canvas', function (event) {
        event.preventDefault();
        var evt = event.originalEvent;
        var currentMouseX = evt.pageX - $(this).offset().left;
        var currentMouseY = evt.pageY - $(this).offset().top;

        scaleFactor = 1.1;

        var zoom = (scaleFactor - (evt.wheelDelta < 0 ? 0.2 : 0));
        var newScale = scale * zoom;
        var newScale2 = (scale * zoom) * 2;
        var newScale3 = (scale * zoom) * 4;

        var origin = map1.position;
        origin.x = currentMouseX - (currentMouseX - origin.x) * zoom;
        origin.y = currentMouseY - (currentMouseY - origin.y) * zoom;
        map1.position = new PIXI.Point(origin.x, origin.y);

        var origin2 = map2.position;
        origin2.x = currentMouseX - (currentMouseX - origin2.x) * zoom;
        origin2.y = currentMouseY - (currentMouseY - origin2.y) * zoom;
        map2.position = new PIXI.Point(origin2.x, origin2.y);

        var origin3 = map3.position;
        origin3.x = currentMouseX - (currentMouseX - origin3.x) * zoom;
        origin3.y = currentMouseY - (currentMouseY - origin3.y) * zoom;
        map3.position = new PIXI.Point(origin3.x, origin3.y);

        map1.scale.x = newScale;
        map1.scale.y = newScale;
        map2.scale.x = newScale2;
        map2.scale.y = newScale2;
        map3.scale.x = newScale3;
        map3.scale.y = newScale3;

        if (newScale > .5) {
            map1.visible = true;
            map2.visible = false;
            map3.visible = false;
        }
        if (newScale <= .5 && newScale > .25) {
            map1.visible = false;
            map2.visible = true;
            map3.visible = false;
        }
        if (newScale <= .25)...