jscarto/TwitterExample5.html

## TwitterExample5.html
<!DOCTYPE html>
<html>
<head>
  <title>My First Leaflet Map</title>
	 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	 <!--[if lte IE 8]>
	     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	 <![endif]-->
	  <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	   <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

</head>
<body>

<!-- define the area the map will go into. Feel free to change the size as needed -->
 <div id="map" style="width:800px; height: 500px;"></div>
 <script>

var coords = [37.69, -59.23]; // the geographic center of our map
var zoomLevel = 3; // the map scale. See: http://wiki.openstreetmap.org/wiki/Zoom_levels

var map = L.map('map').setView(coords, zoomLevel);

// we need to provide the map with some base map tiles. There are few free options.
// we'll use Stamen Acetate, a muted base map good for overlaying data.
var tiles = 'http://acetate.geoiq.com/tiles/acetate-hillshading/';
// if you'd like to explore other base maps, see: http://developer.mapquest.com/web/products/open/map

// if you use different tiles, be sure to update the attribution :)
L.tileLayer(tiles+'{z}/{x}/{y}.png', {
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 &copy; <a href="http://FortiusOne.com">FortiusOne</a> and <a href="http://stamen.com">Stamen</a>',
maxZoom: 18
}).addTo(map);

// make an array to store the tweets we want to map
var tweets = [];

// load tweets and identify those with explicit coordinates
$.getJSON('tweets.txt',function(data){ // note: this requires your data file to be named tweets.txt

	$.each(data, function(){
		// if the tweet has a lon,lat add it to the tweets[] array
		if(this.coordinates) {
			tweets.push(
				// set up some default properties for symbols
				L.circleMarker([this.coordinates.coordinates[1], this.coordinates.coordinates[0]], {
					radius: 6,
				    fillColor: "#58006c",
				    color: "#58006c",
				    weight: 2,
				    opacity: 0.5,
				    fillOpacity: 0.25,
				    riseOnHover: true,
				    riseOffset: 5000,
				    tweetText: this.text, // all other properties above are provided by Leaflet
				    tweetLength: this.text.length,
				    userName: this.user.screen_name, // the @handle of the user
				    userRealName: this.user.name
				}));
		}
	});

	drawTweets(tweets); // a custom function for placing each tweet on the map
});

// draw tweets on the map by adding them to the map variable
function drawTweets(tweetList) {
	var numTweets = tweetList.length;

	for(var i = 0; i < numTweets; i++) {
		classifyTweets(tweetList[i]);
		tweetList[i].addTo(map);
		tweetList[i].on('mouseover', highlightFeature);
		tweetList[i].on('mouseout', resetFeature);
		tweetList[i].on('click', showPopup);
	}
}

// scale symbols according to tweet length
function classifyTweets(theTweet) {
	theTweet.setStyle({
		radius: 1.5 * Math.sqrt(theTweet.options.tweetLength / Math.PI)
	});
}


// add marker behavior for mouseOver events
function highlightFeature(e) {
	var symbol = e.target;
	symbol.setStyle({ // highlight the feature by making it larger and more opaque
	    fillColor: "#00D0FF",
	    color: "#0070BA",
	    fillOpacity: .75,
	    opacity: 1.0,
	});
	symbol.setZIndexOffset = 15000;
}

// now add similar behavior to return the symbol to its original state
function resetFeature(e) {
	var symbol = e.target;
	symbol.setStyle({
		fillColor: "#58006c",
		color: "#58006c",
		opacity: 0.5,
		fillOpacity: 0.25,
	});
	classifyTweets(symbol);
	symbol.unbindPopup();
}

