JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquerygeo.com/jquery.geo-1.0a4.min.js"></script>
    <div id="map">
      <div id="popup">
      </div>
    </div>
    <div id="content">
      <form id="loc">
        <label>
          Zoom to
          <input type="text" name="l" autofocus />
        </label>
        <button type="submit">
          Go</button>
      </form>
      <form id="twit">
        <label>
          Search Twitter for
          <input type="text" name="q" />
        </label>
        <button type="submit">
          Go</button>
      </form>
    </div>
    <div class="info">
      <h1>Twitter Heat Map</h1>
    </div>

CSS

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

    #map
    {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      top: 0;
    }
    #popup
    {
      background: #fff;
      border: solid 1px #444;
      border-radius: 8px;
      display: none;
      max-height: 50%;
      padding: 4px;
      position: absolute;
      opacity: .6;
      overflow: hidden;
      width: 30%;
    }
    #popup p
    {
      border-top: 2px solid #444;
    }
    #popup p:first-child
    {
      border-top: none;
    }
    #content
    {
      background: #fefefe;
      border: 2px solid #444;
      border-radius: 8px;
      padding: 4px;
      position: relative;
      width: 320px;
    }

JavaScript

var map,
          searchTerm = "", //< last search term
          currentXhr = null; //< an ajax request reference if we need to cancel

      function initMap(center, zoom) {
        // create a map using an optional center and zoom
        map = $("#map").geomap({
          center: center || [-71.0597732, 42.3584308],
          zoom: zoom || 10,
          mode: "showTweet",
          cursors: { showTweet: "default" },
          move: function (e, geo) {
            // when the user moves, search for appended tweets
            // and show a popup

            // clear the popup
            $("#popup").hide().html("");

            if (searchTerm) {
              // spatial query, geo has the cursor location as a map point
              // this will find appended tweets within 3 pixels
              var features = map.geomap("find", geo, 3),
                  popupHtml = "",
                  i = 0;

              // for each tweet found, add some html to the popup
              for (; i < features.length; i++) {
                popupHtml += "<p>" + features[i].properties.tweet + "</p>";
              }

              if (popupHtml) {
                // if any tweets found, show the popup
                $("#popup").append(popupHtml).css({
                  left: e.pageX,
                  top: e.pageY
                }).show();
              }
            }
          }
        });

        // set the shape style to a largish solid but translucent circle
        // to give the tweets a heat map effect
        map.geomap("option", "shapeStyle", {
          strokeOpacity: 0,
          fillOpacity: .3,
          width: "16px",
          height: "16px",
          borderRadius: "8px",
          color: "#44e"
        });
      }

      $("#loc").submit(function () {
        // when the user clicks the location search button,
        // send a request to nominatim for an OpenStreatMap data search
        $.ajax({
          url:...