index.html

<!DOCTYPE html>
<html>
<head>
<title>Hurricane Sandy Livestream Map</title>
<meta http-equiv='Content-Type' content="text/html;charset=utf-8" />
<link rel="stylesheet" href="leaflet/leaflet.css" />
<style type='text/css'>
    html,body {
        position: relative;
        margin: 0;
        padding: 0;
        height: 100%;
        font-family: "Helvetica Neue","Liberation Sans",Arial,Verdana,Helvetica,FreeSans,sans-serif;
    }
    a:link { color: #760000; text-decoration: none;}
    a:hover { color: #000000 }
    a:visited { color: #960000; text-decoration: none; }
    .title {
        text-transform: uppercase;
        position: absolute;
        top: 0;
        left: 0;
        width: 70%;
        text-align: center;
        z-index: 1000;
        font-weight: bold;
        text-shadow: #999 2px -2px 5px;
        margin-left: 15%;
        font-size: 38pt;
    }
    #map {
        width: 100%;
        height: 100%;
    }
    .search {
        position: absolute;
        top: 60px;
        right: 20px;
        background: rgba(255, 255, 255, 0.8);
        padding: 0.5em;
        z-index: 10;
    }
    .speed {
      position: absolute;
      right: 0px;
      bottom: 30px;
      opacity: 0.8;
    }
    input.loading {
        background: url("img/spinner.gif") no-repeat;
    }
    .leaflet-popup-content {
        min-width: 200px;
    }
</style>
</head>
<body>
<div id='map'></div>
<div class='title'>
  <span style='color: #900;'>Hurricane Sandy</span>
</div>
<div class='search'>
    Help by 
    <a href='http://bit.ly/hurricanehackers-sandystreams'>Adding more livestreams</a>!<br/>
    Find location:
    <form id='searchform' method='get' action=''>
        <input type='text' id='search' placeholder='e.g. New York' />
        <input type='submit' value='Go' />
        <div class='results'></div>
    </form>
    <br />
    <a href='https://docs.google.com/document/pub?id=1wdDo65UcBfdcUTvda5fwb4HOI7RjEvWq3KzZBV9ORcc#h.fo1u1ghhqz3h'>About</a><br />
    More <a href='http://bit.ly/hh-index'>#HurricaneHackers projects</a>
</div>
<div class='speed'>
  <img src='img/knots.png' alt='Wind speed in knots' />
</div>
<script src='js/jquery.min.js'></script>
<script type='text/javascript' src='data.js'></script>
<script type='text/javascript' src='leaflet/leaflet.js'></script>
<script type='text/javascript' src='js/leaflet-plugins.js'></script>
<script type='text/javascript'>
// Replace this with your own API key!
var CLOUDMADE_API_KEY = '647c4a0955a247f894f83468e96ea60d'; // key for http://web.media.mit.edu/~cfd/occupystreamsmap/

var generators = {
    "livestream": function(source) {
        return {
            style: {
                url: "http://thumbnail.api.livestream.com/thumbnail?name=" + source.id,
                width: 24,
                height: 18
            },
            html: ["<h2><a href='", source.url, "'>", source.location, "</a></h2>",
                (source.embed_code ? source.embed_code : [
                  "<a href='", source.url, "'><img class='livestreamthumb' src='http://thumbnail.api.livestream.com/thumbnail?name=", source.id, "' style='width: 240px; height: 180px'></a>"].join(""))].join("")
        }
    },
    "justintv": function(source) {
        return {
            style: {
                url: "http://static-cdn.jtvnw.net/previews/live_user_" + source.id + "-70x53.jpg",
                //url: "img/justintv-fancy.png",
                width: 24,
                height: 18
            },
            html: ["<h2><a href='", source.url, "'>", source.location, "</a></h2>",
                (source.embed_code ? source.embed_code : [
                  "<a href='", source.url, "'>",
                  "<img class='justintvthumb' src='http://static-cdn.jtvnw.net/previews/live_user_", source.id, "-320x240.jpg?' width='240' height='180' /></a>"
                ].join(""))
            ].join("")
        }
    },
    "ustream": function(source) {
        console.log(source.embed_code);
        return {
            style: {
                url: "img/ustream-fancy.png",
                width: 25,
                height: 25
            },
          html: ["<h2><a href='", source.url, "'>", source.location, "</a></h2>", 
              (source.embed_code ? source.embed_code : [
                "<a href='", source.url, "'><img src='",
                (source.livethumb ? source.livethumb : "img/ustream.jpg"),
                "'></a>"
              ].join(""))
          ].join("")
        }
    },
    "earthcam": function(source) {
        return {
            style: {
              url: "img/earthcam-fancy.png",
              width: 25,
              height: 25
            },
            html: ["<h2><a href='", source.url, "'>", source.location, "</a></h2>", "<a href='", source.url, "'><img src='img/earthcam-fancy.png' /></a>"].join("")
        }
    },
    "other": function(source) {
        return {
            style: {
              url: "img/other-fancy.png",
              width: 25,
              height: 25
            },
            html: ["<h2><a href='", source.url, "'>", source.location, "</a></h2>",
                (source.embed_code ? source.embed_code : [
                  "<a href='", source.url, "'><img src='img/other-fancy.png' /></a>"
                ].join(""))
            ].join("")
        }
    }
};
var osm = new L.TileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {
    attribution: 'Map data &copy; OpenStreetMap contributors, CC-BY-SA.  Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">.',
    subdomains: ['otile1', 'otile2', 'otile3', 'otile4'],
    minZoom: 2,
    maxZoom: 20
});

//var rain = new L.TileLayer("http://openweathermap.org/t/tile.cgi/1.0.0/GLBETA_PR/{z}/{x}/{y}.png", {
//  attribution: "<a href='http://openweathermap.org'>Weather data by OpenWeatherMap.org</a>",
//  opacity: 0.2
//})

var WeatherLayer = L.TileLayer.WMS.extend({
  getTileUrl: function(tilePoint, zoom) {
    var map = this._map,
        crs = map.options.crs,
        tileSize = this.options.tileSize,

        nwPoint = tilePoint.multiplyBy(tileSize),
        sePoint = nwPoint.add(new L.Point(tileSize, tileSize)),

        nw = crs.project(map.unproject(nwPoint, zoom)),
        se = crs.project(map.unproject(sePoint, zoom)),


        bbox = [nw.x, se.y, se.x, nw.y].join(',');
        return "http://openweathermap.org/t/t?url=SERVICE=WMS%26REQUEST=GetMap%26FORMAT=image%2Fpng%26TRANSPARENT=true%26VERSION=1.1.1%26SRS=EPSG%3A900913%26HEIGHT=256%26WIDTH=256%26LAYERS=GLBETA_UV%26BBOX=" + bbox;
  }
});


var weather = new WeatherLayer("http://openweathermap.org/t/t?url=", {
  opacity: 0.3,
  minZoom: 1,
  noWrap: true,
  attribution: "<a href='http://openweathermap.org'>Windspeed data by OpenWeatherMap.org</a>"
})

//var webcams = new L.KML("eastern_seaboard_webcams.kml");

var map = new L.Map('map', {
    layers: [osm, weather]
});
map.attributionControl.setPrefix("");
var overlaps = {};
var bounds = [];
for (var i = 0; i < data.sources.length; i++) {
    // cluster -- nudge the icon to the right if it overlaps.
    var source = data.sources[i];
    var lat = source.point.lat;
    var lng = source.point.lng;
    while (overlaps[[lat, lng].join(" ")]) {
        lng += 0.02;
    }
    overlaps[[lat, lng].join(" ")] = true;

    // draw.
    var repr = generators[source.provider](source);
    var icon = new L.Icon({
        iconUrl: repr.style.url,
        iconSize: new L.Point(repr.style.width, repr.style.height)
    });
    var point = new L.LatLng(lat, lng);
    var marker = new L.Marker(point, {icon: icon})
    marker.addTo(map);
    marker.bindPopup(repr.html, {maxWidth: '600px'});
    bounds.push(point);
}
map.fitBounds(new L.LatLngBounds(bounds));


$("#searchform").submit(function() {
    var srch = $("#search");
    srch.addClass("loading");
    $.ajax({
        url: "http://geocoding.cloudmade.com/" + CLOUDMADE_API_KEY + "/geocoding/v2/find.js?query=" + encodeURIComponent(srch.val()),
        dataType: "jsonp",
        success: function(data) {
            srch.removeClass("loading");
            if (data.features) {
                var bounds = data.features[0].bounds;
                map.fitBounds(new L.LatLngBounds([
                    new L.LatLng(bounds[0][0], bounds[0][1]),
                    new L.LatLng(bounds[1][0], bounds[1][1])
                ]));
                var names = [data.features[0].properties.name];
                if (data.features[0].properties["is_in:country"]) {
                    names.push(data.features[0].properties["is_in:country"]);
                } else if (data.features[0].properties["is_in:continent"]) {
                    names.push(data.features[0].properties["is_in:continent"]);
                } else if (data.features[0].properties["is_in"]) {
                    names.push(data.features[0].properties["is_in"]);
                }
                if (data.features[0].properties.population) {
                    names.push("<br />Population: " + data.features[0].properties.population);
                }
                $(".results", ".search").html(names.join(", "));
            } else {
                $(".results", ".search").html("No results."); 
            }
        }
    });
    return false;
});


window.setInterval(function() {
    $("img.livestreamthumb, img.justintvthumb").each(function() {
        var img = $(this);
        if (img.is(":visible")) {
            var oldSrc = img.attr("src"); 
            oldSrc = oldSrc.split("&t=")[0];
            img.attr("src", oldSrc + "&t=" + new Date().valueOf());
        }
    });
}, 1000);


</script>
<!-- Piwik -->
<script type="text/javascript">
var pkBaseURL = (("https:" == document.location.protocol) ? "https://betweenthebars.org/analytics/" : "http://betweenthebars.org/analytics/");
document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript">
try {
var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 5);
piwikTracker.trackPageView();
piwikTracker.enableLinkTracking();
} catch( err ) {}
</script><noscript><p><img src="http://betweenthebars.org/analytics/piwik.php?idsite=5" style="border:0" alt="" /></p></noscript>
<!-- End Piwik Tracking Code -->
</body>
</html>