Skip to content

Instantly share code, notes, and snippets.

@auremoser
Last active August 29, 2015 14:18
Show Gist options
  • Save auremoser/2f777fb295c8d5b02239 to your computer and use it in GitHub Desktop.
Save auremoser/2f777fb295c8d5b02239 to your computer and use it in GitHub Desktop.
Popcorn Placemap

This is a clone of Paul Ramsey's Placenames Map to give context to searches; a prototype of a popcorn.js for maps. It uses a few cobbled-together code samples. Function additions to the original script are commented in all-caps.

Objective

Make a map that lets you search for placenames, and then automates some research about what that name references via Wikipedia. For example, a search for "Cesar Chavez" will create a heatmap for places named after Cesar Chavez, as well as pull in some wikipedia details about that search string.

When disambiguation is necessary, it pulls the most relevant name and offers a link alternative to rectify errors. It also pulls in images and links! More info to be had in pramsey's "About" section for his map.

<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment