JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquerygeo.com/jquery.geo-1.0b1.min.js"></script>
    <div id="map">
    </div>

CSS

#map
    {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

JavaScript

// set $.geo.proj to null because images don't have a projection
      $.geo.proj = null;

      // create a map
      var map = $("#map").geomap({
        bbox: [ 0, 0, 768 * 64, 256 * 64 ],
        zoom: 1,
        zoomMin: 10,
        axisLayout: "image",
        services: [
          {
            type: "tiled",
            src: function (view) {
              if ( view.tile.column >= 0 && view.tile.row >= 0 ) {
                var quadKey = tileToQuadkey(view.tile.column, view.tile.row, view.zoom),
                    r = quadKey.substr( 0, 2 );

                console.log(quadKey);
                if ( quadKey.length > 5 ) {
                  return "http://192.168.1.253:8080/static/map/floors/75/2/wuli1.jpg";
                } else {
                  return "http://192.168.1.253:8080/static/map/floors/75/1/wuli1.jpg";
                }
              } else {
                return "";
              }
            },
            attr: '<span style="color: white; font-weight: bold;">&copy; David Bergman, Sports Illustrated</span>'
          }
        ],
        tilingScheme: {
          tileWidth: 256,
          tileHeight: 256,
          levels: 9,
          basePixelSize: 256,
          origin: [ 0, 0 ]
        },
      });

      function tileToQuadkey(column, row, zoom) {
        var quadKey = "",
            digit,
            mask;

        for ( var i = zoom; i > 0; i-- ) {
          digit = 0;
          mask = 1 << (i - 1);
          if ((column & mask) !== 0) {
            digit++;
          }
          if ((row & mask) !== 0) {
            digit += 2;
          }
          quadKey += digit;
        }
        return quadKey;
      }