orfeomorello/gist:995689

## gistfile1.html
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8" />
	<title>Localstreamer Wrapper of Static Image Maps - Api Demo by Orfeo Morello</title>
<style>
*{
	margin:0;
	padding:0;
}
html{
	background-color:#f0f0f0;
}
body{
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
	color:#777;
}
h2
{
padding:6px;
font-weight: normal;
    border-bottom: 1px solid #DDD;
    font-size: 0.9em;
}
/*Tool tip*/
a.css_tooltip{
position:relative;
text-decoration:none;
}
a.css_tooltip span{
display: none;
}
a.css_tooltip:hover span{
display:block;
position:absolute;
z-index:20;
top:1.3em;
left:1em;
width:203px;
padding:5px;
}
a.css_tooltip span b{
display:block;
}
header{
	display:block;
	margin-top:40px;
	position:relative;
	text-align: center;
}
footer{
	display:block;
	margin-top:40px;
	position:relative;
	text-align: center;
}
/*Content*/
div {
border:1px solid #CCC;
padding:30px;
font:14px/1 'Segoe UI',Arial,sans-serif;
color:#333;
margin:115px auto 0;
width:320px;
height:80px;
background: none repeat scroll 0 0 white;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script>
/*jsonToken-Key for Localstreamer.com domain*/
/*
 *Mashape allows the issuing of  JSONP Token associated with one or more domains
 *that replaces your API Key, so that nobody can impersonate your user.
 *create your jsonToken here: http://www.mashape.com/account/jsonp/index
 */
var jsonToken ="PUT YOUR JSONP TOKEN HERE";
var tokenUrl = "https://api.mashape.com/requestToken?jsonptoken="+jsonToken;

var currentLocation;
var currentLatitude;
var currentLongitude;

/* Default map provider. You can select Bing,Facebook,Foursquare,Google,Ovi,Openstreetmap */
var provider="Google";

/*Array of Arrays [place,latitude,longitude] */
var pointsArray = new Array( new Array("San Francisco","37.75","-122.5"),
                     new Array("Monterey Peninsula","36.593849","-121.8341182"),
					 new Array("San Jose","37.3394444","-121.8938889"),
					 new Array("Silicon Valley","37.37","-122.04") );

var textFromDatabase="";

var goNext=0;

function executeRequest()
{
    $.ajax({
      url : tokenUrl,
      dataType : "jsonp",
      jsonpCallback: "elaborateToken",
      timeout : 700
    });
}

function elaborateToken(data)
{

	 var localstreamerUrl ='http://www.localstreamer.com/mashape/staticimagemap/lat/'+currentLatitude+'/lng/'+currentLongitude+'/provider/'+provider+'?zoom=10&_token='+data.token;
 	 $.getJSON(localstreamerUrl,{},  function(data)
          {
            if (data.imageUrl)
            {
               var imageUrl = data.imageUrl

               var htmlCode = '<a href="#" class="css_tooltip">'+currentLocation+' <span><img src="'+imageUrl+'"></span></a>';
               var match = new RegExp(currentLocation, "ig");

               textFromDatabase = textFromDatabase.replace(match, htmlCode);
			   document.getElementById("content").innerHTML = textFromDatabase;

   			   goNext=goNext+1;

   			   if(pointsArray[goNext])
   			   {
						 		currentLocation = pointsArray[goNext][0];
								currentLatitude = pointsArray[goNext][1];
							    currentLongitude = pointsArray[goNext][2];
								executeRequest();
			   }
			   else
			   {
			    document.getElementById('pleasewait').style.display = 'none';
			    alert('Completed!');
			   }
            }
         });
}


function demoRun()
{
		document.getElementById('startlink').style.display = 'none';
        document.getElementById('pleasewait').style.display = 'block';
	    textFromDatabase = document.getElementById("content").innerHTML;
        goNext=0;
		currentLocation = pointsArray[goNext][0];
		currentLatitude = pointsArray[goNext][1];
	    currentLongitude = pointsArray[goNext][2];
		executeRequest();
}
</script>
</head>
<body>

        <header>
            <h1>Static Image Maps - API Demo</h1>
               <h2>
               Take plain text and automatically enrich it with links to different static map providers. Turns plain text into hypertext! <br/><br/>
               Static Map Api  : <a href="http://www.mashape.com/apis/Static%20map%20api%20wrapper" target="_blank">API Documentation on Mashape Martketplace</a> - Complete Tutorial : <a href="http://localstreamer.posterous.com/get-static-map-images-for-your-next-html5-geo" target="_blank">Localstreamer blog</a>
               </h2>
        </header>
<article>
<div id="content">
The cities near San Francisco are equipped  of natural wonders. In areas close to the city and further south to the Monterey Peninsula, the beaches are rugged and rocky. In the southwest of San Francisco is located San Jose, the capital of Silicon Valley the global center for the high-tech industry.
</div>
<br/><br/><br/>
<p style="text-align:center" id="startlink">

                <select id="providers" onChange="provider = $('#providers').val();">
                    <option value="Bing">Bing map</option>
                    <option value="Facebook">Facebook Places</option>
                    <option value="Foursquare">Foursquare</option>
                    <option value="Google" selected>Google static map</option>
                    <option value="Ovi">Nokia Ovi</option>
                    <option value="Openstreetmap">Openstreetmap</option>
                </select>

<a onclick="demoRun();return false;" href="#">Start Demo</a>
</p>
<p style="text-align:center;display: none" id="pleasewait">Please wait....</p>
</article>
<footer>
Info? Email to: <b>info@localstreamer.com</b>
<br/>
Give our website a try: <a href="http://www.localstreamer.com">www.localstreamer.com</a>
</footer>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Localstreamer Wrapper of Static Image Maps - Api Demo by Orfeo Morello</title>
	<style>
	*{
	margin:0;
	padding:0;
	}
	html{
	background-color:#f0f0f0;
	}
	body{
	font:14px/1.3 'Segoe UI',Arial, sans-serif;
	color:#777;
	}
	h2
	{
	padding:6px;
	font-weight: normal;
	border-bottom: 1px solid #DDD;
	font-size: 0.9em;
	}
	/Tool tip/
	a.css_tooltip{
	position:relative;
	text-decoration:none;
	}
	a.css_tooltip span{
	display: none;
	}
	a.css_tooltip:hover span{
	display:block;
	position:absolute;
	z-index:20;
	top:1.3em;
	left:1em;
	width:203px;
	padding:5px;
	}
	a.css_tooltip span b{
	display:block;
	}
	header{
	display:block;
	margin-top:40px;
	position:relative;
	text-align: center;
	}
	footer{
	display:block;
	margin-top:40px;
	position:relative;
	text-align: center;
	}
	/Content/
	div {
	border:1px solid #CCC;
	padding:30px;
	font:14px/1 'Segoe UI',Arial,sans-serif;
	color:#333;
	margin:115px auto 0;
	width:320px;
	height:80px;
	background: none repeat scroll 0 0 white;
	}
	</style>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
	<script>
	/jsonToken-Key for Localstreamer.com domain/
	/*
	*Mashape allows the issuing of JSONP Token associated with one or more domains
	*that replaces your API Key, so that nobody can impersonate your user.
	*create your jsonToken here: http://www.mashape.com/account/jsonp/index
	*/
	var jsonToken ="PUT YOUR JSONP TOKEN HERE";
	var tokenUrl = "https://api.mashape.com/requestToken?jsonptoken="+jsonToken;

	var currentLocation;
	var currentLatitude;
	var currentLongitude;

	/* Default map provider. You can select Bing,Facebook,Foursquare,Google,Ovi,Openstreetmap */
	var provider="Google";

	/Array of Arrays [place,latitude,longitude] /
	var pointsArray = new Array( new Array("San Francisco","37.75","-122.5"),
	new Array("Monterey Peninsula","36.593849","-121.8341182"),
	new Array("San Jose","37.3394444","-121.8938889"),
	new Array("Silicon Valley","37.37","-122.04") );

	var textFromDatabase="";

	var goNext=0;

	function executeRequest()
	{
	$.ajax({
	url : tokenUrl,
	dataType : "jsonp",
	jsonpCallback: "elaborateToken",
	timeout : 700
	});
	}

	function elaborateToken(data)
	{

	var localstreamerUrl ='http://www.localstreamer.com/mashape/staticimagemap/lat/'+currentLatitude+'/lng/'+currentLongitude+'/provider/'+provider+'?zoom=10&_token='+data.token;
	$.getJSON(localstreamerUrl,{}, function(data)
	{
	if (data.imageUrl)
	{
	var imageUrl = data.imageUrl

	var htmlCode = '<a href="#" class="css_tooltip">'+currentLocation+' <span><img src="'+imageUrl+'"></span></a>';
	var match = new RegExp(currentLocation, "ig");

	textFromDatabase = textFromDatabase.replace(match, htmlCode);
	document.getElementById("content").innerHTML = textFromDatabase;

	goNext=goNext+1;

	if(pointsArray[goNext])
	{
	currentLocation = pointsArray[goNext][0];
	currentLatitude = pointsArray[goNext][1];
	currentLongitude = pointsArray[goNext][2];
	executeRequest();
	}
	else
	{
	document.getElementById('pleasewait').style.display = 'none';
	alert('Completed!');
	}
	}
	});
	}


	function demoRun()
	{
	document.getElementById('startlink').style.display = 'none';
	document.getElementById('pleasewait').style.display = 'block';
	textFromDatabase = document.getElementById("content").innerHTML;
	goNext=0;
	currentLocation = pointsArray[goNext][0];
	currentLatitude = pointsArray[goNext][1];
	currentLongitude = pointsArray[goNext][2];
	executeRequest();
	}
	</script>
	</head>
	<body>

	<header>
	<h1>Static Image Maps - API Demo</h1>
	<h2>
	Take plain text and automatically enrich it with links to different static map providers. Turns plain text into hypertext! <br/><br/>
	Static Map Api : <a href="http://www.mashape.com/apis/Static%20map%20api%20wrapper" target="_blank">API Documentation on Mashape Martketplace</a> - Complete Tutorial : <a href="http://localstreamer.posterous.com/get-static-map-images-for-your-next-html5-geo" target="_blank">Localstreamer blog</a>
	</h2>
	</header>
	<article>
	<div id="content">
	The cities near San Francisco are equipped of natural wonders. In areas close to the city and further south to the Monterey Peninsula, the beaches are rugged and rocky. In the southwest of San Francisco is located San Jose, the capital of Silicon Valley the global center for the high-tech industry.
	</div>
	<br/><br/><br/>
	<p style="text-align:center" id="startlink">

	<select id="providers" onChange="provider = $('#providers').val();">
	<option value="Bing">Bing map</option>
	<option value="Facebook">Facebook Places</option>
	<option value="Foursquare">Foursquare</option>
	<option value="Google" selected>Google static map</option>
	<option value="Ovi">Nokia Ovi</option>
	<option value="Openstreetmap">Openstreetmap</option>
	</select>

	<a onclick="demoRun();return false;" href="#">Start Demo</a>
	</p>
	<p style="text-align:center;display: none" id="pleasewait">Please wait....</p>
	</article>
	<footer>
	Info? Email to: <b>info@localstreamer.com</b>
	<br/>
	Give our website a try: <a href="http://www.localstreamer.com">www.localstreamer.com</a>
	</footer>
	</body>
	</html>