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>