Skip to content

Instantly share code, notes, and snippets.

@pramsey

pramsey/index.html

Last active November 21, 2017 20:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pramsey/e66fa50f79cf5cfe9856f369c43488f9 to your computer and use it in GitHub Desktop.
Save pramsey/e66fa50f79cf5cfe9856f369c43488f9 to your computer and use it in GitHub Desktop.
Download ZIP
GeoNames on new Carto.js
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment