Instantly share code, notes, and snippets.

Embed
What would you like to do?
Heatmap of SMRT Twitter Data
<!DOCTYPE html>
<html>
<head>
<title>MRT Station Tweeters</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.css" />
</head>
<body>
<div id="map" style="width: 1600px; height: 1200px"></div>
<script src="tweets_lang.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script src="heatcanvas.js"></script>
<script src="heatcanvas-leaflet.js"></script>
<script>
var languages = [
'Indonesian',
'Tagalog',
'Vietnamese',
'OtherEuropean',
'OtherAsian',
];
var metadata = {
'Indonesian': [ 0, 'Indonesian', 'black' ],
'Tagalog': [ 1, 'Tagalog', 'blue' ],
'Vietnamese': [ 2, 'Vietnamese', 'purple' ],
'OtherEuropean': [ 3, 'OtherEuropean', 'red' ],
'OtherAsian': [ 4, 'OtherAsian', 'orange' ],
};
var heatmap = new L.TileLayer.HeatCanvas({}, {
'step':0.5,
'degree':HeatCanvas.LINEAR,
//'degree':HeatCanvas.QUAD,
//'degree':HeatCanvas.CUBIC,
'opacity':0.5});
var normalize_language = function(lang) {
if(lang == "French" || lang == "German" || lang == "Danish" ||
lang == "Slovak" || lang == "Portuguese" || lang == "Polish" ||
lang == "Swedish" || lang == "Norwegian (Bokmal)" || lang == "Italian"
|| lang == "Dutch" || lang == "Lithuanian" || lang == "Latvian" ||
lang == "Slovenian" || lang == "Turkish" || lang == "Spanish") {
return "OtherEuropean";
}
else if(lang == "Japanese" || lang == "Thai" || lang == "Korean" ||
lang == "Chinese") {
return "OtherAsian";
}
return lang;
}
// pass language in the url, e.g. ?lang=Indonesian
var targetLang = window.location.search.split('=')[1];
for(var i=0; i < pnts.length; i++) {
var pnt = pnts[i];
var total = pnt[5];
var lang = normalize_language(pnt[4]);
if(lang != targetLang) continue;
heatmap.pushData(pnt[1], pnt[0], total);
}
var alttile = L.tileLayer('http://{s}.tile.cloudmade.com/<your api code goes here>/' +
'66601/256/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">' +
'OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery <a href="http://cloudmade.com">CloudMade</a>'
});
var map = L.map('map', {
center: new L.LatLng(1.35784, 103.82708), // Singapore
zoom: 13,
layers: [ alttile, heatmap ]
});
var baseMaps = {
"10Scape Tileset": alttile,
"Heat Map": heatmap
};
L.control.layers(baseMaps, []).addTo(map);
var popup = L.popup();
function onMapClick(e) {
popup
.setLatLng(e.latlng)
.setContent("You clicked the map at " + e.latlng.toString())
.openOn(map);
}
map.on('click', onMapClick);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment