JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<div id="container">
<div id="m">
    <div id="smallmap">
        <img src="http://vpcagsbeta.appgeo.com/ArcGIS/rest/services/NBIG/MapServer/export?bbox=10411.151019688987,99648.1209008777,793126.3206596856,882363.2905408745&size=120,120&f=image" />
    </div>    
    <div id="display">
        <div id="pixel"></div>
        <div id="point"></div>        
    </div>
</div>
</div>

CSS

#container { border-top: solid 10px black; }
#m { width: 640px; height: 640px; }
#smallmap { display: inline-block; outline: solid 2px #222; width: 120px; height: 120px; }

JavaScript

var map = $("#m").geomap({
    bboxMax: [-1201509, -718242, 1919437, 2253046],
    bbox: [10411.151019688987, 99648.1209008777, 793126.3206596856, 882363.2905408745],
    mode: "drawPoint",
    services: [
        {
        type: "shingled",
        src: "http://vpcagsbeta.appgeo.com/ArcGIS/rest/services/NBIG/MapServer/export?bbox={{:bbox}}&size={{:width}},{{:height}}&f=image"}
    ],
    move: function(e, geo) {
        $("#pixel").text(e.offsetX + "," + e.offsetY);
        $("#point").text(geo.coordinates);
    },
    shape: function(e, geo) {
        var buffer = map.geomap("option", "pixelSize") * 10;
        var bbox = $.geo.expandBy($.geo.bbox(geo), buffer, buffer);
        $("#smallmap img").attr("src", "http://vpcagsbeta.appgeo.com/ArcGIS/rest/services/NBIG/MapServer/export?bbox=" + bbox + "&size=120,120&f=image");
    }
});