philgyford/artists_map_photos.html

## artists_map_photos.html
<!--
A form for a place.
When submitted, displays a list of music artists from that place.
And looks up the location with Google Geocoder and displays a map.
And displays Flickr photos from within that location.
REQUIRES:
  * Echo Nest API Key.
  * Google API Key (with access to JavaScript API and Geocoding API)
  * Flickr API key
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .artists img {
        width: 100px;
      }
      .photos img {
        width: 200px;
      }
      #map {
        width: 100%;
        height: 300px;
      }
    </style>
  </head>
  <body>

    <form class="js-form">
      <input type="text" name="place" class="js-place">
      <input type="submit" value="Go">
    </form>

    <h2 class="js-title"></h2>

    <div id="map"></div>

    <ul class="js-artists artists">
    </ul>

    <div class="js-photos photos">
    </div>

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEAPIKEY"></script>

    <script>

      $(document).ready(function(){

        var echonestApiKey = 'YOURECHONESTAPIKEY';
			  // Also used above in googleapis.com request:
        var googleApiKey = 'YOURGOOGLEAPIKEY';
        var flickrApiKey = 'YOURFLICKRAPIKEY';

        function displayPlace(place) {
          $('.js-title').text(place);

          displayArtists(place);
          displayMap(place);
        };

        function displayArtists(place) {
          var request = $.ajax({
            url: 'http://developer.echonest.com/api/v4/artist/search?artist_location=' + place + '&bucket=video&format=json&artist_end_year_after=present&api_key=' + echonestApiKey
          })

          request.done(function(result){
            if (result['response']['status']['code'] == 0) {
              makeArtistsList(place, result['response']['artists']);
            } else {
              alert("Something went wrong: " + result['response']['status']['message']);
            };
          });

          request.fail(function(jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
          });
        };

        function makeArtistsList(place, artists) {
          $('.js-artists').empty();

          for(n=0; n < artists.length; n++) {
            var video = artists[n]['video'][0];
            if (video) {
              $('.js-artists').append(
                '<li>'+
                artists[n]['name']+
                ' <a href="' + video['url'] + '"><img src="' + video['image_url'] + '"></a>' +
                '</li>');
            };
          };
        };

        function displayMap(place) {
          var request = $.ajax({
            url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + place + "&key=" + googleApiKey
          });

          request.done(function(result){
            drawMap(result['results'][0]);
            displayPhotos(result['results'][0]);
          });
          request.fail(function(jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
          });
        };

        function drawMap(location) {
          var map = new google.maps.Map(document.getElementById('map'), {
              center: {
              lat: location['geometry']['location']['lat'],
              lng: location['geometry']['location']['lng']
            },
              zoom: 8
            });
        };

        function displayPhotos(location) {
          var bounds = location['geometry']['bounds'];

          var box = bounds['southwest']['lng'] + ',' +
                bounds['southwest']['lat'] + ',' +
                bounds['northeast']['lng'] + ',' +
                bounds['northeast']['lat'];

          var request = $.ajax({
            url: "https://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&nojsoncallback=1&per_page=10&license=1&bbox=" + box + "&api_key=" + flickrApiKey
          });

          request.done(function(response){
            if (response['stat'] == 'ok') {
              showPhotos(response['photos']['photo']);
            } else {
              alert("Something went wrong: " + response['message']);
            }
          });

          request.fail(function(jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
          });
        }

        function showPhotos(photos) {
          $('.js-photos').empty();
          for(n=0; n < photos.length; n++) {
            var p = photos[n];
            var url = 'https://www.flickr.com/photos/' + p['owner'] + '/' + p['id'];
            var img = '<img src="https://farm' + p['farm'] + '.staticflickr.com/' + p['server'] + '/' + p['id'] + '_' + p['secret'] + '.jpg' + '">';
            $('.js-photos').append('<a href="' + url + '">' + img + '</a>');
          };
        }

        $('.js-form').on('submit', function(ev){
          ev.preventDefault();

          displayPlace( $('.js-place').val() );
        });
      });
    </script>
  </body>
