mjcreativeventures/heatmap.html Secret

## heatmap.html
<!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>
	<!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 © <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>