pramsey/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Geonames Heatmap</title>

    <!-- Include Leaflet 1.2.0 Library -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>

    <!-- Fonts -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

    <!-- Include cartodb.js Library -->
    <!-- <script src="https://cdn.rawgit.com/CartoDB/cartodb.js/@4.0.0-alpha/carto.js"></script> -->
    <script src="https://rawgit.com/CartoDB/cartodb.js/dist/carto.js"></script>
    <style>
      * { margin:0; padding:0; }
      html { box-sizing:border-box; height:100%; }
      body { background:#f2f6f9; height:100%; font-family:"Open sans", Helvetica, Arial, sans-serif; }
      li {margin-left:2em;}
      p {margin-bottom: 0.5em;}
      #container { display:flex; width:100%; height:100%; }
      #map { flex:1; margin:10px; }
      #widgets { width:300px; margin:10px 10px 10px 0; }
      .widget { background:white; padding:10px; margin-bottom:10px; }
      .widget h1 { font-size:1.5em; padding-bottom:10px;}
      .widget-formula .result { font-size:2em; }
      input { font-size:1em; }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <div id="widgets">
        <div id="keywordWidget" class="widget">
          <h1>Map a Name</h1>
          <input id="keyword" class="js-keyword" onchange="setKeyword(this.value)" value="beach" />
        </div>
        <div id="statesWidget" class="widget widget-formula">
          <h1>Instructions</h1>
          <p>Type a word in the field above and hit return, the map will show all the place names that include that word. </p>
          <p>Try:</p><ul>
            <li>historical names (<a href="?query=lincoln">Lincoln</a>, <a href="?query=lee">Lee</a>)</li>
            <li>resource names (<a href="?query=gold">gold</a>, <a href="?query=coal">coal</a>)</li>
            <li>geographic names (<a href="?query=canyon">canyon</a>, <a href="?query=bayou">bayou</a>)</li>
            <li>ethnic names (<a href="?query=swedish">swedish</a>, <a href="?query=cherokee">cherokee</a>, <a href="?query=navajo">navajo</a>)</li>
            <li>species names (<a href="?query=cougar">cougar</a>, <a href="?query=cactus">cactus</a>).</li>
          </ul></p>
        </div>
      </div>
    </div>
    <script>
      var keyword_default = "beach";
      var geonamesDataset;
      var geonamesStyle;

      function parseQueryString(url) {
        var urlParams = {};
        url.replace(
          new RegExp("([^?=&]+)(=([^&]*))?", "g"),
          function($0, $1, $2, $3) {
            urlParams[$1] = $3;
          }
        );

        return urlParams;
      }

      function setKeyword(keyword) {
        if ( keyword == "" ) {
          keyword = keyword_default;
        }
        var sql_tmpl = "SELECT * FROM geonames ";
          sql_tmpl  += "WHERE to_tsvector('english', name) ";
          sql_tmpl  += "@@ plainto_tsquery('english', '{{keyword}}') ";
          sql_tmpl  += "ORDER BY Random() LIMIT 10000";

        var keyword_clean = keyword.replace(/[;:\"!@#$%^&\*\(\)\[\]\{\}\?\+\/\\=]/g, "");
        var keyword_clean_sql = keyword_clean.replace(/\'/g, "''")
        var keyword_sql = sql_tmpl.replace("{{keyword}}", keyword_clean_sql);
        console.log(keyword_sql);
        geonamesDataset.setQuery(keyword_sql);
        document.getElementById('keyword').value = keyword_clean;
      }

      var map = L.map('map').setView([40, -100], 5);
      // Adding Voyager Basemap
      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy;<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://carto.com/attribution">CARTO</a>'
      }).addTo(map);

      // Adding Voyager Labels
      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy;<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://carto.com/attribution">CARTO</a>',
        zIndex: 100
      }).addTo(map);

      var client = new carto.Client({
        // apiKey: 'e44d534647488bca94c2befbe0d5bc6bbdd66966',
        apiKey: 'e44d534647488bca94c2befbe0d5bc6bbdd66966',
        username: 'pramsey'
      });

      geonamesDataset = new carto.source.SQL('SELECT * FROM geonames LIMIT 1');
      geonamesStyle = new carto.style.CartoCSS(`
        #layer {
          marker-width: 14;
          marker-fill: #FF583E;
          marker-fill-opacity: 0.1;
          marker-line-color: #FFFFFF;
          marker-line-width: 0;
          marker-line-opacity: 0;
          marker-type: ellipse;
          marker-allow-overlap: true;
        }`);

      // Set up layers
      var geonames = new carto.layer.Layer(
        geonamesDataset,
        geonamesStyle,
        {featureOverColumns: ['name']}
      );

      // Add popups
      var popup = L.popup();
      geonames.on('featureOver', function (featureEvent) {
        popup.setLatLng(featureEvent.latLng);
        popup.setContent(featureEvent.data.name);
        popup.openOn(map);
      });
      geonames.on('featureOut', function (featureEvent) {
        popup.removeFrom(map);
      });

      // Set up map
      client.addLayers([geonames]);
      client.getLeafletLayer().addTo(map);

      var result = parseQueryString(location.search);
      console.info(JSON.stringify(result));

      // Set the starting value
      if (result['query']) {
        setKeyword(result['query']);
      }
      else {
        setKeyword(keyword_default);
      }


    </script>
  </body>
</html>

## thumbnail.png

      
      Raw
    
  
              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Geonames Heatmap</title>

	<!-- Include Leaflet 1.2.0 Library -->
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>

	<!-- Fonts -->
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

	<!-- Include cartodb.js Library -->
	<!-- <script src="https://cdn.rawgit.com/CartoDB/cartodb.js/@4.0.0-alpha/carto.js"></script> -->
	<script src="https://rawgit.com/CartoDB/cartodb.js/dist/carto.js"></script>
	<style>
	* { margin:0; padding:0; }
	html { box-sizing:border-box; height:100%; }
	body { background:#f2f6f9; height:100%; font-family:"Open sans", Helvetica, Arial, sans-serif; }
	li {margin-left:2em;}
	p {margin-bottom: 0.5em;}
	#container { display:flex; width:100%; height:100%; }
	#map { flex:1; margin:10px; }
	#widgets { width:300px; margin:10px 10px 10px 0; }
	.widget { background:white; padding:10px; margin-bottom:10px; }
	.widget h1 { font-size:1.5em; padding-bottom:10px;}
	.widget-formula .result { font-size:2em; }
	input { font-size:1em; }
	</style>
	</head>
	<body>
	<div id="container">
	<div id="map"></div>
	<div id="widgets">
	<div id="keywordWidget" class="widget">
	<h1>Map a Name</h1>
	<input id="keyword" class="js-keyword" onchange="setKeyword(this.value)" value="beach" />
	</div>
	<div id="statesWidget" class="widget widget-formula">
	<h1>Instructions</h1>
	<p>Type a word in the field above and hit return, the map will show all the place names that include that word. </p>
	<p>Try:</p><ul>
	<li>historical names (<a href="?query=lincoln">Lincoln</a>, <a href="?query=lee">Lee</a>)</li>
	<li>resource names (<a href="?query=gold">gold</a>, <a href="?query=coal">coal</a>)</li>
	<li>geographic names (<a href="?query=canyon">canyon</a>, <a href="?query=bayou">bayou</a>)</li>
	<li>ethnic names (<a href="?query=swedish">swedish</a>, <a href="?query=cherokee">cherokee</a>, <a href="?query=navajo">navajo</a>)</li>
	<li>species names (<a href="?query=cougar">cougar</a>, <a href="?query=cactus">cactus</a>).</li>
	</ul></p>
	</div>
	</div>
	</div>
	<script>
	var keyword_default = "beach";
	var geonamesDataset;
	var geonamesStyle;

	function parseQueryString(url) {
	var urlParams = {};
	url.replace(
	new RegExp("([^?=&]+)(=([^&]*))?", "g"),
	function($0, $1, $2, $3) {
	urlParams[$1] = $3;
	}
	);

	return urlParams;
	}

	function setKeyword(keyword) {
	if ( keyword == "" ) {
	keyword = keyword_default;
	}
	var sql_tmpl = "SELECT * FROM geonames ";
	sql_tmpl += "WHERE to_tsvector('english', name) ";
	sql_tmpl += "@@ plainto_tsquery('english', '{{keyword}}') ";
	sql_tmpl += "ORDER BY Random() LIMIT 10000";

	var keyword_clean = keyword.replace(/[;:\"!@#$%^&\*\(\)\[\]\{\}\?\+\/\\=]/g, "");
	var keyword_clean_sql = keyword_clean.replace(/\'/g, "''")
	var keyword_sql = sql_tmpl.replace("{{keyword}}", keyword_clean_sql);
	console.log(keyword_sql);
	geonamesDataset.setQuery(keyword_sql);
	document.getElementById('keyword').value = keyword_clean;
	}

	var map = L.map('map').setView([40, -100], 5);
	// Adding Voyager Basemap
	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '©<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©<a href="https://carto.com/attribution">CARTO</a>'
	}).addTo(map);

	// Adding Voyager Labels
	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '©<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©<a href="https://carto.com/attribution">CARTO</a>',
	zIndex: 100
	}).addTo(map);

	var client = new carto.Client({
	// apiKey: 'e44d534647488bca94c2befbe0d5bc6bbdd66966',
	apiKey: 'e44d534647488bca94c2befbe0d5bc6bbdd66966',
	username: 'pramsey'
	});

	geonamesDataset = new carto.source.SQL('SELECT * FROM geonames LIMIT 1');
	geonamesStyle = new carto.style.CartoCSS(`
	#layer {
	marker-width: 14;
	marker-fill: #FF583E;
	marker-fill-opacity: 0.1;
	marker-line-color: #FFFFFF;
	marker-line-width: 0;
	marker-line-opacity: 0;
	marker-type: ellipse;
	marker-allow-overlap: true;
	}`);

	// Set up layers
	var geonames = new carto.layer.Layer(
	geonamesDataset,
	geonamesStyle,
	{featureOverColumns: ['name']}
	);

	// Add popups
	var popup = L.popup();
	geonames.on('featureOver', function (featureEvent) {
	popup.setLatLng(featureEvent.latLng);
	popup.setContent(featureEvent.data.name);
	popup.openOn(map);
	});
	geonames.on('featureOut', function (featureEvent) {
	popup.removeFrom(map);
	});

	// Set up map
	client.addLayers([geonames]);
	client.getLeafletLayer().addTo(map);

	var result = parseQueryString(location.search);
	console.info(JSON.stringify(result));

	// Set the starting value
	if (result['query']) {
	setKeyword(result['query']);
	}
	else {
	setKeyword(keyword_default);
	}





	</script>
	</body>
	</html>