JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<script src="http://jquerygeo.com/test/jquery.geo-test.min.js"></script>
<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>

CSS

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

JavaScript

var timeoutMove = null;

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) {
        clearTimeout(timeoutMove);
        timeoutMove = setTimeout(function() {
            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");
        }, 250);
    }
});