Skip to content

Instantly share code, notes, and snippets.

@Macariom01

Macariom01/gonVideosData

Created September 12, 2014 00:17
Show Gist options
  • Save Macariom01/85b468c7fad55e736621 to your computer and use it in GitHub Desktop.
Save Macariom01/85b468c7fad55e736621 to your computer and use it in GitHub Desktop.
Download ZIP
valNewsDemo3
Raw
gistfile1.erb
!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC:400,700' rel='stylesheet' type='text/css' />
<!-- <link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="popup-examples.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/jquery.ui.map/3.0rc/min/jquery.ui.map.full.min.js"></script>
<script src="./videoListVar.js"></script>
<script type="text/javascript">
$(function() {
var videoList = [];
//console.log('gonvideos = ', gonvideos);/// for debug
// includes map constructor and does
$('#map_canvas').gmap({'center': '37.7577,-122.4376', 'zoom': 12}).bind('init', function(evt, map) {
searchGeocode = function(){
//below may get used
// var searchAddress = $('#location').val();
$('#map_canvas').gmap('clear', 'markers');
var searchAddress = $('#location').val();
$('#map_canvas').gmap('search', { 'address': searchAddress }, function(results, status) {
if ( status === 'OK' ) {
$('#map_canvas').gmap('get', 'map').panTo(results[0].geometry.location);
var boundMaker = .05 // finds videos w/in scope of map
var latUpperBound = map.getCenter().lat() + boundMaker;
var latLowerBound = map.getCenter().lat() - boundMaker;
var lngUpperBound = map.getCenter().lng() + boundMaker;
var lngLowerBound = map.getCenter().lng() - boundMaker;
videoList = [];
if (gonvideos.length >= 1){
for ( var i = 0; i < gonvideos.length; i++ ){
// search by geographic range
if( (gonvideos[i].lat < latUpperBound) && (gonvideos[i].lat > latLowerBound) && (gonvideos[i].long < lngUpperBound) && (gonvideos[i].long > lngLowerBound) ){
videoList.push(gonvideos[i]);
} // closes if( (gonvideos[i].lat...
} //closes for loop
}// closes if
//} else{
// videoList.push(gonvideos);
// } //closes else
var infoString = "";
if (videoList.length >= 1){
for ( var i = 0; i < videoList.length; i++ ){
infoString = videoList[i].url ;
$('#map_canvas').gmap('addMarker', { 'position': new google.maps.LatLng(videoList[i].lat, videoList[i].long), 'markerUrl': infoString} ).click(function() {
window.open(this.markerUrl);
});
} //closes for loop
} //closes if (gonvideos.length >= 1)
} // closes if ( status === 'OK' )
}); // closes $('#map_canvas').gmap('search'
} // searchGeocode = function()
}); //closes map canvas bind
}); //closes $(function)
</script>
</head>
<body>
<!-- page begin -->
<div data-role="page" id="pageone" data-title="News for the People, by the People" class="container" data-theme="b" data-overlay-theme="a" style="height:100%; width:100%;">
<!-- panel -->
<div data-role="panel" id="myPanel" data-theme="b" data-overlay-theme="a" data-display="overlay" data-position="right" data-corners="false" data-shadow="false" data-swipe-close="true" data-mini="true">
<ul data-role="listview" data-mini="true" data-filter="true" data-theme="b" data-divider-theme="a" data-autodividers="false" data-filter-placeholder="search #hashtags" data-filter-theme="a" data-inset="false">
<li data-theme="b" data-icon="arrow-u-r" class="ui-li-icon" data-overlay-theme="a" data-mini="true">#sanfrancisco</li>
<li data-theme="b" data-overlay-theme="a" data-mini="true" data-icon="carat-r" data-iconpos="right">#bayarea</li>
<li data-theme="b" data-overlay-theme="a" data-mini="true" data-icon="carat-r" data-iconpos="right">#ukraine</li>
<li data-theme="b" data-overlay-theme="a" data-mini="true" data-icon="carat-r" data-iconpos="right">#isis</li>
<li data-theme="b" data-overlay-theme="a" data-mini="true" data-icon="carat-r" data-iconpos="right">#marinasf</li>
</ul>
<p>
<br>
<div>
<center><a href="videos_new_path" data-role="button" data-corners="false" data-theme="b" data-overlay-theme="a" class="bodytext" data-mini="true" data-inset="true" data-inline="true" data-icon="camera" data-iconpos="right">Upload</a>
</center>
</div>
</div>
<!-- header -->
<div data-role="header" data-position="fixed" data-theme="b" data-overlay-theme="a" class="header">
<h1>valiant</h1>
<a href="#myPanel" data-role="button" data-icon="bars" data-iconpos="notext" data-shadow="false" style="right: 8px; left: initial;"></a>
<div data-role="navbar" style="margin:0 auto">
<div class="ui-grid-a" style="margin: 0 auto;">
<div class="ui-block-a">
<input id="location" class="ui-btn-active ui-state-persist" type="text" placeholder="Address, City, State, or Zip Code" data-mini="true" data-type="horizontal" style="margin-right:auto; margin-left:auto;">
</div>
<div class="ui-block-b">
<input type="button" value="Search" onClick="searchGeocode()" data-inline="true" data-icon="search" data-iconpos="right" data-mini="true" data-type="horizontal" style="margin-right:auto; margin-left:auto;" data-type="horizontal" class="ui-btn-active ui-state-persist">
</div>
</div>
<!-- /grid-a -->
</div>
</div>
<!--Mark's map-->
<div id="map_canvas" style="width:100%;height:450px"></div>
<!-- content
<div data-role="content" class="ui-content" style="height:100%; width:100%;" data-shadow="false" data-corners="false" class=".ui-body-c">
</div>
-->
</div>
<script>
$(document).on("pageinit", "#pageone", function() {
$(document).on("swipeleft swiperight", "#pageone", function(e) {
if ($.mobile.activePage.jqmData("panel") !== "open") {
if (e.type === "swipeleft") {
$("#myPanel").panel("open");
} else if (e.type === "swiperight") {
$("#myPanel").panel("open");
}
}
});
});
</script>
</body>
</html>
popup-examples.css Raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
body {
height:100px %;
margin:0;
padding:0;
font-family: 'Oxygen', sans-serif;
font-size:12pt;
letter-spacing: 1px;
}
#popupPanel - popup {
right:0!important;
left:auto!important;
}
#myPanel {
border:0;
height:400px;
background-color:rgba(37,37,37,0.7);
border-right:none;
margin:-1px 0;
}
#popupPanel.ui-btn {
margin:2em 15px;
}
html, #map-canvas {
height:100px%;
}
#footer {
margin: 0 auto;
}
#pageone * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.header {
font-family: Playfair Display SC;
letter-spacing: 3px;
}
.container {
font-family: 'Oxygen', sans-serif;
}
.ui-panel {
top: 41px;
height: calc(100% - 41px);
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-right.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-overlay {
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
Raw
gonVideosData
var gonvideos = [
{
created_at: "2014-09-02T12:53:00.933Z",
id: 1,
lat: 37.7970029,
long: -122.4221535,
recorded_at: "2014-09-02T12:47:00.000Z",
title: "94109#innercity",
updated_at: "2014-09-02T13:08:07.967Z",
url: "http://images.forbes.com/media/lists/7/2006/94109.gif"
},
{
created_at: "2014-09-02T12:57:53.562Z",
id: 2,
lat: 37.8007154,
long: -122.4390415,
recorded_at: "2014-09-02T12:54:00.000Z",
title: "94123#innercity",
updated_at: "2014-09-02T13:08:29.040Z",
url: "http://sanfranciscorealestateproperties.com/files/2009/05/zip-codes-94123-94109-94133-for-blog.jpg"
},
{
created_at: "2014-09-02T13:02:48.893Z",
id: 3,
lat: 37.7772124,
long: -122.4947935,
recorded_at: "2014-09-02T13:00:00.000Z",
title: "94121#outercity",
updated_at: "2014-09-02T13:02:48.893Z",
url: "http://sanfranciscorealestateproperties.com/files/2009/05/zip-codes-94121-94118-94115-94129-for-blog.jpg"
},
{
created_at: "2014-09-02T13:07:15.574Z",
id: 4,
lat: 37.7595849,
long: -122.485004,
recorded_at: "2014-09-02T13:03:00.000Z",
title: "94122#outercity",
updated_at: "2014-09-02T13:07:15.574Z",
url: "http://pics4.city-data.com/ztrends/94122.png"
},
{
created_at: "2014-09-02T13:10:47.154Z",
id: 5,
lat: 37.744193,
long: -122.4842331,
recorded_at: "2014-09-02T13:08:00.000Z",
title: "94116#outercity",
updated_at: "2014-09-02T13:10:47.154Z",
url: "http://pics4.city-data.com/ztrends/94116.png"
},
{
created_at: "2014-09-02T13:13:24.129Z",
id: 6,
lat: 37.7909818,
long: -122.4018811,
recorded_at: "2014-09-02T13:11:00.000Z",
title: "94104#innercity",
updated_at: "2014-09-02T13:13:24.129Z",
url: "http://pics4.city-data.com/ztrends/94104.png"
},
{
created_at: "2014-09-02T13:16:12.291Z",
id: 7,
lat: 37.7913155,
long: -122.392605,
recorded_at: "2014-09-02T13:13:00.000Z",
title: "94105#innercity",
updated_at: "2014-09-02T13:16:12.291Z",
url: "http://pics4.city-data.com/ztrends/94105.png"
},
{
created_at: "2014-0937.7948087,-122.4036461,-02T13:18:12.291Z",
id: 8,
lat: 37.7948087,
long: -122.4036461,
recorded_at: "2014-09-02T13:12:00.000Z",
title: "Academy X#webDevClass",
updated_at: "2014-09-02T13:19:12.291Z",
url: "http://www.compx2.com/wp-content/uploads/2014/07/desktop-computer_0.jpg"
},
{
created_at: "2014-0927.7948087,-122.4036461,-02T13:18:12.291Z",
id: 9,
lat: 37.84802,
long: -122.2518281,
recorded_at: "2014-09-03T13:12:00.000Z",
title: "Barclays#OaklandEats",
updated_at: "2014-09-04T13:19:12.291Z",
url: "http://barclayspub.com/Beers.php"
},
{
created_at: "2014-0928.7948087,-122.4036461,-02T13:18:12.291Z",
id: 10,
lat: 37.871899,
long: -122.25854,
recorded_at: "2014-09-05T13:12:00.000Z",
title: "Cal#berkeley",
updated_at: "2014-09-05T13:19:12.291Z",
url: "http://campkesem.org/wp-content/themes/kesemtheme/images/logo-cal.jpg"
},
{
created_at: "2014-0937.7948087,-122.4036461,-02T13:18:12.291Z",
id: 11 ,
lat: 37.8816759,
long: -122.463117,
recorded_at: "2014-09-02T13:12:00.000Z",
title: "Tiburon#Marin",
updated_at: "2014-09-05T13:19:12.291Z",
url: "http://fineartamerica.com/images-medium/tiburon-california-waterfront-frank-wilson.jpg"
},
{
created_at: "2014-0929.7948087,-122.4036461,-02T13:18:12.291Z",
id: 12,
lat:37.858418,
long: -122.4946367 ,
recorded_at: "2014-09-07T13:12:00.000Z",
title: "Sausolito#Marin",
updated_at: "2014-09-08T13:19:12.291Z",
url: "http://upload.wikimedia.org/wikipedia/commons/e/e0/Sausalito.jpg"
},
{
created_at: "2014-0928.7948087,-122.4036461,-02T13:18:12.291Z",
id: 13 ,
lat: 37.411646,
long: -122.071453,
recorded_at: "2014-09-06T13:12:00.000Z",
title: "Microsoft#BetterThanMac",
updated_at: "2014-09-06T13:19:12.291Z",
url: "http://core0.staticworld.net/images/article/2013/03/microsoft_logo-100029828-gallery.jpg"
},
{
created_at: "2014-0930.7948087,-122.4036461,-02T13:18:12.291Z",
id: 14 ,
lat: 37.331793,
long: -122.029584 ,
recorded_at: "2014-09-01T13:12:00.000Z",
title: "Apple#BuyApc",
updated_at: "2014-09-02T13:19:12.291Z",
url: "http://3.bp.blogspot.com/--5k8RKor2Bk/Tale5StxP4I/AAAAAAAABP0/GVvtybEPkpM/s320/apple-logo1.jpg"
},
{
created_at: "2014-0930.7948087,-122.4036461,-02T13:18:12.291Z",
id: 15 ,
lat: 37.427474,
long: -122.169719,
recorded_at: "2014-09-01T13:12:00.000Z",
title: "Stanford#MountainView",
updated_at: "2014-09-02T13:19:12.291Z",
url: "http://stanford.edu/about/images/intro_about.jpg"
},
{
created_at: "2014-0930.7948087,-122.4036461,-02T13:18:12.291Z",
id: 16 ,
lat: 37.332799,
long: -121.90121,
recorded_at: "2014-09-01T13:12:00.000Z",
title: "Sharks#PaloAlto",
updated_at: "2014-09-02T13:19:12.291Z",
url: "http://upload.wikimedia.org/wikipedia/en/thumb/3/37/SanJoseSharksLogo.svg/1258px-SanJoseSharksLogo.svg.png"
},
{
created_at: "2014-0930.7948087,-122.4036461,-02T13:18:12.291Z",
id: 17 ,
lat: 37.750887,
long: -122.418116,
recorded_at: "2014-09-01T13:12:00.000Z",
title: "La Taqueria#Tacos",
updated_at: "2014-09-02T13:19:12.291Z",
url: "http://www.ealuxe.com/wp-content/uploads/2014/07/Best-Restaurants-in-California-La-Taqueria-San-Francisco.jpg"
},
{
created_at: "2014-0930.7948087,-122.4036461,-02T13:18:12.291Z",
id: 18 ,
lat: 37.808331,
long: -122.270582,
recorded_at: "2014-09-01T13:12:00.000Z",
title: "Fox Theater#Oakland",
updated_at: "2014-09-02T13:19:12.291Z",
url: "http://assets.thump.vice.com/content-images/contentimage/1528/bass-leph-hounds-of-hell-7.jpg"
}
]; //closes var gonvideos =
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment