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) + "km" ]; $.ajax({ url: "http://search.twitter.com/search.json", data: { rpp: 100, q: $("#twit input").val(), geocode: geocode.join(",") }, dataType: "jsonp", success: function (tweets) { if (tweets.results) { $.each(tweets.results, function () { if (this.geo) { this.geo.coordinates = [ this.geo.coordinates[1], this.geo.coordinates[0] ]; if (map.geomap("find", this.geo, .01).length == 0) { var feature = { type: "Feature", geometry: this.geo, properties: { tweet: "<b>" + this.from_user + "</b>: " + this.text } }; map.geomap("append", feature); } } }); } } }); }
<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>