</html>
	<!--
	A form for a place.
	When submitted, displays a list of music artists from that place.
	And looks up the location with Google Geocoder and displays a map.
	And displays Flickr photos from within that location.
	REQUIRES:
	* Echo Nest API Key.
	* Google API Key (with access to JavaScript API and Geocoding API)
	* Flickr API key
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	.artists img {
	width: 100px;
	}
	.photos img {
	width: 200px;
	}
	#map {
	width: 100%;
	height: 300px;
	}
	</style>
	</head>
	<body>

	<form class="js-form">
	<input type="text" name="place" class="js-place">
	<input type="submit" value="Go">
	</form>

	<h2 class="js-title"></h2>

	<div id="map"></div>

	<ul class="js-artists artists">
	</ul>

	<div class="js-photos photos">
	</div>

	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=YOURGOOGLEAPIKEY"></script>

	<script>

	$(document).ready(function(){

	var echonestApiKey = 'YOURECHONESTAPIKEY';
	// Also used above in googleapis.com request:
	var googleApiKey = 'YOURGOOGLEAPIKEY';
	var flickrApiKey = 'YOURFLICKRAPIKEY';

	function displayPlace(place) {
	$('.js-title').text(place);

	displayArtists(place);
	displayMap(place);
	};

	function displayArtists(place) {
	var request = $.ajax({
	url: 'http://developer.echonest.com/api/v4/artist/search?artist_location=' + place + '&bucket=video&format=json&artist_end_year_after=present&api_key=' + echonestApiKey
	})

	request.done(function(result){
	if (result['response']['status']['code'] == 0) {
	makeArtistsList(place, result['response']['artists']);
	} else {
	alert("Something went wrong: " + result['response']['status']['message']);
	};
	});

	request.fail(function(jqXHR, textStatus) {
	alert("Request failed: " + textStatus);
	});
	};

	function makeArtistsList(place, artists) {
	$('.js-artists').empty();

	for(n=0; n < artists.length; n++) {
	var video = artists[n]['video'][0];
	if (video) {
	$('.js-artists').append(
	'<li>'+
	artists[n]['name']+
	' <a href="' + video['url'] + '"><img src="' + video['image_url'] + '"></a>' +
	'</li>');
	};
	};
	};

	function displayMap(place) {
	var request = $.ajax({
	url: "https://maps.googleapis.com/maps/api/geocode/json?address=" + place + "&key=" + googleApiKey
	});

	request.done(function(result){
	drawMap(result['results'][0]);
	displayPhotos(result['results'][0]);
	});
	request.fail(function(jqXHR, textStatus) {
	alert("Request failed: " + textStatus);
	});
	};

	function drawMap(location) {
	var map = new google.maps.Map(document.getElementById('map'), {
	center: {
	lat: location['geometry']['location']['lat'],
	lng: location['geometry']['location']['lng']
	},
	zoom: 8
	});
	};

	function displayPhotos(location) {
	var bounds = location['geometry']['bounds'];

	var box = bounds['southwest']['lng'] + ',' +
	bounds['southwest']['lat'] + ',' +
	bounds['northeast']['lng'] + ',' +
	bounds['northeast']['lat'];

	var request = $.ajax({
	url: "https://api.flickr.com/services/rest/?format=json&method=flickr.photos.search&nojsoncallback=1&per_page=10&license=1&bbox=" + box + "&api_key=" + flickrApiKey
	});

	request.done(function(response){
	if (response['stat'] == 'ok') {
	showPhotos(response['photos']['photo']);
	} else {
	alert("Something went wrong: " + response['message']);
	}
	});

	request.fail(function(jqXHR, textStatus) {
	alert("Request failed: " + textStatus);
	});
	}

	function showPhotos(photos) {
	$('.js-photos').empty();
	for(n=0; n < photos.length; n++) {
	var p = photos[n];
	var url = 'https://www.flickr.com/photos/' + p['owner'] + '/' + p['id'];
	var img = '<img src="https://farm' + p['farm'] + '.staticflickr.com/' + p['server'] + '/' + p['id'] + '_' + p['secret'] + '.jpg' + '">';
	$('.js-photos').append('<a href="' + url + '">' + img + '</a>');
	};
	}

	$('.js-form').on('submit', function(ev){
	ev.preventDefault();

	displayPlace( $('.js-place').val() );
	});
	});
	</script>
	</body>
	</html>