JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<script src="http://host.appgeo.com/libs/geo/alpha2/jquery-geo-alpha2.min.js"></script>
<div id="map"></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; }

#content {
    background: #fefefe;
    border: 2px solid #444;
    border-radius: 8px;
    padding: 4px;
    position: relative;
    max-width: 80%;
}

JavaScript

var map,
    searchTerm = "";

function initMap(center) {
    map = $("#map").geomap({
        center: center || [-71.0597732, 42.3584308],
        zoom: 14,
        bboxchange: function() {
            map.geomap("empty");
        }
    });
    
    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");
    searchTerm = $("#twit input").val();
    search();
    return false;
});

function search() {
    if (!searchTerm) {
        return;
    }

    var center = map.geomap("option", "center"),
        geocode = [
            center[1],
            center[0],
            Math.min(2500, map.geomap("getPixelSize") * $(document).width()/2 / 1000 ) + "km"
        ];
    
    $.ajax({
        url: "http://search.twitter.com/search.json",
        data: {
            rpp: 100,
            q: searchTerm,
            geocode: geocode.join(",")
        },
       ...