JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/blitzer/jquery-ui.css">
<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
  <div>
    <div id="map">
    </div>
    <div class="info mobile-shrink">
      <h1 class="not-mobile">shingled</h1>

      <p class="not-mobile">The everything demo, shingled edition!</p>

      <section class="not-mobile">
        <h2>info</h2> <button id="toggle-info" type="button" title="click to view some map info">show / hide</button>

        <table id="mapInfo" style="display: none;">
          <tr><th>bbox</th><td data-option="bbox"></td></tr>
          <tr><th>center</th><td data-option="center"></td></tr>
          <tr><th>zoom</th><td data-option="zoom"></td></tr>
        </table>
      </section>

      <form>

        <section>
          <h2>basics</h2>

          <input type="checkbox" id="togglePannable" name="togglePannable" value="togglePannable" checked="checked" /><label for="togglePannable">pannable</label>

          <div class="scrollOption-container not-mobile">
            <h3>scroll</h3>
            <div class="scrollOptions">
              <input type="radio" id="scrollOptionDefault" name="scrollOption" value="default" checked="checked" /><label for="scrollOptionDefault">default / scroll</label>
              <input type="radio" id="scrollOptionOff" name="scrollOption" value="off" /><label for="scrollOptionOff">off</label>
            </div>
          </div>
        </section>

        <section>
          <h2>mode</h2> <button id="change-mode" type="button" title="click to change the mode">pan</button>

          <div id="modeOptions" style="display: none;">
            <div class="modes">
              <input type="radio" id="static" name="mode" value="static" /><label for="static">static</label>
              <input type="radio" id="pan" name="mode" value="pan" checked="checked" /><label for="pan">pan</label>
              <input type="radio"...

CSS

.mobile-shrink
{
  font-size: .6em;
}

.not-mobile
{
  display: none;
}

@media only screen and (min-width: 800px) 
{  
  .info
  {
    max-width: 45% !important;
    position: absolute !important;
    right: 16px;
    top: 16px;
  }

  .mobile-shrink
  {
    font-size: 1em;
  }
  
  .not-mobile
  {
    display: block;
  }
}

html
{
  font:13px/1.231 Calibri,Arial,sans-serif; *font-size:small;
}

.info 
{
  background: #fff;
  border-radius: 8px;
  box-shadow: -4px 4px #444;
  opacity: .8;
  padding: 8px;
  width: 95%;
}

fieldset { border: none; }

legend {
  font-size: 14px;
  font-weight: bold;
}

    h2 { display: inline-block; }
    @media only screen and (min-width: 800px) 
    {
      h2 { display: inline-block; min-width: 8em; }
    }

    h3 { display: inline-block; margin-left: 2em; }

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

    /* a label CSS example: all text for labels on the hydro service will be blue! */
    #massgis_hydrography
    {
      color: blue;
    }

    .modes { margin: .5em 0; }

    #drawStyle label span { display: inline-block; font-weight: bold; text-align: right; width: 7em; }
    #drawStyle input { width: 6em; }

    .scrollOption-container, .scrollOptions, .clickTargets, .toggleTargets { display: inline-block; }

JavaScript

// Firefox likes to cache form values during refresh
  $( "form" )[ 0 ].reset( );

  $( "form" ).submit( function( ) {
    // also, we don't want the form to actually submit
    return false;
  } );

  // set proj to null because we don't have the code for this projection 
  // and are working entirely in map units

  $.geo.proj = null;

  // define two shingled services
  var services = [
    // define a basemap service
    {
      id: "massgis_basemap",
      type: "shingled",
      src: "http://giswebservices.massgis.state.ma.us/geoserver/wms?LAYERS=massgis_basemap&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX={{=bbox}}&WIDTH={{=width}}&HEIGHT={{=height}}",
      attr: "&copy; 2011 Commonwealth of Massachusetts"
    },

    // define a second service as a layer on top of the basemap
    // we use this service as the target when "target" is set to service in this demo
    {
      id: "massgis_hydrography",
      type: "shingled",
      src: "http://giswebservices.massgis.state.ma.us/geoserver/wms?LAYERS=massgis%3AGISDATA.MAJPOND_POLY,massgis%3AGISDATA.MAJSTRM_ARC&TRANSPARENT=true&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&SRS=EPSG%3A26986&BBOX={{=bbox}}&WIDTH={{=width}}&HEIGHT={{=height}}"
    }
  ];


  // create a map without a tilingScheme & with the two shingled services
  var map = $( "#map" ).geomap( {
    // add a cursor for our custom mode: remove
    cursors: { remove: "crosshair" },

    // use the services array defined above
    services: services,

    // you must set bboxMax for shingled services for the zoom property to mean anything
    bboxMax: [ 31789.1658, 790194.4183, 337250.8970, 961865.1338 ],

    // shingled services do not have a tilingScheme
    tilingScheme: null,

    // center & zoom values that fit MassGIS's projection
    center: [ 235670.21967, 900771.290247 ],
    zoom: 13,

    bboxchange: function( e, geo ) {
      // when the bbox changes, update the info section with new...