JSFiddle - React, Tailwind, and code Playground

by upgradellc

HTML

<script src="http://host.appgeo.com/libs/geo/test/jquery-geo-test.min.js"></script>
<div id="map">
    <div id="popup"></div>
</div>
<div id="content">
    <form id="loc">
        <label>Zoom to
            <input type="text" autofocus />
        </label>
        <button type="submit">Go</button>
    </form>
    <form id="twit">
        <label>Search Twitter for
            <input type="text" />
        </label>
        <button type="submit">Go</button>
    </form>
</div>

CSS

#map { position: absolute; 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;
    max-width: 80%;
}

JavaScript

var map;

function initMap(center) {
  map = $("#map").geomap({
    center: center || [-71.0597732, 42.3584308],
    zoom: 14,
    bboxchange: function () {
        if ($("#twit input").val()) {
            search();
        }
    },
    move: function (e, geo) {
      $("#popup").hide().html("");
      if ($("#twit input").val()) {
        var features = map.geomap("find", geo, 3),
            popupHtml = "",
            i = 0;

        for (; i < features.length; i++) {
          popupHtml += "<p>" + features[i].properties.tweet + "</p>";
        }
        if (popupHtml) {
          $("#popup").append(popupHtml).css({
            left: e.pageX,
            top: e.pageY
          }).show();
        }
      }
    }
  });

  map.geomap("shapeStyle", {
    strokeOpacity: .1,
    fillOpacity: .4,
    width: "16px",
    height: "16px",
    borderRadius: "8px",
    color: "#44e"
  });
}

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function (p) {
    initMap([p.coords.longitude, p.coords.latitude]);
  }, function (error) {
    initMap();
  });
} else {
  initMap();
}

$("#loc").submit(function () {
  $.ajax({
    url: "http://open.mapquestapi.com/nominatim/v1/search",
    data: {
      format: "json",
      q: $("#loc input").val()
    },
    dataType: "jsonp",
    jsonp: "json_callback",
    success: function (results) {
      if (results && results.length > 0) {
        var nbbox = results[0].boundingbox;
        map.geomap("option", "bbox", [
          nbbox[2], /* min longitude*/
          nbbox[0], /* min latitude */
          nbbox[3], /* max longitude */
          nbbox[1]  /* max latitude */
        ]);
      }
    }
  });
  return false;
});

$("#twit").submit(function () {
  map.geomap("empty");
  search();
  return false;
});

function search() {
  var center = map.geomap("option", "center"),
      geocode = [
        center[1],
        center[0],
        Math.min(2500, map.geomap("getPixelSize") * $(document).width() / 2 / 1000)...