|
<html> |
|
<header> |
|
<meta charset="utf-8"> |
|
<link rel="icon" type="image/png" href="favicon.png" sizes="32x32"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>Popcorn Placemap</title> |
|
|
|
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/ui-lightness/jquery-ui.css" /> |
|
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.12/themes/css/cartodb.css" /> |
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> |
|
|
|
<style> |
|
#map { |
|
float: right; |
|
height: 100%; |
|
width: 75%; |
|
} |
|
.title { |
|
background-color: #eee; |
|
color: #3182BD; |
|
float: left; |
|
padding: 6px; |
|
font-size: 18px; |
|
font-weight: 800; |
|
} |
|
#wikiOutput { |
|
background-color: #eee; |
|
color: #561; |
|
float: left; |
|
height: 100%; |
|
overflow-y: scroll; |
|
line-height: 1; |
|
padding: 6px; |
|
width: 25%; |
|
} |
|
.input-group { |
|
float: right; |
|
width: 75%; |
|
} |
|
</style> |
|
|
|
<script> |
|
var cdb_map; |
|
var cdb_vis; |
|
var cdb_default = "xxxxxxx"; |
|
|
|
function getSQL(geoname) { |
|
|
|
if ( geoname == "" ) { |
|
geoname = cdb_default; |
|
} |
|
var geoname_clean = geoname.replace(/[;:\"!@#$%^&\*\(\)\[\]\{\}\?\+\/\\=]/g, ""); |
|
$("#geoname").val(geoname_clean); |
|
var sql = "SELECT * FROM geonames WHERE to_tsvector('english', name) @@ plainto_tsquery('english', '" + geoname_clean.replace(/\'/g, "''") + "') ORDER BY Random() LIMIT 20000"; |
|
return sql; |
|
} |
|
|
|
function setSQL(layer, sql) { |
|
/* Torque layers have a setSQL() method at the layer level */ |
|
if ( layer.model.get('type') == "torque" ) { |
|
layer.setSQL(sql); |
|
} |
|
/* Other layers have it at the sublayer level */ |
|
else { |
|
var sublayer = layer.getSubLayer(0); |
|
sublayer.setSQL(sql); |
|
} |
|
layer.invalidate(); |
|
} |
|
// ADD IN SOME WIKIPEDIA FUNCTION REFS AFTER GEONAME SEARCH ISSUE |
|
function handleSubmit(geoname){ |
|
sendQuery(geoname); |
|
callWikipediaAPI(geoname); |
|
} |
|
// WIKI *FUN*CTION 1 |
|
function callWikipediaAPI(wikipediaPage) { |
|
// http://www.mediawiki.org/wiki/API:Parsing_wikitext#parse |
|
$.getJSON('http://en.wikipedia.org/w/api.php?action=parse&format=json&callback=?', {page:wikipediaPage, prop:'text|images', uselang:'en'}, wikipediaHTMLResult); |
|
} |
|
// WIKI *FUN*CTION 2 |
|
function wikipediaHTMLResult(data) { |
|
var readData = $('<div>' + data.parse.text['*'] + '</div>'); |
|
console.warn('wiki result', data) |
|
// handle redirects |
|
var redirect = readData.find('li:contains("REDIRECT") a').text(); |
|
if(redirect != '') { |
|
callWikipediaAPI(redirect); |
|
return; |
|
} |
|
$('#wikiOutput').html(readData); |
|
} |
|
|
|
function sendQuery(geoname) { |
|
var layers = cdb_vis.getLayers(); |
|
var layer = layers[1]; |
|
setSQL(layer, getSQL(geoname)); |
|
} |
|
|
|
/* Utility function to read GET parameter values */ |
|
function getQueryVariable(variable) { |
|
var query = window.location.search.substring(1); |
|
var vars = query.split("&"); |
|
for (var i=0;i<vars.length;i++) { |
|
var pair = vars[i].split("="); |
|
if (pair[0] == variable) { |
|
return pair[1]; |
|
} |
|
} |
|
return false; |
|
} |
|
|
|
window.onload = function() { |
|
|
|
var q = getQueryVariable("q"); |
|
|
|
cartodb.createVis( |
|
'map', |
|
'http://pramsey.cartodb.com/api/v2/viz/bbd7efd6-ce64-11e4-b5d6-0e0c41326911/viz.json', |
|
{ |
|
shareable: true |
|
}, |
|
function(vis, layers) { |
|
cdb_vis = vis; |
|
cdb_map = vis.getNativeMap(); |
|
if ( q ) { |
|
window.setTimeout(function() { setSQL(layers[1], getSQL(q)); }, 500); |
|
} |
|
}); |
|
} |
|
</script> |
|
</header> |
|
<body> |
|
<!-- WIKI DIV - NEED TO STYLE --> |
|
<div id="wikiOutput" class="wikipediaContainer"> |
|
<div class="title">GeoPop PlaceMap</div> |
|
<hr> |
|
</div> <!-- /.wikipediaContainer --> |
|
<div class="container-full"> |
|
<div class="input-group"> |
|
<span class="input-group-addon">A word you might find in a placename</span> |
|
<input id="geoname" type="text" class="form-control" aria-label="Place name" placeholder="Enter a word" onchange="javascript:handleSubmit(value)"/> |
|
</div> |
|
<div id="map" /> |
|
</div><!-- /.container --> |
|
|
|
|
|
|
|
<!-- Placed at the end of the document so the pages load faster --> |
|
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.12/cartodb.js"></script> |
|
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> |
|
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> |
|
</body> |
|
<!-- hat tip to paul ramsey for writing the original Placenames Heatmap: http://bl.ocks.org/pramsey/922f6170dec2a3cd5da6 --> |
|
</html> |