// show a pop-up that reveals the actual tweet
function showPopup(e) {
	var symbol = e.target;
	symbol.bindPopup('<span style="font-size:15px;"><strong>'+symbol.options.userRealName +'</strong><span style="color:#999999;"> @'+symbol.options.userName + '</span></span><br />' + symbol.options.tweetText, {minWidth: 120});
	symbol.openPopup();
}
 </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>My First Leaflet Map</title>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
	<!--[if lte IE 8]>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
	<![endif]-->
	<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

	</head>
	<body>

	<!-- define the area the map will go into. Feel free to change the size as needed -->
	<div id="map" style="width:800px; height: 500px;"></div>
	<script>

	var coords = [37.69, -59.23]; // the geographic center of our map
	var zoomLevel = 3; // the map scale. See: http://wiki.openstreetmap.org/wiki/Zoom_levels

	var map = L.map('map').setView(coords, zoomLevel);

	// we need to provide the map with some base map tiles. There are few free options.
	// we'll use Stamen Acetate, a muted base map good for overlaying data.
	var tiles = 'http://acetate.geoiq.com/tiles/acetate-hillshading/';
	// if you'd like to explore other base maps, see: http://developer.mapquest.com/web/products/open/map

	// if you use different tiles, be sure to update the attribution :)
	L.tileLayer(tiles+'{z}/{x}/{y}.png', {
	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://FortiusOne.com">FortiusOne</a> and <a href="http://stamen.com">Stamen</a>',
	maxZoom: 18
	}).addTo(map);

	// make an array to store the tweets we want to map
	var tweets = [];

	// load tweets and identify those with explicit coordinates
	$.getJSON('tweets.txt',function(data){ // note: this requires your data file to be named tweets.txt

	$.each(data, function(){
	// if the tweet has a lon,lat add it to the tweets[] array
	if(this.coordinates) {
	tweets.push(
	// set up some default properties for symbols
	L.circleMarker([this.coordinates.coordinates[1], this.coordinates.coordinates[0]], {
	radius: 6,
	fillColor: "#58006c",
	color: "#58006c",
	weight: 2,
	opacity: 0.5,
	fillOpacity: 0.25,
	riseOnHover: true,
	riseOffset: 5000,
	tweetText: this.text, // all other properties above are provided by Leaflet
	tweetLength: this.text.length,
	userName: this.user.screen_name, // the @handle of the user
	userRealName: this.user.name
	}));
	}
	});

	drawTweets(tweets); // a custom function for placing each tweet on the map
	});

	// draw tweets on the map by adding them to the map variable
	function drawTweets(tweetList) {
	var numTweets = tweetList.length;

	for(var i = 0; i < numTweets; i++) {
	classifyTweets(tweetList[i]);
	tweetList[i].addTo(map);
	tweetList[i].on('mouseover', highlightFeature);
	tweetList[i].on('mouseout', resetFeature);
	tweetList[i].on('click', showPopup);
	}
	}

	// scale symbols according to tweet length
	function classifyTweets(theTweet) {
	theTweet.setStyle({
	radius: 1.5 * Math.sqrt(theTweet.options.tweetLength / Math.PI)
	});
	}


	// add marker behavior for mouseOver events
	function highlightFeature(e) {
	var symbol = e.target;
	symbol.setStyle({ // highlight the feature by making it larger and more opaque
	fillColor: "#00D0FF",
	color: "#0070BA",
	fillOpacity: .75,
	opacity: 1.0,
	});
	symbol.setZIndexOffset = 15000;
	}

	// now add similar behavior to return the symbol to its original state
	function resetFeature(e) {
	var symbol = e.target;
	symbol.setStyle({
	fillColor: "#58006c",
	color: "#58006c",
	opacity: 0.5,
	fillOpacity: 0.25,
	});
	classifyTweets(symbol);
	symbol.unbindPopup();
	}

	// show a pop-up that reveals the actual tweet
	function showPopup(e) {
	var symbol = e.target;
	symbol.bindPopup('<span style="font-size:15px;"><strong>'+symbol.options.userRealName +'</strong><span style="color:#999999;"> @'+symbol.options.userName + '</span></span><br />' + symbol.options.tweetText, {minWidth: 120});
	symbol.openPopup();
	}
	</script>

	</body>
	</html>