auremoser/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## favicon.png

      
    Raw
  

              favicon.png
            
          
## index.html
<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>

## popcorn.png

      
    Raw
  

              popcorn.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<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 FUNCTION 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 FUNCTION 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>