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">tiled</h1>

      <p class="not-mobile">The everything demo, tiled 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" id="zoom"...

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 speedtest service will be purple and bold! */
    #broadband-speedtest
    {
      color: purple;
      font-weight: bold;
    }

    .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;
  } );

  // define two tiled services
  var services = [
    // a free basemap tile set from MapQuest
    {
      id: "mapquest-open",
      type: "tiled",
      src: function( view ) {
        return "http://otile" + ((view.index % 4) + 1) + ".mqcdn.com/tiles/1.0.0/osm/" + view.zoom + "/" + view.tile.column + "/" + view.tile.row + ".png";
      },
      attr: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">'
    },

    // 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: "broadband-speedtest",
      type: "tiled",
      src: "http://www.broadbandmap.gov/StamenTiles/speedtest/speedtest/download/{{=zoom}}/{{=tile.column}}/{{=tile.row}}.png",
      attr: "Speed Test data maintained by the NTIA, in collaboration with the FCC"
    }
  ];

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

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

    // these tiled services are in jQuery Geo's default tilingScheme, web mercator
    // we don't need to change it but will write it here in comments, for this demo
    /*
    tilingScheme: {
      tileWidth: 256,
      tileHeight: 256,
      levels: 18,
      basePixelSize: 156543.03392799936,
      pixelSizes: null,
      origin: [ -20037508.342787, 20037508.342787 ]
    },
    */

    // center & zoom values that default to showing the contenental United States of America
    center: [ -89.34, 38.84 ],
    zoom: 5,

    bboxchange: function( e, geo ) {
      // when the bbox...