metasyn · January 5, 2016 08:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
    <meta charset=utf-8 />
    <title>A simple map</title>

    <!-- Initalize viewport -->
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

    <!-- Deps -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>


    <!-- CSS -->
    <link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />


    <!-- Inline, just for now -->
    <style>
      body { margin:0; padding:0; }
      #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>

 </head>

 <body>
    <div id='map'></div>

 <script>

 var data;

 // ACCESS KEY OMG - easy to change online though if we suspect abuse
 L.mapbox.accessToken = 'pk.eyJ1IjoibWV0YXN5biIsImEiOiIwN2FmMDNhNTRhOWQ3NDExODI1MTllMDk1ODc3NTllZiJ9.Bye80QJ4r0RJsKj4Sre6KQ';

 // Init map
 var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([37.7600, -122.416], 14);

 // Scaper
 // data
 var url = "http://www.foopee.com/punk/the-list/by-date.1.html";

 // xpath
 var xpath = "//body/ul/li";

 // query
 var query = "select * from html where url='" + url  + "' and xpath='" + xpath + "'";

 // query
 var yql = "https://query.yahooapis.com/v1/public/yql?format=json&q=" + encodeURIComponent(query);

 // request
 $.getJSON(yql, callback);

 function callback(response){
    data = response['query']['results']['li'];
 }

 lonlatDictionary = {
    '924 Gilman Street, Berkeley': [-122.2993211, 37.8795371],
    'Hemlock, S.F.': [-122.420301, 37.787356],
    'Chapel, S.F.': [-122.421198, 37.760528],
    'Regency Ballroom, S.F.': [ -122.421573, 37.787836]
 }

 function sortByDate(data){
    organized = {}

    // loop through dates
    for (var i = 0; i < data.length; i++){

        organized[data[i]['a']['b']] = [];

        if (data[i]['ul']['li'].length == undefined){
            data[i]['ul']['li'] = Array(data[i]['ul']['li'])
        }

        // loop through shows
        for (var showIndex = 0; showIndex < data[i]['ul']['li'].length; showIndex++) { 

            var show = data[i]['ul']['li'][showIndex];
            var venue = show['b']['a']['content'];
            var details = show['content'].slice(0, -1); // new line at the end
            var lineup = show['a'];

            var bands = [];

            // loop through bands
            for (var bandIndex = 0; bandIndex < lineup.length; bandIndex++){
                bands.push(lineup[bandIndex]['content'])
            }

            organized[data[i]['a']['b']].push({
                'venue': venue,
                'date' : data[i]['a']['b'],
                'details': details,
                'bands': bands.join('\n')
            });

        }
    }
    return organized
 }



 function geojsonify(data){
    
    var features = []
    
    var dateKeys = Object.keys(data)

    // loop through dates
    for (var i = 0; i < dateKeys.length; i++){

        // loop through shows
        for (var j = 0; j < data[dateKeys[i]].length; j++){

            console.log(dateKeys[i])
            console.log(data[dateKeys[i]][j])

            var show = {
                "type": "Feature",
                "geometry": {"type": "Point", "coordinates": lonlatDictionary[data[dateKeys[i]][j]['venue']] || [0, 0]},
                "properties": {
                    "date": dateKeys[i],
                    "venue": data[dateKeys[i]][j]['venue'],
                    "bands": data[dateKeys[i]][j]['bands'],
                    "details": data[dateKeys[i]][j]['details'],
                    'marker-color': '#548cba',
                    'marker-size': 'large',
                    'marker-symbol': 'music'
                }
            }

            // add show to features array
            features.push(show)

        }
    }

    // format geojson
    var geojson = { "type": "FeatureCollection", "features": features }
    return geojson
 }


 ////////////

 function plotShows(data){

    // get that geojson
    var geojson = geojsonify(sortByDate(data));

    // empty layer
    var myLayer = L.mapbox.featureLayer().addTo(map)

    myLayer.on('layeradd', function(e) {
        var marker = e.layer,
            feature = marker.feature;

        // Create custom popup content
        var popupContent =  '<h1>' + feature.properties.venue + '</h1>' + '</br>' +
                            '<h3>' + feature.properties.date + '</h3>' + '</br>' +
                            '<h2>' + feature.properties.bands.split().join('\n') + '</h2>' + '</br>' +
                            '</br></br>' + 
                            '<h2>' + feature.properties.details + '</h2>' + '</br>';

        // http://leafletjs.com/reference.html#popup
        marker.bindPopup(popupContent,{
            closeButton: true,
            minWidth: 320
        });
    });

    myLayer.setGeoJSON(geojson);

 }




 function fetchGeo(venue){

    // api key
    var apiKey = "AIzaSyDCyj1LQMqFPcQhgfW92vR8BtXhlDIvF-4";
    // request
    var geocoder = "https://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(venue) + "&key=" + apiKey;
  
    return $.getJSON(geocoder, function(response){return response.responseJSON})
 }

 function extractLatLon(venue){
    geo = fetchGeo(venue);
    return {
        "address": geo.responseJSON.results[0].formatted_address,
        "location": geo.responseJSON.results[0].geometry.location
    }
 }


 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>A simple map</title>

	<!-- Initalize viewport -->
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

	<!-- Deps -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
	<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>


	<!-- CSS -->
	<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />


	<!-- Inline, just for now -->
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>

	</head>

	<body>
	<div id='map'></div>

	<script>

	var data;

	// ACCESS KEY OMG - easy to change online though if we suspect abuse
	L.mapbox.accessToken = 'pk.eyJ1IjoibWV0YXN5biIsImEiOiIwN2FmMDNhNTRhOWQ3NDExODI1MTllMDk1ODc3NTllZiJ9.Bye80QJ4r0RJsKj4Sre6KQ';

	// Init map
	var map = L.mapbox.map('map', 'mapbox.streets')
	.setView([37.7600, -122.416], 14);

	// Scaper
	// data
	var url = "http://www.foopee.com/punk/the-list/by-date.1.html";

	// xpath
	var xpath = "//body/ul/li";

	// query
	var query = "select * from html where url='" + url + "' and xpath='" + xpath + "'";

	// query
	var yql = "https://query.yahooapis.com/v1/public/yql?format=json&q=" + encodeURIComponent(query);

	// request
	$.getJSON(yql, callback);

	function callback(response){
	data = response['query']['results']['li'];
	}

	lonlatDictionary = {
	'924 Gilman Street, Berkeley': [-122.2993211, 37.8795371],
	'Hemlock, S.F.': [-122.420301, 37.787356],
	'Chapel, S.F.': [-122.421198, 37.760528],
	'Regency Ballroom, S.F.': [ -122.421573, 37.787836]
	}

	function sortByDate(data){
	organized = {}

	// loop through dates
	for (var i = 0; i < data.length; i++){

	organized[data[i]['a']['b']] = [];

	if (data[i]['ul']['li'].length == undefined){
	data[i]['ul']['li'] = Array(data[i]['ul']['li'])
	}

	// loop through shows
	for (var showIndex = 0; showIndex < data[i]['ul']['li'].length; showIndex++) {

	var show = data[i]['ul']['li'][showIndex];
	var venue = show['b']['a']['content'];
	var details = show['content'].slice(0, -1); // new line at the end
	var lineup = show['a'];

	var bands = [];

	// loop through bands
	for (var bandIndex = 0; bandIndex < lineup.length; bandIndex++){
	bands.push(lineup[bandIndex]['content'])
	}

	organized[data[i]['a']['b']].push({
	'venue': venue,
	'date' : data[i]['a']['b'],
	'details': details,
	'bands': bands.join('\n')
	});

	}
	}
	return organized
	}



	function geojsonify(data){

	var features = []

	var dateKeys = Object.keys(data)

	// loop through dates
	for (var i = 0; i < dateKeys.length; i++){

	// loop through shows
	for (var j = 0; j < data[dateKeys[i]].length; j++){

	console.log(dateKeys[i])
	console.log(data[dateKeys[i]][j])

	var show = {
	"type": "Feature",
	"geometry": {"type": "Point", "coordinates": lonlatDictionary[data[dateKeys[i]][j]['venue']] \|\| [0, 0]},
	"properties": {
	"date": dateKeys[i],
	"venue": data[dateKeys[i]][j]['venue'],
	"bands": data[dateKeys[i]][j]['bands'],
	"details": data[dateKeys[i]][j]['details'],
	'marker-color': '#548cba',
	'marker-size': 'large',
	'marker-symbol': 'music'
	}
	}

	// add show to features array
	features.push(show)

	}
	}

	// format geojson
	var geojson = { "type": "FeatureCollection", "features": features }
	return geojson
	}


	////////////

	function plotShows(data){

	// get that geojson
	var geojson = geojsonify(sortByDate(data));

	// empty layer
	var myLayer = L.mapbox.featureLayer().addTo(map)

	myLayer.on('layeradd', function(e) {
	var marker = e.layer,
	feature = marker.feature;

	// Create custom popup content
	var popupContent = '<h1>' + feature.properties.venue + '</h1>' + '</br>' +
	'<h3>' + feature.properties.date + '</h3>' + '</br>' +
	'<h2>' + feature.properties.bands.split().join('\n') + '</h2>' + '</br>' +
	'</br></br>' +
	'<h2>' + feature.properties.details + '</h2>' + '</br>';

	// http://leafletjs.com/reference.html#popup
	marker.bindPopup(popupContent,{
	closeButton: true,
	minWidth: 320
	});
	});

	myLayer.setGeoJSON(geojson);

	}




	function fetchGeo(venue){

	// api key
	var apiKey = "AIzaSyDCyj1LQMqFPcQhgfW92vR8BtXhlDIvF-4";
	// request
	var geocoder = "https://maps.googleapis.com/maps/api/geocode/json?address=" + encodeURIComponent(venue) + "&key=" + apiKey;

	return $.getJSON(geocoder, function(response){return response.responseJSON})
	}

	function extractLatLon(venue){
	geo = fetchGeo(venue);
	return {
	"address": geo.responseJSON.results[0].formatted_address,
	"location": geo.responseJSON.results[0].geometry.location
	}
	}


	</script>
	</body>
	</html>